{"id":19824532,"url":"https://github.com/link2twenty/l2t-paper-rating","last_synced_at":"2025-07-11T07:41:28.029Z","repository":{"id":57741374,"uuid":"91849540","full_name":"Link2Twenty/l2t-paper-rating","owner":"Link2Twenty","description":"Polymer element to display \"star\" ratings in a paper style","archived":false,"fork":false,"pushed_at":"2018-05-25T15:42:41.000Z","size":38,"stargazers_count":7,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-21T01:11:24.376Z","etag":null,"topics":["rating","star-rating","web-components"],"latest_commit_sha":null,"homepage":"https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Link2Twenty.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-19T22:19:22.000Z","updated_at":"2025-02-23T20:04:45.000Z","dependencies_parsed_at":"2022-08-29T09:52:23.684Z","dependency_job_id":null,"html_url":"https://github.com/Link2Twenty/l2t-paper-rating","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/Link2Twenty/l2t-paper-rating","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-rating","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-rating/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-rating/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-rating/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Link2Twenty","download_url":"https://codeload.github.com/Link2Twenty/l2t-paper-rating/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Link2Twenty%2Fl2t-paper-rating/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264757253,"owners_count":23659314,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["rating","star-rating","web-components"],"created_at":"2024-11-12T11:04:22.215Z","updated_at":"2025-07-11T07:41:28.009Z","avatar_url":"https://github.com/Link2Twenty.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating)\n[![Published on Vaadin  Directory](https://img.shields.io/badge/Vaadin%20Directory-published-blue.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-rating)\n[![Stars on vaadin.com/directory](https://img.shields.io/vaadin-directory/star/Link2Twentyl2t-paper-rating.svg)](https://vaadin.com/directory/component/Link2Twentyl2t-paper-rating)\n\n# \\\u003cl2t-paper-rating\\\u003e\n\nA polymer element to display \u0026#34;star\u0026#34; ratings in a paper style\n\n## Install with bower\n\nFirst you need bower, [see their site](http://bower.io/) for details\n\n```\nbower install --save l2t-paper-rating\n```\n\n## Examples\n\n\u003c!---\n```\n\u003ccustom-element-demo\u003e\n  \u003ctemplate\u003e\n    \u003cscript src=\"../webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    \u003clink rel=\"import\" href=\"l2t-paper-rating.html\"\u003e\n\t \u003cnext-code-block\u003e\u003c/next-code-block\u003e\n  \u003c/template\u003e\n\u003c/custom-element-demo\u003e\n```\n--\u003e\n```html\n  \u003cl2t-paper-rating\u003e\u003c/l2t-paper-rating\u003e \u003cbr/\u003e\n  \u003cl2t-paper-rating rating=\"2\" readonly\u003e\u003c/l2t-paper-rating\u003e \u003cbr/\u003e\n  \u003cl2t-paper-rating rating=\"3\" total=\"4\"\u003e\u003c/l2t-paper-rating\u003e\n```\n\n## A11y/ARIA\n\nFor screen readers it's helpful to have a label though the traditional label element will not work with custom elements so we'll need to change the [aria-label](https://www.w3.org/TR/WCAG20-TECHS/ARIA14.html) or [aria-labelledby](https://www.w3.org/TR/WCAG20-TECHS/ARIA7.html) properties directly.\n\nThere are examples of both methods on the [demo page](https://www.webcomponents.org/element/Link2Twenty/l2t-paper-rating/demo/demo/index.html).\n\n## Styling\n\nThe following custom properties are available for styling:\n\n| Custom property | Description | Default |\n|----------------|-------------|-------------|\n| --rating-icon-color | The color of the icons | --primary-text-color |\n| --rating-icon-size | The size of the icon (square) | 28px |\n| --rating-icon-padding | The size of the padding between icons | 2px |\n| --rating-ink-color | The color of the ripple on icon tap | --primary-text-color |\n| --rating-unselected-opacity | The opacity of stars 'non-active' | 0.4 |\n\n## Properties\n\n### Public\n\n| Attribute Name | Functionality | Type | Default |\n|----------------|-------------|-------------|-------------|\n| icon | the icon to use (iron-icons) | String | star |\n| rating | numbers of star selected (reflectToAttribute) | Number | 1 |\n| readonly | can the rate be modified | Boolean | false |\n| total | maximum number of stars selectable | Number | 5 |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-paper-rating","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flink2twenty%2Fl2t-paper-rating","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flink2twenty%2Fl2t-paper-rating/lists"}