{"id":25403855,"url":"https://github.com/nonsalant/toggle-categories","last_synced_at":"2026-02-28T23:02:47.467Z","repository":{"id":277719630,"uuid":"933295560","full_name":"nonsalant/toggle-categories","owner":"nonsalant","description":"\"Toggles\" that control categories of toggle switches with intermediary state for when only some subitems are active","archived":false,"fork":false,"pushed_at":"2025-08-02T12:15:25.000Z","size":22,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-02T12:25:54.999Z","etag":null,"topics":["css","forms","light-dom","toggle-switches","vanilla-javascript","web-components"],"latest_commit_sha":null,"homepage":"https://codepen.io/nonsalant/pen/OPJLJoL","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nonsalant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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,"zenodo":null}},"created_at":"2025-02-15T16:11:31.000Z","updated_at":"2025-08-02T12:15:28.000Z","dependencies_parsed_at":"2025-02-15T17:23:16.670Z","dependency_job_id":"28b5d31a-1c2d-4906-b751-cc23200df8f5","html_url":"https://github.com/nonsalant/toggle-categories","commit_stats":null,"previous_names":["nonsalant/toggle-categories"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nonsalant/toggle-categories","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Ftoggle-categories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Ftoggle-categories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Ftoggle-categories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Ftoggle-categories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nonsalant","download_url":"https://codeload.github.com/nonsalant/toggle-categories/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nonsalant%2Ftoggle-categories/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29954583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-28T22:53:01.873Z","status":"ssl_error","status_checked_at":"2026-02-28T22:52:50.699Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","forms","light-dom","toggle-switches","vanilla-javascript","web-components"],"created_at":"2025-02-16T03:27:09.960Z","updated_at":"2026-02-28T23:02:47.454Z","avatar_url":"https://github.com/nonsalant.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003ctoggle-categories\u003e` Web Component \u003csmall\u003e(no Shadow DOM)\u003c/small\u003e\n\n\"Toggles\" that control categories of toggle switches with intermediary (indeterminate) states for when only some subitems are active.\n\n- Using **Light DOM** allows you to style everything with regular CSS\n- Checkboxes fallback (for items only, category names need JS to show their toggles)\n- No dependencies\n\n## Demo\n\n[https://codepen.io/nonsalant/pen/OPJLJoL](https://codepen.io/nonsalant/pen/OPJLJoL)\n\n[![recording from the codepen demo](demo/toggle-categories.gif)](https://codepen.io/nonsalant/pen/OPJLJoL)\n\n*Dark mode demo of an indeterminate state for category toggles when only some subitems are active.*\n\n## Installation\n\n### Via CDN\n\nLoad the style and the main script in your `head` or anywhere in the `body`:\n```html\n\u003clink rel=\"stylesheet\" href=\"https://rawcdn.githack.com/nonsalant/toggle-categories/b5ae3ccee6124f878e79dc78381a8d09403f505e/src/toggle-categories.css\"\u003e\n\u003cscript src=\"https://rawcdn.githack.com/nonsalant/toggle-categories/b5ae3ccee6124f878e79dc78381a8d09403f505e/src/toggle-categories.js\"\u003e\u003c/script\u003e\n```\n\nCDN demo: https://codepen.io/nonsalant/pen/MYapmzR/bf1a11a33025524b17cdbe6ff9e3bb71\n\n- The script can also be loaded as a module:\n```html\n\u003cscript type=\"module\" src=\"https://rawcdn.githack.com/nonsalant/toggle-categories/b5ae3ccee6124f878e79dc78381a8d09403f505e/src/toggle-categories.js\"\u003e\u003c/script\u003e\n```\n\n### From local files\n\n1. Grab the files from the \u003ccode\u003esrc\u003c/code\u003e folder.\n2. Load the style and the main script in your `head` or anywhere in the `body` (adjust the paths as needed):\n```html\n\u003clink rel=\"stylesheet\" href=\"./src/toggle-categories.css\"\u003e\n\u003cscript src=\"./src/toggle-categories.js\"\u003e\u003c/script\u003e\n```\n\n- The script can also be loaded as a module:\n```html\n\u003cscript type=\"module\" src=\"./src/toggle-categories.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nUse it like this:\n```html\n\u003ctoggle-categories\u003e\n    \u003cul\u003e\n        \u003cli\u003e\n            \u003cspan\u003eCategory Name\u003c/span\u003e\n            \u003cul\u003e\n            \u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Item 1\u003c/label\u003e\u003c/li\u003e\n            \u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Item 2\u003c/label\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/li\u003e\n        \u003cli\u003e\n            \u003cspan\u003eOther Category Name\u003c/span\u003e\n            \u003cul\u003e\n            \u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Item 3\u003c/label\u003e\u003c/li\u003e\n            \u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Item 4\u003c/label\u003e\u003c/li\u003e\n            \u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\"\u003e Item 5\u003c/label\u003e\u003c/li\u003e\n            \u003c/ul\u003e\n        \u003c/li\u003e\n    \u003c/ul\u003e\n\u003c/toggle-categories\u003e\n```\n- Use the `checked` attribute to have an item pre-selected:\n```html\n\u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\" checked\u003e Item\u003c/label\u003e\u003c/li\u003e\n```\n- ID's are generated automatically for the checkboxes, but you can also set (some or all of) them manually:\n```html\n\u003cli\u003e\u003clabel\u003e\u003cinput type=\"checkbox\" id=\"item-1\"\u003e Item 1\u003c/label\u003e\u003c/li\u003e\n```\n\n## Styling\nYou can use regular CSS to style everything since the custom element does not use Shadow DOM.\n\nYou can also override these CSS custom properties to change the appearance of the component by adding the following CSS anywhere:\n```css\ntoggle-categories ul {\n    --toggle-category-color: light-dark(red, hotpink);\n    --toggle-color: #018259;\n    --toggle-category-height: .8rem;\n    --toggle-height: 1rem;\n    --toggle-categories--heading-bg: light-dark(#ddd, #333);\n    --toggle-categories-bg: light-dark(#f0f0f0, #222);\n}\n```\nNote: `ul` added in the selector above for extra specificity, to override the values set in toggle-categories.css.\n\n## Other notes\nThe `setTimeout(()=\u003e{...})` wrapping the insides of the `connectedCallback()` lifecycle method allows the script to be used as a non-module script tag (in addition to the module option) from anywhere on the page, including the document head, by adding a ~4ms delay which should be enough for the DOM to be ready.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Ftoggle-categories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnonsalant%2Ftoggle-categories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnonsalant%2Ftoggle-categories/lists"}