{"id":31897236,"url":"https://github.com/clshortfuse/materialdesignweb","last_synced_at":"2025-10-13T11:18:26.497Z","repository":{"id":29357125,"uuid":"118278881","full_name":"clshortfuse/materialdesignweb","owner":"clshortfuse","description":"Material Design for Web","archived":false,"fork":false,"pushed_at":"2025-02-25T20:46:04.000Z","size":21588,"stargazers_count":41,"open_issues_count":3,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-10T21:19:37.543Z","etag":null,"topics":["css","design","material"],"latest_commit_sha":null,"homepage":"https://clshortfuse.github.io/materialdesignweb/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/clshortfuse.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-20T20:40:21.000Z","updated_at":"2025-05-09T19:08:46.000Z","dependencies_parsed_at":"2024-06-13T23:12:12.716Z","dependency_job_id":"89bec630-6886-4395-bb16-ca18e867e1c3","html_url":"https://github.com/clshortfuse/materialdesignweb","commit_stats":{"total_commits":1854,"total_committers":3,"mean_commits":618.0,"dds":"0.0021574973031284195","last_synced_commit":"047d75d63a4c75def04589579adc29636e4e662a"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clshortfuse/materialdesignweb","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clshortfuse%2Fmaterialdesignweb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clshortfuse%2Fmaterialdesignweb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clshortfuse%2Fmaterialdesignweb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clshortfuse%2Fmaterialdesignweb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clshortfuse","download_url":"https://codeload.github.com/clshortfuse/materialdesignweb/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clshortfuse%2Fmaterialdesignweb/sbom","scorecard":{"id":293532,"data":{"date":"2025-08-11","repo":{"name":"github.com/clshortfuse/materialdesignweb","commit":"10b442229a76d0fe9f4f1201dd932b59fc4d963b"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.9,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: topLevel 'contents' permission set to 'read': .github/workflows/static.yml:14","Warn: no topLevel permission defined: .github/workflows/test-chromium.yml:1","Warn: no topLevel permission defined: .github/workflows/test-firefox.yml:1","Warn: no topLevel permission defined: .github/workflows/test-webkit.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: ISC License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/static.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/static.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/static.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/static.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/static.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/static.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-chromium.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-chromium.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-chromium.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-chromium.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-chromium.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-chromium.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-firefox.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-firefox.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-firefox.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-firefox.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-firefox.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-firefox.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-webkit.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-webkit.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-webkit.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-webkit.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test-webkit.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/clshortfuse/materialdesignweb/test-webkit.yml/main?enable=pin","Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Vulnerabilities","score":4,"reason":"6 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-x2rg-q646-7m2v","Warn: Project is vulnerable to: GHSA-jgmv-j7ww-jx2x","Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T18:54:43.198Z","repository_id":29357125,"created_at":"2025-08-17T18:54:43.198Z","updated_at":"2025-08-17T18:54:43.198Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279011047,"owners_count":26084865,"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","status":"online","status_checked_at":"2025-10-12T02:00:06.719Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","design","material"],"created_at":"2025-10-13T11:18:24.687Z","updated_at":"2025-10-13T11:18:26.490Z","avatar_url":"https://github.com/clshortfuse.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# materialdesignweb\nMaterial Design for Web\n\n*A standards-focused, zero-dependency implemention of Material Design 3 (Material You).*\n\n![Version](https://badgen.net/npm/v/@shortfuse/materialdesignweb) ![License](https://badgen.net/npm/license/@shortfuse/materialdesignweb) ![MinZip](https://badgen.net/bundlephobia/minzip/@shortfuse/materialdesignweb) ![Dependents](https://badgen.net/npm/dependents/@shortfuse/materialdesignweb)\n \n\n# Demo\n\nhttps://clshortfuse.github.io/materialdesignweb/\n\n# Getting started\n\n## Pre-bundled \n````html\n\u003cscript type=\"module\"\n src=\"https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4\"\u003e\u003c/script\u003e\n\n\u003cmdw-button\u003eHello World!\u003c/mdw-button\u003e\n````\n\nIncludes all components and theming over URL params.\n\n## Development\n\n### Static Theme Generation:\n\n\u003e `npx -p @shortfuse/materialdesignweb mdw-css --color=color=6750A4 --custom=yellow,orange:orange,green:0f0,alias:aqua --lightness=auto \u003e theme.css`\n\n### Dynamic Theme Generation:\n\nSee [loader.js](./theming/loader.js) for an example.\n\n### Component Loading\n\n````js\nimport { Button } from '@shortfuse/materialdesignweb';\n// OR\nimport Button from '@shortfuse/materialdesignweb/components/Button.js';\n// OR\nimport Button from 'https://www.unpkg.com/@shortfuse/materialdesignweb/components/Button.js';\n// OR\nimport { Button } from 'https://cdn.jsdelivr.net/npm/@shortfuse/materialdesignweb?color=6750A4';\n\nconst button = new Button();\nbutton.textContent = 'Hello World!';\ndocument.body.append(button);\n\n````\n\n# Support\n\nCompatibility is kept for as long possible by including browser-version-based patches. Ultimately, compatiblity may be dropped as new features get added. Bugs present in supported browsers should always be fixed.\n\n| Feature | Chrome | Edge | Firefox | Safari |\n| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot) | 53 | 79 | 63 | 10 |\n| [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef) | 84 | 84 | 79 | 14.1 |\n| [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | 88 | 88 | 78 | 14 |\n| | | | | |\n| [Array.at](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)† | 92 | 92 | 90 | 15.4 |\n| [replaceChildren](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren)† | 84 | 86 | 79 | 14.1 |\n| [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)† | 77 | 79 | 93 | 16.4 |\n| [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)† | 53 | 79 | 94 | 15 |\n| [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* | 73 | 79 | 101 | 16.4 |\n| [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)* | 106 | 106 | 110 | 16.0 |\n| |\n| Compatibility | 88 | 88 | 78 | 16.4 |\n| Support | [Latest ChromeOS LTS Release](https://chromeos.dev/en/education/chromeos-lts) | [Microsoft Edge Extended Stable Channel](https://learn.microsoft.com/en-us/DeployEdge/microsoft-edge-channels#extended-stable-channel) | ESR 115 | Last 2 Versions |\n| Status | [![Chrome](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Edge](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Firefox](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) | [![Safari](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml) |\n\n*Optional\n\n†Can be polyfilled\n\nNotes:\n\n* Compatibility may be extended via polyfills (not included)\n\n# Components\n\n| Component | Features | Status | Size |\n| :----------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [Badge](components/Badge.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Badge.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Badge) |\n| [Bottom App Bar](components/BottomAppBar.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Toolbar\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/BottomAppBar.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=BottomAppBar) |\n| Bottom Sheet | | [:memo:](# \"Planned\") | |\n| [Button](components/Button.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Button\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Button.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Button) |\n| [Card](components/Card.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:arrow_up_down:](# \"Flexable\") [:wheelchair:](# \"ARIA Figure\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Card.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Card) |\n| [Fab](components/Fab.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Button\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Fab.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Fab) |\n| [Fab - Extended](components/ExtendedFab.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Button\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ExtendedFab.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ExtendedFab) |\n| [Icon Button](components/IconButton.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Button \\| Checkbox\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/IconButton.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=IconButton) |\n| [Segmented Button](components/SegmentedButton.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Option\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButton.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=SegmentedButton) |\n| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# \"Ink\") [:wheelchair:](# \"ARIA Listbox\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SegmentedButtonGroup.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=SegmentedButtonGroup) |\n| [Checkbox](components/Checkbox.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Checkbox\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Checkbox.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Checkbox) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/CheckboxIcon.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=CheckboxIcon) |\n| [Chip](components/Chip.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Button\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Chip.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Chip) |\n| [Chip - Filter](components/FilterChip.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Checkbox \\| Radio\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/FilterChip.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=FilteredChip) |\n| Chip: Filter Dropdown | | [:construction:](# \"Under Construction\") | |\n| Chip: Input | | [:construction:](# \"Under Construction\") | |\n| Date Picker | | [:grey_question:](# \"Unknown\") | |\n| [Dialog](components/Dialog.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Dialog\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Dialog.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Dialog) |\n| Dialog: Full-screen | | [:grey_question:](# \"Unknown\") | |\n| [Divider](components/Divider.js) | [:crayon:](# \"Ink\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Divider.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Divider) |\n| [Icon](components/Icon.js) | [:crayon:](# \"Ink\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Icon) |\n| [List](components/List.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA List\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/List.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=List) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListItem.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ListItem) |\n| [Listbox](components/Listbox.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Option\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Listbox.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Listbox) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/ListOption.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ListOption) |\n| [Menu](components/Menu.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Menu\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Menu.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Menu) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/MenuItem.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=MenuItem) |\n| [Navigation Bar](components/NavBar.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Nav\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBar.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavBar) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavBarItem.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavBarItem) |\n| [Navigation Drawer](components/NavDrawer.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Nav\") | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawer.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavDrawer) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavDrawerItem.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavDrawerItem) |\n| [Navigation Rail](components/NavDrawer.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Nav\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRail.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavRail) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/NavRailItem.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=NavRailItem) |\n| [Progress Indicators](components/Progress.js) | [:crayon:](# \"Ink\") [:wheelchair:](# \"ARIA Progress\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Progress.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Progress) |\n| [Search](components/Search.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Toolbar\") | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Search.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Search) |\n| [Radio](components/Radio.js) | [:crayon:](# \"Ink\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Radio\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Radio.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Radio) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/RadioIcon.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=RadioIcon) |\n| [Side Sheet](components/SideSheet.js) | | [:construction:](# \"Under Construction\") | |\n| [Slider](components/Slider.js) | [:crayon:](# \"Ink\") [:wheelchair:](# \"ARIA Slider\") | [:warning:](# \"Issues\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Slider.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Slider) |\n| [Snackbar](components/Snackbar.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Status\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Snackbar.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Snackbar) |\n| [Switch](components/Switch.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:a:](# \"Font\") [:wheelchair:](# \"ARIA Switch\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Switch.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Switch) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SwitchIcon.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=SwitchIcon) |\n| [Tab](components/Tab.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Tab List \\| Tab \\| Tab Panel\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tab.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Tab) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabList.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TabList) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabPanel.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TabPanel) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TabContent.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TabContent) |\n| [Text Input](components/Input.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Textbox\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Input.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Input) |\n| [Text Area](components/TextArea.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Textarea\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TextArea.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TextArea) |\n| [Text Select](components/Select.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:large_blue_diamond:](# \"Shape\") [:signal_strength:](# \"Density\") [:wheelchair:](# \"ARIA Combobox\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Select.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Select) |\n| Time Picker | | [:grey_question:](# \"Unknown\") | |\n| [Tooltip](components/Tooltip.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:large_blue_diamond:](# \"Shape\") [:wheelchair:](# \"ARIA Tooltip\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Tooltip.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Tooltip) |\n| [Top App Bar](components/TopAppBar.js) | [:paintbrush:](# \"Background\") [:crayon:](# \"Ink\") [:o:](# \"Outline\") [:a:](# \"Font\") [:wheelchair:](# \"ARIA\") | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/TopAppBar.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TopAppBar) |\n\n# Additional\n\n| Component | Description | Status | Size |\n| :--------------------------------- | :---------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [Box](components/Box.js) | Simple themeable component with Flex and Grid options | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Box.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Box) |\n| [Layout](components/Layout.js) | Manages page nav, and pane layouts | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Layout.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Box) |\n| [Icon](components/Icon.js) | Font-icon, SVG, and IMG support | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Icon) |\n| [Body](components/Body.js) | Box with Body typography | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Body.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Body) |\n| [Label](components/Label.js) | Box with Label typography | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Label.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Label) |\n| [Headline](components/Headline.js) | Box with Headline typography | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Headline.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Headline) |\n| [Title](components/Title.js) | Box with Title typography | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Title.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Title) |\n| [Ripple](components/Ripple.js) | Ripple effect | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Ripple.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Ripple) |\n| [Shape](components/Shape.js) | Themeable, flexable, shapeable element | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Shape) |\n| [Surface](components/Surface.js) | Themeable, flexable, shapeable, elevateable element | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Surface) |\n\n\n# Mixins\n\n| Mixin | Description | Status | Size |\n| :---------------------------------------------- | :----------------------------------------------- | :--------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [AriaReflector](mixins/AriaReflectorMixin.js) | Reflects ARIA Properties | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaReflectorMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ARIAReflector) |\n| [AriaToolbar](mixins/AriaToolbarMixin.js) | Shared ARIA Toolbar functionality | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/AriaToolbarMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ARIAToolbar) |\n| [Control](mixins/ControlMixin.js) | HTML Control wrapper | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ControlMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Control) |\n| [Density](mixins/DensityMixin.js) | Component density options | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/DensityMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Density) |\n| [Flexable](mixins/FlexableMixin.js) | Add flexbox options as attributes | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FlexableMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Flexable) |\n| [FormAssociated](mixins/FormAssociatedMixin.js) | Form-associated custom element support | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/FormAssociatedMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=FormAssociated) |\n| [Input](mixins/InputMixin.js) | HTMLInputElement wrapper | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/InputMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Input) |\n| [KeyboardNav](mixins/KeyboardNavMixin.js) | Adds arrow key navigation and roving tab index | [:warning:](# \"Issues\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/KeyboardNavMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=KeyboardNav) |\n| [ResizeObserver](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ResizeObserverMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ResizeObserver) |\n| [Ripple](mixins/RippleMixin.js) | Replaces pressed state with ripple effect | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RippleMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Ripple) |\n| [RTLObserver](mixins/RTLObserverMixin.js) | Shared RTL paoge observer | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RTLObserverMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=RTLObserver) |\n| [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ScrollListenerMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=ScrollListener) |\n| [Shape](mixins/ShapeMixin.js) | Adds shape and outline layer to elements | [:warning:](# \"Issues\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ShapeMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Shape) |\n| [Surface](mixins/SurfaceMixin.js) | Adds shadows to elements | [:warning:](# \"Issues\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/SurfaceMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Surface) |\n| [TextField](mixins/TextFieldMixin.js) | Shared text field functionality | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TextFieldMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TextField) |\n| [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TooltipTriggerMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TooltipTrigger) |\n| [TouchTarget](mixins/TouchTargetMixin.js) | Adds extended touch target to controls | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TouchTargetMixin.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=TouchTarget) |\n\n# Core\n\n| File | Description | Status | Size |\n| :---------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------: |\n| [Composition](core/Composition.js) | Composes templates based on styles, fragments, and watches. Renders data | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/Composition.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=Composition) |\n| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/CustomElement.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=CustomElement) |\n| [CompositionAdapter](core/Composition.js) | Handles data array to elements binding | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/CompositionAdapter.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=CompositionAdapter) |\n| [jsonMergePatch](core/jsonMergePatch.js) | Applies, constructors, and evaluates JSON Merge Patch | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/jsonMergePatch.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=jsonMergePatch) |\n| [css](core/css.js) | CSS, CSSStyleSheet, HTMLStyleElement functions | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/css.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=css) |\n| [customTypes](core/customTypes.js) | Non-primitive observable types | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/customTypes.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=customTypes) |\n| [optimizations](core/optimizations.js) | Micro-optimizations functions | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/optimizations.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=optimizations) |\n| [dom](core/dom.js) | DOM functions | [:warning:](# \"Issues\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/dom.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=dom) |\n| [observe](core/observe.js) | Observable pattern for primitives and objects | [:construction:](# \"Under Construction\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/observe.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=observe) |\n| [template](core/template.js) | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment) | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/template.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=template) |\n| [uid](core/uid.js) | Generates a UID string | [:heavy_check_mark:](# \"Ready\") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/core/uid.js?compression=gzip\u0026softmax=2048\u0026max=4096\u0026label=uid) |\n\n\n# Other Components\n\nThese components do not have official M3 guidelines\n\n| Component | Status |\n| :----------- | :--------------------------------------: |\n| ~~Backdrop~~ | [:skull:](# \"Not planned\") |\n| Banner | [:construction:](# \"Under Construction\") |\n| Data Table | [:memo:](# \"Planned\") |\n| Image List | [:grey_question:](# \"Unknown\") |\n\n\n# Legend\n\n* [:paintbrush:](# \"Background\") - Background Theming\n* [:crayon:](# \"Ink\") - Ink (Foreground) Theming\t\n* [:o:](# \"Outline\") - Outline\n* [:a:](# \"Font\") - Font Theming\t\n* [:large_blue_diamond:](# \"Shape\") - Shape Size Theming\n* [:signal_strength:](# \"Density\") - Density\n* [:arrow_up_down:](# \"Flexable\") - Flexable layout\n* [:wheelchair:](# \"ARIA\") - ARIA Role\n \n* [:heavy_check_mark:](# \"Ready\") - Ready\n* [:warning:](# \"Issues\") - Issues\n* [:construction:](# \"Under Construction\") - Under Construction\n* [:memo:](# \"Planned\") - Planned\n* [:grey_question:](# \"Unknown\") - Unknown\n* [:skull:](# \"Not planned\") - Not planned\n\n\n# Archive\n\nThe Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclshortfuse%2Fmaterialdesignweb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclshortfuse%2Fmaterialdesignweb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclshortfuse%2Fmaterialdesignweb/lists"}