{"id":51451253,"url":"https://github.com/lordsarcastic/coss-ui-angular","last_synced_at":"2026-07-25T00:32:49.949Z","repository":{"id":360800673,"uuid":"1250671625","full_name":"lordsarcastic/coss-ui-angular","owner":"lordsarcastic","description":"Accessible Angular components inspired by the public COSS UI catalogue at coss.com/ui/docs.","archived":false,"fork":false,"pushed_at":"2026-05-27T22:51:58.000Z","size":239,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-07-22T05:05:39.622Z","etag":null,"topics":["angular","angular-coss","coss-ui"],"latest_commit_sha":null,"homepage":"https://coss-ui.lordsarcastic.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lordsarcastic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":null,"dco":null,"cla":null}},"created_at":"2026-05-26T21:29:44.000Z","updated_at":"2026-07-05T15:52:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/lordsarcastic/coss-ui-angular","commit_stats":null,"previous_names":["lordsarcastic/coss-ui-angular"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/lordsarcastic/coss-ui-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lordsarcastic%2Fcoss-ui-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lordsarcastic%2Fcoss-ui-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lordsarcastic%2Fcoss-ui-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lordsarcastic%2Fcoss-ui-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lordsarcastic","download_url":"https://codeload.github.com/lordsarcastic/coss-ui-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lordsarcastic%2Fcoss-ui-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35861393,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-24T02:00:07.870Z","response_time":62,"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","angular-coss","coss-ui"],"created_at":"2026-07-05T21:00:27.989Z","updated_at":"2026-07-25T00:32:49.944Z","avatar_url":"https://github.com/lordsarcastic.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["UI Libraries"],"readme":"# COSS UI Angular\n\nAccessible Angular components inspired by the public COSS UI catalogue at `coss.com/ui/docs`.\n\nHosted documentation: https://coss-ui.lordsarcastic.dev\n\nThis repository contains:\n\n- `projects/coss-ui-angular`: publishable Angular library.\n- `projects/docs`: documentation website built with the library components.\n- `.github/workflows/ci.yml`: CI for Biome formatting/linting, Angular tests, and production builds.\n\n## Quick Start\n\n```bash\nnpm install\nnpm start\n```\n\nBuild everything:\n\n```bash\nnpm run build\n```\n\nRun checks:\n\n```bash\nnpm run ci\n```\n\n## Use the Library\n\nInstall the package after it is published:\n\n```bash\nnpm install @lordsarcastic/coss-ui-angular\n```\n\nImport individual standalone components or directives:\n\n```ts\nimport { Component } from '@angular/core';\nimport { CossButtonDirective, CossInputDirective, CossFieldComponent } from '@lordsarcastic/coss-ui-angular';\n\n@Component({\n  standalone: true,\n  imports: [CossButtonDirective, CossInputDirective, CossFieldComponent],\n  template: `\n    \u003ccoss-field\u003e\n      \u003clabel cossLabel for=\"email\"\u003eEmail\u003c/label\u003e\n      \u003cinput cossInput id=\"email\" type=\"email\" placeholder=\"you@example.com\" /\u003e\n    \u003c/coss-field\u003e\n\n    \u003cbutton cossButton type=\"button\"\u003eSave\u003c/button\u003e\n  `,\n})\nexport class ExampleComponent {}\n```\n\nOr import the full collection:\n\n```ts\nimport { COSS_COMPONENTS } from '@lordsarcastic/coss-ui-angular';\n```\n\n## Tailwind Setup\n\nThe components are styled with Tailwind utility classes and CSS variables. Add the library to your Tailwind content scan:\n\n```js\nexport default {\n  content: ['./src/**/*.{html,ts}', './node_modules/@lordsarcastic/coss-ui-angular/**/*.{mjs,js}'],\n};\n```\n\nDefine the design tokens in your global stylesheet:\n\n```css\n:root {\n  --background: 5 5 9;\n  --foreground: 255 255 255;\n  --card: 10 10 15;\n  --card-foreground: 255 255 255;\n  --popover: 10 10 15;\n  --popover-foreground: 255 255 255;\n  --primary: 246 166 35;\n  --primary-foreground: 5 5 9;\n  --secondary: 38 38 45;\n  --secondary-foreground: 255 255 255;\n  --muted: 38 38 45;\n  --muted-foreground: 163 163 163;\n  --accent: 39 39 42;\n  --accent-foreground: 255 255 255;\n  --destructive: 239 68 68;\n  --destructive-foreground: 255 255 255;\n  --border: 38 38 38;\n  --input: 38 38 38;\n  --ring: 246 166 35;\n  --info: 59 130 246;\n  --info-foreground: 255 255 255;\n  --success: 34 197 94;\n  --success-foreground: 5 5 9;\n  --warning: 245 158 11;\n  --warning-foreground: 5 5 9;\n}\n```\n\n## Component Coverage\n\nThe library exports Angular versions of the COSS UI surface: accordion, alert, alert dialog, autocomplete, avatar, badge, breadcrumb, button, calendar, card, checkbox, checkbox group, collapsible, combobox, command, date picker, dialog, drawer, empty state, field, fieldset, form, frame, group, input, input group, keyboard key, label, menu, meter, number field, OTP field, pagination, popover, preview card, progress, radio group, scroll area, select, separator, sheet, skeleton, slider, spinner, switch, table, tabs, textarea, toast, toggle, toggle group, toolbar, and tooltip.\n\n## Accessibility\n\nNative controls are preferred where they provide the strongest behavior: `button`, `a`, `input`, `select`, `textarea`, `details`, `summary`, date input, radio input, and form elements. Composite components expose ARIA roles and state such as `dialog`, `menu`, `radiogroup`, `checkbox`, `switch`, `progressbar`, `meter`, `tablist`, `aria-expanded`, `aria-selected`, and `aria-current`.\n\n## Publishing\n\nBuild the library before publishing:\n\n```bash\nnpm run build:lib\ncd dist/coss-ui-angular\nnpm publish\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordsarcastic%2Fcoss-ui-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flordsarcastic%2Fcoss-ui-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flordsarcastic%2Fcoss-ui-angular/lists"}