{"id":47244647,"url":"https://github.com/bookedsolidtech/helix","last_synced_at":"2026-05-08T02:34:15.485Z","repository":{"id":343626202,"uuid":"1158684499","full_name":"bookedsolidtech/helix","owner":"bookedsolidtech","description":"HELiX — 72-component enterprise web component library built with Lit 3.x and TypeScript. WCAG 2.1 AA compliant, W3C design tokens, Storybook 10, Drupal-ready. Includes Custom Elements Manifest for AI-assisted development via MCP.","archived":false,"fork":false,"pushed_at":"2026-04-19T07:03:40.000Z","size":26808,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-19T07:12:53.289Z","etag":null,"topics":["accessibility","ai-tools","component-library","css-custom-properties","custom-elements","custom-elements-manifest","design-system","design-tokens","drupal","enterprise","healthcare","lit","mcp","monorepo","shadow-dom","storybook","turborepo","typescript","wcag","web-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bookedsolidtech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":"AUDIT-DEVELOPER-EXPERIENCE.md","citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-02-15T19:01:44.000Z","updated_at":"2026-04-16T01:13:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/bookedsolidtech/helix","commit_stats":null,"previous_names":["bookedsolidtech/helix"],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/bookedsolidtech/helix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bookedsolidtech%2Fhelix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bookedsolidtech%2Fhelix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bookedsolidtech%2Fhelix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bookedsolidtech%2Fhelix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bookedsolidtech","download_url":"https://codeload.github.com/bookedsolidtech/helix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bookedsolidtech%2Fhelix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32165201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-23T02:19:40.750Z","status":"ssl_error","status_checked_at":"2026-04-23T02:17:55.737Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":["accessibility","ai-tools","component-library","css-custom-properties","custom-elements","custom-elements-manifest","design-system","design-tokens","drupal","enterprise","healthcare","lit","mcp","monorepo","shadow-dom","storybook","turborepo","typescript","wcag","web-components"],"created_at":"2026-03-14T04:24:50.911Z","updated_at":"2026-04-23T04:01:39.051Z","avatar_url":"https://github.com/bookedsolidtech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"docs/assets/social-card.png\" alt=\"HELiX — Enterprise Web Component Library\" width=\"600\"\u003e\n\n### Enterprise Healthcare Web Component Library\n\nA production-ready Web Component library built with Lit 3.x and TypeScript for healthcare organizations that demand accessibility compliance, design token theming, and Drupal CMS integration.\n\n\u003c!-- Badge Row --\u003e\n\n[![npm version](https://img.shields.io/npm/v/@helixui/library?logo=npm\u0026label=npm)](https://www.npmjs.com/package/@helixui/library)\n[![CI Status](https://img.shields.io/github/actions/workflow/status/bookedsolidtech/helix/ci.yml?branch=main\u0026label=CI\u0026logo=github)](https://github.com/bookedsolidtech/helix/actions)\n[![License: MIT](https://img.shields.io/badge/license-MIT-blue)](LICENSE)\n[![Bundle Size](https://img.shields.io/badge/bundle-%3C50KB%20gzip-success)](packages/hx-library)\n[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue?logo=typescript)](tsconfig.base.json)\n[![WCAG 2.1 AA](https://img.shields.io/badge/WCAG%202.1-AA%20target-blue)](https://www.w3.org/TR/WCAG21/)\n[![Docs](https://img.shields.io/badge/docs-helix.bookedsolid.tech-teal)](https://helix.bookedsolid.tech)\n[![Storybook](https://img.shields.io/badge/storybook-live-ff4785?logo=storybook)](https://helix-storybook.bookedsolid.tech)\n\n[Documentation](https://helix.bookedsolid.tech) · [Storybook](https://helix.bookedsolid.tech/storybook/) · [NPM Package](https://www.npmjs.com/package/@helixui/library) · [Contributing](CONTRIBUTING.md)\n\n\u003c/div\u003e\n\n---\n\n## Quick Start\n\n```bash\nnpm install @helixui/library\n```\n\nThen use components in your HTML:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@helixui/library';\n\u003c/script\u003e\n\n\u003chx-button variant=\"primary\"\u003eGet Started\u003c/hx-button\u003e\n\n\u003chx-card variant=\"outlined\" elevation=\"raised\"\u003e\n  \u003cspan slot=\"heading\"\u003ePatient Portal\u003c/span\u003e\n  \u003cp\u003eAccessible, themeable components for healthcare UIs.\u003c/p\u003e\n  \u003chx-button slot=\"footer\" variant=\"primary\"\u003eLearn More\u003c/hx-button\u003e\n\u003c/hx-card\u003e\n```\n\nOr import individual components for optimal tree-shaking:\n\n```js\nimport '@helixui/library/components/hx-button';\nimport '@helixui/library/components/hx-card';\n```\n\n---\n\n## Why HELiX?\n\n- **Healthcare accessibility built in** — Targeting WCAG 2.1 AA compliance ahead of the [HHS Section 504 mandate (May 2026)](https://www.hhs.gov/civil-rights/for-providers/compliance-enforcement/digital-accessibility/). Every component is keyboard-navigable, screen reader compatible, and tested with axe-core. Accessibility audits are ongoing as we work toward full AA conformance across all 73 components.\n\n- **Framework-agnostic Web Components** — Built on Lit 3.x and the Web Components standard. Works in React, Angular, Vue, Drupal, or plain HTML. No framework lock-in, no adapter libraries.\n\n- **Design token theming** — Three-tier token architecture (primitive → semantic → component) with CSS custom properties. Theme entire applications by overriding `--hx-*` tokens — light mode, dark mode, and high contrast modes included.\n\n- **Enterprise-grade quality** — TypeScript strict mode, 73 components, 3-tier code review, automated accessibility testing, and most components \u003c5KB gzipped (hx-theme is larger due to design token imports). Built for organizations where software failures impact patient care.\n\n---\n\n## Components\n\nHELiX ships **73 production components** spanning the full spectrum of UI needs:\n\n| Category         | Components                                                                                                                  |\n| ---------------- | --------------------------------------------------------------------------------------------------------------------------- |\n| **Actions**      | `hx-button`, `hx-button-group`, `hx-copy-button`, `hx-action-bar`                                                           |\n| **Forms**        | `hx-text-input`, `hx-checkbox`, `hx-radio-group`, `hx-select`, `hx-combobox`, `hx-date-picker`, `hx-file-upload`, `hx-form` |\n| **Data Display** | `hx-card`, `hx-data-table`, `hx-list`, `hx-tree-view`, `hx-badge`, `hx-avatar`, `hx-tag`                                    |\n| **Feedback**     | `hx-alert`, `hx-toast`, `hx-progress-bar`, `hx-spinner`, `hx-skeleton`                                                      |\n| **Navigation**   | `hx-breadcrumb`, `hx-tabs`, `hx-pagination`, `hx-sidebar`, `hx-menu`                                                        |\n| **Layout**       | `hx-grid`, `hx-container`, `hx-divider`, `hx-header`, `hx-stack`                                                            |\n| **Overlays**     | `hx-dialog`, `hx-drawer`, `hx-tooltip`, `hx-popover`, `hx-dropdown`                                                         |\n\n[Browse all components in Storybook →](https://helix.bookedsolid.tech/storybook/)\n\n---\n\n## Documentation\n\nFull documentation is available at **[helix.bookedsolid.tech](https://helix.bookedsolid.tech)**:\n\n- **Getting Started** — Installation, setup, and first component\n- **Component API Reference** — Auto-generated from Custom Elements Manifest\n- **Design Tokens** — Token architecture, theming guide, and token reference\n- **Drupal Integration** — Twig templates, Drupal behaviors, and CDN delivery\n- **Accessibility** — WCAG compliance guide and testing procedures\n\n---\n\n## Drupal Integration\n\nHELiX is designed for seamless Drupal CMS integration:\n\n```twig\n{# node--article--teaser.html.twig #}\n\u003chx-card variant=\"outlined\" elevation=\"raised\" href=\"{{ url }}\"\u003e\n  \u003cimg slot=\"image\" src=\"{{ image_url }}\" alt=\"{{ image_alt }}\"\u003e\n  \u003cspan slot=\"heading\"\u003e{{ node.label }}\u003c/span\u003e\n  {{ node.body.summary }}\n\u003c/hx-card\u003e\n```\n\nSee the [Drupal Integration Guide](https://helix.bookedsolid.tech/guides/drupal/) for complete setup instructions, Twig patterns, and JavaScript behaviors.\n\n---\n\n## Development\n\n### Prerequisites\n\n- Node.js 22 LTS or Node.js 24 (Node 20 reaches upstream EOL on 2026-04-30)\n- pnpm 9+ (via [Corepack](https://nodejs.org/api/corepack.html): `corepack enable`)\n- Git\n\n### Setup\n\n```bash\ngit clone https://github.com/bookedsolidtech/helix.git\ncd helix\npnpm install\npnpm run dev        # Start library + Storybook + docs\n```\n\n### Commands\n\n```bash\npnpm run dev            # All apps + library (Turborepo)\npnpm run dev:storybook  # Storybook on port 3151\npnpm run dev:docs       # Documentation site on port 3150\npnpm run build          # Build everything\npnpm run test           # Run all tests (Vitest browser mode)\npnpm run type-check     # TypeScript strict check\npnpm run verify         # Lint + format + type-check (required before push)\n```\n\n---\n\n## Tech Stack\n\n| Layer      | Technology                                                          |\n| ---------- | ------------------------------------------------------------------- |\n| Components | [Lit 3.x](https://lit.dev), Shadow DOM, CSS Parts, ElementInternals |\n| Language   | TypeScript (strict mode)                                            |\n| Build      | Vite library mode, per-component entry points                       |\n| Testing    | Vitest browser mode + Playwright                                    |\n| API Docs   | Custom Elements Manifest (CEM)                                      |\n| Stories    | [Storybook 10.x](https://storybook.js.org)                          |\n| Docs       | [Astro Starlight](https://starlight.astro.build)                    |\n| Monorepo   | [Turborepo](https://turbo.build) + pnpm workspaces                  |\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines. All contributions must:\n\n- Pass TypeScript strict mode (`pnpm run type-check`)\n- Include tests with 80%+ coverage\n- Meet WCAG 2.1 AA accessibility standards\n- Include Storybook stories for all variants\n\n---\n\n## License\n\n[MIT](LICENSE)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**[Documentation](https://helix.bookedsolid.tech)** · **[Storybook](https://helix.bookedsolid.tech/storybook/)** · **[NPM](https://www.npmjs.com/package/@helixui/library)** · **[Issues](https://github.com/bookedsolidtech/helix/issues)**\n\nBuilt with care for healthcare.\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbookedsolidtech%2Fhelix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbookedsolidtech%2Fhelix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbookedsolidtech%2Fhelix/lists"}