{"_id":"@accretion-ui/angular","_rev":"4-00a34c127e12e5f982604069cf91cdd7","name":"@accretion-ui/angular","dist-tags":{"latest":"0.2.3"},"versions":{"0.2.0":{"name":"@accretion-ui/angular","version":"0.2.0","_id":"@accretion-ui/angular@0.2.0","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"1c80afec9ebab6218241f228f2902b104ffe70cf","tarball":"https://registry.npmjs.org/@accretion-ui/angular/-/angular-0.2.0.tgz","fileCount":33,"integrity":"sha512-E/hNPL0vesbikNDC4xF3pG4B7GrjjHrjUKVuviBMhyiR2g4w8fuTvQ+q2ny3PXRIXoDCfJfa6NEvATOKRYUpfw==","signatures":[{"sig":"MEUCIAg+dgFKS2fkIgXKXQOX5sjWiatGa7+DJn849n9KnjplAiEAjLrJL/4YaaqIqTB6U+eyps53Q2peR+INbIgzsFno0Oc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57192},"type":"module","types":"./src/public-api.d.ts","exports":{".":{"types":"./src/public-api.d.ts","default":"./src/public-api.js"},"./styles.css":"./styles.css"},"gitHead":"e09583475480a694ea2886986c7761328fd44369","_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native Angular Accordion primitives derived from the shared Accretion UI source.","directories":{},"sideEffects":["styles.css"],"_nodeVersion":"25.7.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_0.2.0_1773130493251_0.5995877382962111","host":"s3://npm-registry-packages-npm-production"}},"0.2.1":{"name":"@accretion-ui/angular","version":"0.2.1","_id":"@accretion-ui/angular@0.2.1","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"222157da3480f86074e8124a66b9f7663144dbad","tarball":"https://registry.npmjs.org/@accretion-ui/angular/-/angular-0.2.1.tgz","fileCount":33,"integrity":"sha512-RZQrM4gtuUUNZP6nL01N0BfyryF8cK5lbBrS48ncnUrTLvQdCrxfltZ3Jffbehgp7uRkYXQHU1J2aY6nqBOAgg==","signatures":[{"sig":"MEYCIQCLp6P/dXwEaCRyVzsn6YZ+Js/8CnnAGQzEsDugfudkNwIhAIsR0b8TV8lPmXs7+Hc71EoO9pUD0jh4f2Wg1dWE3sAp","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57180},"type":"module","types":"./src/public-api.d.ts","exports":{".":{"types":"./src/public-api.d.ts","default":"./src/public-api.js"},"./styles.css":"./styles.css"},"gitHead":"e09583475480a694ea2886986c7761328fd44369","_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native Angular Accordion primitives derived from the shared Accretion UI source.","directories":{},"sideEffects":["styles.css"],"_nodeVersion":"25.7.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_0.2.1_1773193285677_0.7296635289422395","host":"s3://npm-registry-packages-npm-production"}},"0.2.2":{"name":"@accretion-ui/angular","version":"0.2.2","_id":"@accretion-ui/angular@0.2.2","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"dist":{"shasum":"d817fe4291d12540cccc134906e82850b58b0065","tarball":"https://registry.npmjs.org/@accretion-ui/angular/-/angular-0.2.2.tgz","fileCount":36,"integrity":"sha512-Ctvr3uklt2FiCBbRWF5n4+LC3Bk8t6pZgY7OG8qz3UDHSbVE81c++c7Gvos6gjke99C8VVs92ztGfe7BUYM0dQ==","signatures":[{"sig":"MEUCICSsRFbL7LeBU3Tq9+gqk02aD1/kbK1pyGsdapSnaJQMAiEAsGNpcD3AdIqVdvUxwsUG+J7WY+nk1wddhUc/YMgV7vM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":59754},"type":"module","types":"./src/public-api.d.ts","exports":{".":{"types":"./src/public-api.d.ts","default":"./src/public-api.js"},"./styles.css":"./styles.css"},"gitHead":"cc5b1afdd385675e129ca2b164a580717975657b","_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"_npmVersion":"11.10.1","description":"Native Angular Accordion primitives derived from the shared Accretion UI source.","directories":{},"sideEffects":["styles.css"],"_nodeVersion":"25.7.0","dependencies":{"tslib":"^2.8.1"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/angular_0.2.2_1773219825767_0.7874484124004038","host":"s3://npm-registry-packages-npm-production"}},"0.2.3":{"name":"@accretion-ui/angular","version":"0.2.3","description":"Native Angular Accordion primitives derived from the shared Accretion UI source.","type":"module","sideEffects":["styles.css"],"peerDependencies":{"@angular/common":"^21.0.0","@angular/core":"^21.0.0","rxjs":"^7.8.0"},"dependencies":{"tslib":"^2.8.1"},"exports":{".":{"types":"./src/public-api.d.ts","default":"./src/public-api.js"},"./styles.css":"./styles.css"},"types":"./src/public-api.d.ts","gitHead":"cc5b1afdd385675e129ca2b164a580717975657b","_id":"@accretion-ui/angular@0.2.3","_nodeVersion":"25.7.0","_npmVersion":"11.10.1","dist":{"integrity":"sha512-hqA2HVpiQzWndM1C8dgtsjfskYeTth5EoKC77FJqmQVgS3gabto9lQvxa8j9z0718z+OPm3mXkq9YUr5zy9r3A==","shasum":"ffca9a307bd0bf2e622278485c0246020e534bf9","tarball":"https://registry.npmjs.org/@accretion-ui/angular/-/angular-0.2.3.tgz","fileCount":36,"unpackedSize":59754,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD3Lqf7lco9G1tqdZ/WgAVp8Cx5GC1FlLEXk5rc4CGgqwIgPdn33fOVU2WUvvQ+ub8yyJdhU5x50iylQROBGMDfmRM="}]},"_npmUser":{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"},"directories":{},"maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/angular_0.2.3_1773238195505_0.7326228564252413"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-10T08:14:53.189Z","modified":"2026-03-11T14:09:55.750Z","0.2.0":"2026-03-10T08:14:53.496Z","0.2.1":"2026-03-11T01:41:25.840Z","0.2.2":"2026-03-11T09:03:45.913Z","0.2.3":"2026-03-11T14:09:55.647Z"},"description":"Native Angular Accordion primitives derived from the shared Accretion UI source.","maintainers":[{"name":"brian_ruff_gmx","email":"brian.ruff@gmx.com"}],"readme":"# `@accretion-ui/angular`\n\nNative Angular Accordion primitives delivered as standalone host-bound primitives attached directly to real DOM elements.\n\n## Install\n\n```bash\nnpm install @accretion-ui/angular @angular/common @angular/core rxjs\n```\n\n## Use\n\nAdd the stylesheet to your Angular app configuration:\n\n```json\n{\n \"styles\": [\n \"node_modules/@accretion-ui/angular/styles.css\",\n \"src/styles.css\"\n ]\n}\n```\n\nImport the standalone primitives where you use them:\n\n```ts\nimport {\n Accordion,\n AccordionHeader,\n AccordionItem,\n AccordionPanel,\n AccordionTrigger,\n type AccordionValueOutput,\n} from '@accretion-ui/angular';\n```\n\nUse those imports in the Angular component metadata where the Accordion appears:\n\n```ts\n@Component({\n imports: [Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionPanel],\n standalone: true,\n})\nexport class ExampleComponent {\n handleValueChange(value: AccordionValueOutput) {\n console.log(value);\n }\n}\n```\n\nTemplate example:\n\n```html\n
\n
\n

\n \n

\n
\n Angular inputs and outputs control the component without adding extra wrapper elements.\n
\n
\n
\n```\n\nClosed panel content is not mounted by default. Set `keepMounted` on `acAccordionPanel` when a hidden panel must stay in the DOM.\nShared types such as `AccordionValueInput`, `AccordionValueOutput`, `AccordionOrientation`, and `AccordionSize` are exported from the package entry point.\nSet `[showIndicator]=\"false\"` on `acAccordionTrigger` when you want to replace the default chevron with fully custom trigger content.\n\n## Styling Requirements\n\nThe package expects `@accretion-ui/angular/styles.css` to be present in the application styles pipeline. The stylesheet exposes CSS variables such as:\n\n- `--ac-accordion-root-border-color`\n- `--ac-accordion-root-border-color-open`\n- `--ac-accordion-trigger-background-open`\n- `--ac-accordion-trigger-min-height`\n- `--ac-accordion-panel-padding-inline`\n- `--ac-accordion-panel-padding-block-start`\n- `--ac-accordion-focus-ring-color`\n- `--ac-accordion-focus-ring-offset`\n\n## SSR Expectations\n\nThis repo validates the Angular package in a real Angular SSR app.\n\n- Stable Accordion `id` values produce deterministic trigger and panel ids during SSR.\n- The primitives are applied directly to native host elements, so no wrapper nodes are added around triggers or panels.\n- Closed panel containers stay in the DOM for stable `aria-controls` relationships, while panel content is unmounted by default unless `keepMounted` or `hiddenUntilFound` is enabled.\n\n## Storybook\n\nRun the local Angular Storybook from the repo root:\n\n```bash\nnpm run storybook:angular\n```\n\nPublished Chromatic Storybook:\n\n- [https://69ae3de6fef62640081354ec-fbslbprsoe.chromatic.com/](https://69ae3de6fef62640081354ec-fbslbprsoe.chromatic.com/)\n\nWhen Chromatic is republished, update this Storybook link and the root README link in the repo.\n\n## Testing And Development Notes\n\n- Angular integration tests run through `ng test angular-ssr --watch=false`.\n- SSR smoke validation uses `smoke-apps/angular-ssr`.\n- Browser smoke checks run with `npm run smoke:angular`.\n","readmeFilename":"README.md"}