{"_id":"@dojo-ng/badge","name":"@dojo-ng/badge","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@dojo-ng/badge","version":"0.1.0","license":"BSD-3-Clause","description":"Dojo NG badge web component","type":"module","main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc -p tsconfig.json","clean":"rm -rf dist"},"dependencies":{"@dojo-ng/dojo-element":"^0.1.0","lit":"^3.3.0"},"_id":"@dojo-ng/badge@0.1.0","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-hUHgHWXuPugFNz57Eb1MeNBFhWcaZ0eNJR5UWtgro2Go8oh911eCtxcKDfBAuUIyQyQpGLlUuh7CBttXik3Djw==","shasum":"6e1f508dbde8d1edd744b01ef3afeb4adb4842a1","tarball":"https://registry.npmjs.org/@dojo-ng/badge/-/badge-0.1.0.tgz","fileCount":8,"unpackedSize":8952,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCb+lEk6gP5+7pR0Qp9mztuKoBx2mMA7Hb1SNslRF2oMgIgRUyutU2igAOTcLwklw42tsTpcAQJBRy/fu0UdQUsEMA="}]},"_npmUser":{"name":"bitranch","email":"bill@bitranch.com"},"directories":{},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/badge_0.1.0_1788374239041_0.8098527643922979"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-02T18:37:18.914Z","0.1.0":"2026-09-02T18:37:19.179Z","modified":"2026-09-02T18:37:19.604Z"},"maintainers":[{"name":"saysomething","email":"joshs@holmescorp.com"},{"name":"bitranch","email":"bill@bitranch.com"},{"name":"jepe","email":"jeffreyp@holmescorp.com"}],"description":"Dojo NG badge web component","license":"BSD-3-Clause","readme":"# @dojo-ng/badge\n\n`<dj-badge>` — A small count or status label that decorates other content.\n\nPart of [Dojo NG](../../README.md), a framework-agnostic web component library built on Lit. BSD-3-Clause.\n\nA small count or status label that decorates other content. Presentational: it carries no ARIA role. When a badge shows a count for a control (e.g. an unread count on a button), put the accessible name on the CONTROL — `aria-label=\"Notifications, 4 unread\"` — not on the badge, so assistive tech reads the meaning rather than a bare number. Content is the default slot.\n\n> Presentational only — a badge has no ARIA role. When it shows a count for a control (an unread count on a button, say), put the accessible name on the CONTROL (`aria-label=\"Notifications, 4 unread\"`), not on the badge, so assistive tech reads the meaning rather than a bare number. Variant colors reuse the theme's semantic `--dj-color-*-600` scales; override a single badge with `--dj-badge-background` / `--dj-badge-color`.\n\n## Install\n\n```bash\nnpm install @dojo-ng/badge\n```\n\n## Usage\n\nImport the package to register the custom element, then use the tag.\n\n`variant` picks a semantic color; `pill` fully rounds it.\n\n```html\n<dj-badge>Neutral</dj-badge>\n<dj-badge variant=\"info\">Info</dj-badge>\n<dj-badge variant=\"success\">Success</dj-badge>\n<dj-badge variant=\"warning\">Warning</dj-badge>\n<dj-badge variant=\"danger\" pill>3</dj-badge>\n```\n\n## Properties\n\n`↻` marks an attribute reflected to the DOM; a dash means the property is set in JavaScript only.\n\n| Property | Attribute | Type | Default |\n|---|---|---|---|\n| `variant` | variant ↻ | `BadgeVariant` | `\"neutral\"` |\n| `pill` | pill ↻ | `boolean` | `false` |\n\n**Slots:** default\n\n**Parts:** `base` (the badge box)\n\n**CSS properties:** `--dj-badge-background` (default `per-variant semantic color`; Background fill; defaults to the variant's `--dj-color-*-600` scale.), `--dj-badge-color` (default `var(--dj-color-neutral-0)`; Text color.), `--dj-badge-radius` (default `var(--dj-input-border-radius-small)`; Corner radius (ignored when `pill` is set).), `--dj-badge-font-size` (default `0.75rem`; Badge text size.)\n\n## Examples\n\n### Count on a control\n\nPut the accessible name on the control, not the badge.\n\n```html\n<dj-button aria-label=\"Notifications, 4 unread\">\n  Inbox <dj-badge variant=\"danger\" pill>4</dj-badge>\n</dj-button>\n```\n\n## Theming\n\nStyled with Dojo NG `--dj-*` design tokens and exposes `::part()` hooks for targeted overrides.\n\n## Accessibility and i18n\n\nFollows the project's WCAG 2.2 AA and localization conventions.\n\n## More\n\nLive, interactive examples are in the playground (`playground/index.html`). For the full API reference, theming, accessibility, and localization guides, see the [Dojo NG documentation](../../README.md).\n","readmeFilename":"README.md","_rev":"1-e308c8c47f5c35e8832a5bdabfb75dd5"}