{"_id":"@donnitec/ui","_rev":"2-6a95c615265f5034551627b45912fe52","name":"@donnitec/ui","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.4":{"name":"@donnitec/ui","version":"0.1.4","_id":"@donnitec/ui@0.1.4","maintainers":[{"name":"kaydonner","email":"npm@kaydonner.de"}],"dist":{"shasum":"1e0f6d14057eca60dd2ec4dbd5689d3eab903a6d","tarball":"https://registry.npmjs.org/@donnitec/ui/-/ui-0.1.4.tgz","fileCount":161,"integrity":"sha512-zZsdQSmVCkoyP5UaRGDnfSpxGr3qAbva4ZcItK9hDlC4Q5ThVDN9sANiNolyQhGUWtgDIxQpdM2CKCDq/LkdPw==","signatures":[{"sig":"MEQCIE8De31FpO9Yfj02v1iHtp1I1N5/MnI8sR+g/Zl1JYbvAiBa8RMiYaysvORyWsTDeOZ4ITQOCdTw8h63kKl1FpwY1w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":490519},"type":"module","_from":"file:release/npm/donnitec-ui-0.1.4.tgz","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./register":{"types":"./dist/register.d.ts","import":"./dist/register.js"},"./components":{"types":"./dist/components.d.ts","import":"./dist/components.js"},"./package.json":"./package.json","./components/*.js":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"}},"scripts":{"build":"rimraf dist && tsc -p tsconfig.build.json","check":"tsc -p tsconfig.build.json --noEmit","clean":"rimraf dist"},"_npmUser":{"name":"kaydonner","email":"npm@kaydonner.de"},"_resolved":"/builds/donnitec/design/release/npm/donnitec-ui-0.1.4.tgz","_integrity":"sha512-zZsdQSmVCkoyP5UaRGDnfSpxGr3qAbva4ZcItK9hDlC4Q5ThVDN9sANiNolyQhGUWtgDIxQpdM2CKCDq/LkdPw==","_npmVersion":"10.9.8","directories":{},"sideEffects":["./dist/register.js","./dist/components/**/*.js"],"_nodeVersion":"22.23.2","dependencies":{"lit":"^3.3.0"},"_hasShrinkwrap":false,"devDependencies":{"@donnitec/tokens":"workspace:^"},"peerDependencies":{"@donnitec/tokens":"^0.1.4"},"_npmOperationalInternal":{"tmp":"tmp/ui_0.1.4_1787949281635_0.38631889777118644","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@donnitec/ui","version":"0.1.5","type":"module","sideEffects":["./dist/register.js","./dist/components/**/*.js"],"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"},"./components":{"types":"./dist/components.d.ts","import":"./dist/components.js"},"./register":{"types":"./dist/register.d.ts","import":"./dist/register.js"},"./components/*.js":{"types":"./dist/components/*.d.ts","import":"./dist/components/*.js"},"./package.json":"./package.json"},"scripts":{"build":"rimraf dist && tsc -p tsconfig.build.json","check":"tsc -p tsconfig.build.json --noEmit","clean":"rimraf dist"},"dependencies":{"lit":"^3.3.0"},"peerDependencies":{"@donnitec/tokens":"^0.1.5"},"devDependencies":{"@donnitec/tokens":"workspace:^"},"_id":"@donnitec/ui@0.1.5","description":"Framework-agnostic Web Components for the Donni Design system.","_integrity":"sha512-95ZphIIO+iIkwoI0+Of04Uwa7oPMz/WRboZWLyEfj00W+yKX3CF+EjdkOm7gv9A3mTHCLOMKfOcbn8z8XCNPwQ==","_resolved":"/builds/donnitec/design/release/npm/donnitec-ui-0.1.5.tgz","_from":"file:release/npm/donnitec-ui-0.1.5.tgz","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-95ZphIIO+iIkwoI0+Of04Uwa7oPMz/WRboZWLyEfj00W+yKX3CF+EjdkOm7gv9A3mTHCLOMKfOcbn8z8XCNPwQ==","shasum":"b43dde0a56fc0b572a3d5f4d3862fb730d70ed18","tarball":"https://registry.npmjs.org/@donnitec/ui/-/ui-0.1.5.tgz","fileCount":162,"unpackedSize":493543,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEMCHyc96meMYM47laqFMJT/yMME6kdCTxHcPBR2P0sEmIQCIBo/3VcmRYe7ciyIreUFm0kY1QvkDWlqkR/ATFxz/C5P"}]},"_npmUser":{"name":"kaydonner","email":"npm@kaydonner.de"},"directories":{},"maintainers":[{"name":"kaydonner","email":"npm@kaydonner.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ui_0.1.5_1787949993045_0.5790430030044131"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-28T20:34:41.536Z","modified":"2026-08-28T20:46:33.642Z","0.1.4":"2026-08-28T20:34:41.865Z","0.1.5":"2026-08-28T20:46:33.231Z"},"maintainers":[{"name":"kaydonner","email":"npm@kaydonner.de"}],"readme":"# @donnitec/ui\n\nFramework-agnostic Web Components for the Donni Design system.\n\nThe package provides token-driven UI components built on Lit and is intended to be used together with `@donnitec/tokens`.\n\n## Installation\n\n```bash\npnpm add @donnitec/ui @donnitec/tokens\n```\n\nKeep both packages on the same Donni Design release version.\n\n## Setup\n\nLoad the Donni Design theme:\n\n```javascript\nimport '@donnitec/tokens/theme.css';\n```\n\nRegister all Donni Web Components globally:\n\n```javascript\nimport '@donnitec/ui/register';\n```\n\nYou can then use the components directly in HTML:\n\n```html\n<donni-stack gap=\"md\">\n  <donni-input\n    label=\"Project name\"\n    helper-text=\"Visible to workspace members\"\n  ></donni-input>\n\n  <donni-button variant=\"primary\">\n    Save changes\n  </donni-button>\n</donni-stack>\n```\n\n## Individual component imports\n\nApplications that do not require global registration can import individual component modules instead:\n\n```javascript\nimport '@donnitec/ui/components/button/donni-button.js';\nimport '@donnitec/ui/components/input/donni-input.js';\n```\n\nAvoid mixing global registration with unnecessary duplicate per-component imports.\n\n## Properties\n\nUse HTML attributes for primitive declarative values:\n\n```html\n<donni-button variant=\"secondary\" size=\"sm\">\n  Cancel\n</donni-button>\n```\n\nUse DOM properties for arrays, objects, renderers and other non-string values:\n\n```javascript\nconst table = document.querySelector('#projects');\n\ntable.columns = [\n  { key: 'name', label: 'Name' },\n  { key: 'status', label: 'Status' }\n];\n\ntable.rows = [\n  { name: 'Website', status: 'Active' },\n  { name: 'Admin', status: 'Preview' }\n];\n```\n\n## Events\n\nDonni components expose native events and `donni-*` custom events:\n\n```javascript\nconst input = document.querySelector('#project-name');\n\ninput.addEventListener('donni-input', (event) => {\n  console.log(event.detail);\n});\n```\n\n## Slots\n\nUse the documented slots to compose component content:\n\n```html\n<donni-card>\n  <h3 slot=\"header\">Deployment</h3>\n\n  <p>Production is healthy.</p>\n\n  <donni-button slot=\"footer\" variant=\"secondary\">\n    Details\n  </donni-button>\n</donni-card>\n```\n\n## Theming\n\nDonni Design separates appearance and primary color configuration.\n\nTheme mode:\n\n```html\n<html data-donni-theme=\"dark\">\n```\n\nColor preset:\n\n```html\n<html data-donni-color-preset=\"ocean\">\n```\n\nComponents expose CSS custom properties for supported component-level customization. Prefer these hooks and the shared Donni Design tokens over targeting internal Shadow DOM structures.\n\n## Components\n\n### Actions\n\n- Button\n\n### Forms\n\n- Form Field\n- Input\n- Textarea\n- Dropdown\n- Choice List\n\n### Status\n\n- Badge\n- Icon\n\n### Surfaces\n\n- Card\n- Modal\n\n### Theme\n\n- Color Presets\n- Theme Modes\n\n### Layout\n\n- Container\n- Grid\n- Stack\n\n### Navigation\n\n- Breadcrumbs\n- Navigation\n- Tabs\n\n### Data\n\n- Table\n\n### Shell\n\n- App Icon\n- Topbar\n- App Shell\n\n## Package exports\n\n```javascript\nimport '@donnitec/ui';\nimport '@donnitec/ui/components';\nimport '@donnitec/ui/register';\n```\n","readmeFilename":"README.md","description":"Framework-agnostic Web Components for the Donni Design system."}