{"id":15533941,"url":"https://github.com/zachleat/details-utils","last_synced_at":"2025-04-05T10:08:17.011Z","repository":{"id":44940857,"uuid":"453242361","full_name":"zachleat/details-utils","owner":"zachleat","description":"A suite of utilities to add more features to the \u003cdetails\u003e element.","archived":false,"fork":false,"pushed_at":"2023-11-07T18:56:50.000Z","size":46,"stargazers_count":264,"open_issues_count":7,"forks_count":14,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-29T09:09:19.611Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://zachleat.github.io/details-utils/demo.html","language":"JavaScript","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/zachleat.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2022-01-28T23:05:04.000Z","updated_at":"2025-03-03T14:05:16.000Z","dependencies_parsed_at":"2024-06-18T21:23:35.947Z","dependency_job_id":"8b306290-eec0-433b-af8d-1c7053255ce2","html_url":"https://github.com/zachleat/details-utils","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fdetails-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fdetails-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fdetails-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zachleat%2Fdetails-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zachleat","download_url":"https://codeload.github.com/zachleat/details-utils/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247318744,"owners_count":20919484,"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":[],"created_at":"2024-10-02T11:40:30.407Z","updated_at":"2025-04-05T10:08:16.992Z","avatar_url":"https://github.com/zachleat.png","language":"JavaScript","funding_links":[],"categories":["Element Extensions","JavaScript"],"sub_categories":[],"readme":"# `\u003cdetails-utils\u003e`\n\n* [All Demos](https://zachleat.github.io/details-utils/demo.html)\n* [Blog post on zachleat.com: Add Responsive-Friendly Enhancements to `\u003cdetails\u003e` with `\u003cdetails-utils\u003e`](https://www.zachleat.com/web/details-utils/)\n\nRelated work elsewhere:\n\n* [`spicy-sections`](https://github.com/tabvengers/spicy-sections)\n\n## Installation\n\n* [Available on npm](https://www.npmjs.com/package/@zachleat/details-utils)\n\n```\nnpm install @zachleat/details-utils\n```\n\nAdd `details-utils.js` to your bundle.\n\n## Usage\n\nWrap `\u003cdetails-utils\u003e` around one or more `\u003cdetails\u003e` elements to add enhancements to their behavior:\n\n* Click outside to close (also bind an optional close button)\n* Animate open and close (obeys `prefers-reduced-motion`)\n* Force open/closed based on:\n  - JavaScript\n  - Media query\n    - (e.g. viewport size, `prefers-reduced-motion`, even `prefers-reduced-data` if browsers ever support it 😅)\n    - Optionally restores user state when media query does not match (use `force-restore` attribute)\n* Close via `esc` Key\n  - With optional Media query.\n* Toggle Document Class (toggles a class on `\u003chtml\u003e` when active, useful for modals to disable document overflow)\n\n## Changelog\n\n### v2.0.0\n\n* Renamed attribute `force-closed` to `force-close`\n* Added `force-open` to complement `force-close`\n* Added `force-restore` to be used with `force-open` and `force-close` (restores state when media query does not match).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Fdetails-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzachleat%2Fdetails-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzachleat%2Fdetails-utils/lists"}