{"id":48912225,"url":"https://github.com/zainadeel/compomo","last_synced_at":"2026-06-09T01:03:42.523Z","repository":{"id":350567315,"uuid":"1207147168","full_name":"zainadeel/compomo","owner":"zainadeel","description":"Framework-agnostic web component library built with Stencil.js — works with React, Angular, and plain HTML. Part of the ds-mo design system.","archived":false,"fork":false,"pushed_at":"2026-06-06T03:54:41.000Z","size":1348,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T04:22:49.588Z","etag":null,"topics":["angular","component-library","custom-elements","design-system","ds-mo","stencil","storybook","typescript","ui","web-components"],"latest_commit_sha":null,"homepage":"https://zainadeel.github.io/compomo/","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/zainadeel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-04-10T16:16:39.000Z","updated_at":"2026-06-06T03:54:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/zainadeel/compomo","commit_stats":null,"previous_names":["zainadeel/compomo"],"tags_count":37,"template":false,"template_full_name":null,"purl":"pkg:github/zainadeel/compomo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainadeel%2Fcompomo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainadeel%2Fcompomo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainadeel%2Fcompomo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainadeel%2Fcompomo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zainadeel","download_url":"https://codeload.github.com/zainadeel/compomo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zainadeel%2Fcompomo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34086665,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-08T02:00:07.615Z","response_time":111,"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":["angular","component-library","custom-elements","design-system","ds-mo","stencil","storybook","typescript","ui","web-components"],"created_at":"2026-04-17T00:07:32.255Z","updated_at":"2026-06-09T01:03:42.516Z","avatar_url":"https://github.com/zainadeel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CompoMo — `@ds-mo/ui`\n\n[![npm version](https://img.shields.io/npm/v/@ds-mo/ui.svg)](https://www.npmjs.com/package/@ds-mo/ui)\n\nComposable web UI components (Stencil custom elements) styled with [TokoMo](https://github.com/zainadeel/TokoMo) design tokens. Works in any framework — ships Angular proxies out of the box.\n\n## Install\n\n```bash\nnpm install @ds-mo/ui @ds-mo/tokens\n```\n\n**Required peer dependency:** `@ds-mo/tokens` provides all CSS custom properties (colors, dimensions, typography, effects) that CompoMo components consume. Components will not render correctly without it.\n\n**Optional:** `@ds-mo/icons` for icon components passed via the `slot=\"icon\"` pattern.\n\n```bash\nnpm install @ds-mo/icons\n```\n\n## Setup\n\nImport TokoMo tokens globally (once, at your app root):\n\n```tsx\nimport '@ds-mo/tokens';        // all tokens (colors, dimensions, typography, effects)\nimport '@ds-mo/tokens/reset';   // CSS reset\nimport '@ds-mo/tokens/globals'; // global styles\n```\n\nThen import CompoMo components (Angular proxies):\n\n```ts\nimport { Button, Text, Surface, Card } from '@ds-mo/ui';\n```\n\n**SPA hosts (Angular / React):** `ds-panel-nav` and `ds-bar-nav` need a [first-paint integration contract](docs/framework-integration.md) on hard reload — set a document variant hint or element attributes before the custom element upgrades.\n\n**After upgrading `@ds-mo/ui`:** restart your dev server and hard-reload the browser. HMR often leaves stale custom-element definitions; BarNav overflow (`.bar-nav__tabs-probe`) will not appear until the new chunk loads. See [framework integration — `ds-bar-nav`](docs/framework-integration.md#ds-bar-nav--responsive-tab-overflow).\n\n## Components\n\n### Primitives\n- **Text** — typography with variant system, semantic colors, truncation, wrap modes\n- **Surface** — container with backgrounds, elevation, edges, radius, interactive states\n- **Card** — elevated content container with header/footer slots\n- **Input** — text input field\n- **Slider** — range slider\n- **Field** — label + input wrapper\n- **LabelWrap** — label + content wrapper with layout variants\n- **Divider** — horizontal or vertical rule\n\n### Actions\n- **Button** — primary/secondary/tertiary with intents, sizes, icon support\n- **ButtonGroup** — grouped button row with shared borders\n- **ToggleButton** — two-state selectable button\n- **ToggleButtonGroup** — radio-style group of toggle buttons\n\n### Controls\n- **Toggle** — on/off switch\n- **Checkbox** — with label and indeterminate state\n- **Radio** — single-select radio input\n\n### Data display\n- **Tag** — labels with intents, contrasts, removable\n- **Badge** — numeric count indicator\n- **Table** — sortable, paginated data table\n- **Accordion** — collapsible content sections\n- **Pagination** — page navigation control\n\n### Overlays\n- **Modal** — dialog with title, subtitle, footer slots\n- **Menu** — dropdown with sections, selection, positioning\n- **Tooltip** — hover tooltip with shortcut key support\n- **Select** — dropdown select\n- **Toast** — transient notification\n- **Banner** — notification bar with intents, toast mode\n\n### Navigation\n- **Tab** — tab button with selection state\n- **TabGroup** — grouped tabs with shared selection\n- **Breadcrumb** — path navigation\n\n### Status\n- **EmptyState** — placeholder states\n- **Loader** — loading indicator\n- **Skeleton** — content placeholder\n\n### Layout\n- **Header** — page header with left/center/right slots\n- **Sidebar** — collapsible, resizable navigation with sections and items\n\n### Utility\n- **Fade** — gradient overlay\n- **Scrollbar** — custom scrollbar\n- **ErrorBoundary** — error catch with fallback\n\n## Token dependency\n\nAll styling uses TokoMo CSS custom properties. No hardcoded colors, sizes, or shadows — everything maps to the token system. Components will render unstyled if `@ds-mo/tokens` is not imported.\n\n## Icon pattern\n\nComponents that accept icons use named slots:\n\n```html\n\u003cds-button\u003e\n  \u003cds-icon-arrow-right slot=\"icon\"\u003e\u003c/ds-icon-arrow-right\u003e\n  Save\n\u003c/ds-button\u003e\n```\n\nPass any element into `slot=\"icon\"`. Works with `@ds-mo/icons` or any custom SVG element.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzainadeel%2Fcompomo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzainadeel%2Fcompomo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzainadeel%2Fcompomo/lists"}