{"_id":"@aybolit/material","_rev":"1-400704fb2586a271e17aac401d470b25","name":"@aybolit/material","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aybolit/material","version":"0.1.0","author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"license":"MIT","main":"src/index.js","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/material"},"dependencies":{"@aybolit/core":"^0.1.0","lit-element":"^2.0.1"},"devDependencies":{"@pika/pack":"^0.3.0","@pika/plugin-build-web":"^0.3.0","@pika/plugin-bundle-web":"^0.3.0","@pika/plugin-standard-pkg":"^0.3.0"},"@pika/pack":{"pipeline":[["@pika/plugin-standard-pkg"],["@pika/plugin-build-web"],["@pika/plugin-bundle-web"]]},"scripts":{"dist":"pack build"},"gitHead":"991361f6365fce4319f736521597067d3714b28e","description":"Aybolit Material is a set of the web components inspired by [Material Design](https://material.io).","bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"homepage":"https://github.com/web-padawan/aybolit#readme","_id":"@aybolit/material@0.1.0","_nodeVersion":"10.14.0","_npmVersion":"lerna/3.13.1/node@v10.14.0+x64 (darwin)","dist":{"integrity":"sha512-D7ZxcujOxTk+bDWHMIAbblFm4kiQYjC7MOcF+Yy2SrI2NA0ILCB9v1NsNVlG52zC/fx5rZLqUYAD1vT6GELz/A==","shasum":"29cd0753ede9233dabe771f29ec9d717fa186823","tarball":"https://registry.npmjs.org/@aybolit/material/-/material-0.1.0.tgz","fileCount":15,"unpackedSize":152057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJciBkACRA9TVsSAnZWagAAgboQAJ7QhvdVgOpY9mo65XHS\nnuAbgoVfrii5gE65Fwf0rqwpTVzg/e2iaukysi8tIAvCgua5vK8Sq5IAVZeL\npuRSba66tjb5EIF/axt36DAFd+UEtRzweu55VcD9C2SmDzwiufniWs5U2yPh\nyaL7wCbJOCnbod4WuNoeraKAGXlPrho//wuDqsX+bI8dFZ5ns2qIRvqS1E99\nVj2B1h4NYUGUY8U/UrGBVv5t6zYajJNBS6sbu4+OJ4H8Hnct+sHh2Wj6ZA/i\nPC6RUX8RPhopgOCyrF/W55K7qOAcEgcncDMuncck1TEFB1Hw57zhFp3zI3z2\nvIHJfEsQNpoK5j6pjWP2S6bmtYCCvpg8rq1KYgWb37p5f24rk2CNg2SlXd8i\naUS/urR+KSqHhUvWQRYi5GFCljh/bBMg/r7f2kyzhXg/Dz+7agq0WCdDZKev\nGjoqH0+ZmInbhaWnEB+dE99oK2aAWQ4/lFawfwMkXRrO61hWkoUQRbDwoLHl\n27bkMSm+0AE3HkglzgC9QfpR1NByTG9pNuJutgtI9ZgyirlOAGXmixfC6Lbz\noQddDfmqKc97N2trDywC/0eIQPuIc9hgg/g7Ao8LkwF/5BoMBvE1H+VdUiK+\nFxzbrkmlKwhUQvQTC38hKQ80Uw4uxL/NLxR3Sf7FP+5bZ/AzYPb+r5mRiEhy\n+vdr\r\n=xqXw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjWIA5Ea12jFjnhoLoR0bU6cJQLLA+ivzplkxWOzLgWwIgCIQXb5Svx2P/Evl0u1ojIl1oVQ3MbRzy/Ai3l45n3CY="}]},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"_npmUser":{"name":"web-padawan","email":"serguey.kulikov@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/material_0.1.0_1552423167964_0.03770838970205248"},"_hasShrinkwrap":false}},"time":{"created":"2019-03-12T20:39:27.718Z","0.1.0":"2019-03-12T20:39:28.194Z","modified":"2022-04-04T17:14:19.024Z"},"maintainers":[{"name":"web-padawan","email":"serguey.kulikov@gmail.com"}],"description":"Aybolit Material is a set of the web components inspired by [Material Design](https://material.io).","homepage":"https://github.com/web-padawan/aybolit#readme","repository":{"type":"git","url":"git+https://github.com/web-padawan/aybolit.git","directory":"packages/material"},"author":{"name":"Serhii Kulykov","email":"serguey.kulikov@gmail.com"},"bugs":{"url":"https://github.com/web-padawan/aybolit/issues"},"license":"MIT","readme":"# Aybolit Material\n\nAybolit Material is a set of the web components inspired by [Material Design](https://material.io).\n\n## Overview\n\nAybolit Material is based on [Matter](https://github.com/finnhvman/matter), a library for creating Material Design Components in pure CSS. The reason to build on top of Matter is its custom CSS properties based architecture, which works with Web Components really nice.\n\nThe styles from Matter are preserved as much as possible, but the components variants and features, e.g. button types, should be configured via HTML attributes instead of CSS classes, in order to not affect the end user CSS.\n\n## Installation\n\nAybolit Material is available as [npm package](https://www.npmjs.com/package/@aybolit/material):\n\n```sh\n# with npm\nnpm i @aybolit/material --save\n\n# with yarn\nyarn add @aybolit/material\n```\n\nImport either all or individual components:\n\n```js\n// all components\nimport '@aybolit/material';\n\n// button only\nimport { AbmButton } from '@aybolit/material';\n```\n\nYou can also use get Aybolit Material from the CDN:\n\n```html\n<script src=\"https://unpkg.com/@aybolit/material@latest?module\" type=\"module\"></script>\n```\n\n## Components\n\n- [x] [Button](https://material.io/design/components/buttons.html)\n  - [x] [Text button](https://material.io/design/components/buttons.html#text-button)\n  - [x] [Outlined button](https://material.io/design/components/buttons.html#outlined-button)\n  - [x] [Contained button](https://material.io/design/components/buttons.html#contained-button)\n- [x] [Checkbox](https://material.io/design/components/selection-controls.html#checkboxes)\n- [x] [Progress](https://material.io/design/components/progress-indicators.html#linear-progress-indicators)\n- [x] [Range](https://material.io/design/components/sliders.html)\n- [x] [Switch](https://material.io/design/components/selection-controls.html#switches)\n\n## Examples\n\n```html\n<!-- Buttons -->\n<abm-button>Text</abm-button>\n<abm-button theme=\"outlined\">Outlined</abm-button>\n<abm-button theme=\"contained\">Contained</abm-button>\n\n<!-- Checkbox -->\n<abm-checkbox>Unchecked</abm-checkbox>\n<abm-checkbox checked>Checked</abm-checkbox>\n<abm-checkbox indeterminate>Indeterminate</abm-checkbox>\n\n<!-- Progress (indeterminate) -->\n<abm-progress></abm-progress>\n\n<!-- Progress (determinate) -->\n<abm-progress value=\"50\" max=\"100\"></abm-progress>\n\n<!-- Range -->\n<abm-range min=\"0\" max=\"10\" value=\"5\"></abm-range>\n\n<!-- Switch -->\n<abm-switch>Unchecked</abm-switch>\n<abm-switch checked>Checked</abm-switch>\n```\n\n## Custom CSS Properties\n\nThe following custom CSS properties are available for styling.\n\n| Property | Description | Fallback |\n|----------|-------------|----------|\n| `--abm-primary-rgb` | Primary color `rgb` value | 33, 150, 243 |\n| `--abu-onprimary-rgb` | On primary color `rgb` value | 255, 255, 255 |\n| `--abu-surface-rgb` | Surface color `rgb` value | 255, 255, 255 |\n| `--abu-onsurface-rgb` | On surface color `rgb` value | 0, 0, 0 |\n","readmeFilename":"README.md"}