{"_id":"@amplemarket/design-system-web","_rev":"7-a076b77d0ed396c3a6d8239ea45cc8a5","name":"@amplemarket/design-system-web","dist-tags":{"latest":"0.5.0"},"versions":{"0.0.2":{"name":"@amplemarket/design-system-web","version":"0.0.2","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.0.2","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/Amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/Amplemarket/design-system-web/issues"},"dist":{"shasum":"ed6697685a91991415775879059f31df5fcf15ab","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.0.2.tgz","fileCount":36,"integrity":"sha512-Xx8jh8h190wWVWtA58M3tJevCzAfzR7fTMRvYbUb0a1G+mzx+4gUJn8U2MHh4vNO/rIi64me0KSfDBim3R89Yg==","signatures":[{"sig":"MEQCIDQQo57wew5+QpXTXGwQJQf4g8D2CPP84QiOfT8Sd1HAAiAwnAP+dTigcFMy5JWcVCxTAOpFZ2uZ+l5QiIM00EG6xg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":333224},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"86863ba3f482206d03643d4d9f24ad369f96010a","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"},"repository":{"url":"git+https://github.com/Amplemarket/design-system-web.git","type":"git"},"_npmVersion":"10.9.2","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"23.11.0","dependencies":{"@amplemarket/design-system":"git+https://github.com/amplemarket/design-system.git#v0.1.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.0.2_1782411808661_0.12987385667425655","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@amplemarket/design-system-web","version":"0.1.1","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.1.1","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"dist":{"shasum":"42645eae44145620a41f306373501f9daa8a3fdc","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.1.1.tgz","fileCount":36,"integrity":"sha512-PJCVfiOszp4ivuViSTQQeICDIv+X8Mb7MASAHUOIibW80ZGR7ZWqDCcLjfccALzqz9rJM+wba3/UDbBiSeuArw==","signatures":[{"sig":"MEUCIQDm0Mvf7ElqNYErfhHhbFogXIxpSYi3dQqZWOgOQ8QYKwIgFz4TPms1StvfiZAsXwXyfobv1g2N6gSayR7ikPbAv8I=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@amplemarket%2fdesign-system-web@0.1.1","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":333205},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"24333cfd3d1a850e63a820013e96d6ee192e20a5","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"repository":{"url":"git+https://github.com/amplemarket/design-system-web.git","type":"git"},"_npmVersion":"11.13.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"24.17.0","dependencies":{"@amplemarket/design-system":"git+https://github.com/amplemarket/design-system.git#v0.1.2"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.1.1_1782423327552_0.5087291123677391","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@amplemarket/design-system-web","version":"0.1.2","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.1.2","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"dist":{"shasum":"85e0e02a49de03c187b4ba355b52ecab1067ba29","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.1.2.tgz","fileCount":36,"integrity":"sha512-XHLU846okWRVUkJ3hsXNo4rst6LyuO6kvUjkQMeCUL78JMP3gyp4knug1wjMcn4VCjlbNp0mh3diV42Yt633sg==","signatures":[{"sig":"MEYCIQCZvI4Gv53mXJ+3+7m0JGPDbO3ZnlJGjOHktAEs9Sv+qwIhAKICd6l8YgK5Jq5HRxAnrVsnUyxhH5f9em4sgSn1GLn1","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":333152},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"537f5a357b66e9d3fbf112732f5b728f6c598373","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"repository":{"url":"git+https://github.com/amplemarket/design-system-web.git","type":"git"},"_npmVersion":"11.16.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@amplemarket/design-system":"^0.1.3"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.1.2_1782837688767_0.598615487079142","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@amplemarket/design-system-web","version":"0.2.0","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.2.0","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"dist":{"shasum":"3ce2acaae7fc57ed340c9ad06bb7ef5b74de4fac","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.2.0.tgz","fileCount":38,"integrity":"sha512-WENVFwTq6gXkJmYkUv64n9KvZIQ1H5IEjgswpL2gYm1tqCsFv25TVL98UF5iY/50M3/JQIF0MxzlcsBQKyltCA==","signatures":[{"sig":"MEUCIQC40z5/rZ+dlll+QRyrevSQPvi8JTZ8OLb6G5ykmRyetwIgaMV758FL+q6uccSV8nKin6Yz2NbudduetkZg3ziB5P0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":359249},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"bd5a57c74ddd948195da1f2cb68f35d3094f2057","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"repository":{"url":"git+https://github.com/amplemarket/design-system-web.git","type":"git"},"_npmVersion":"11.16.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@amplemarket/design-system":"^0.1.3"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.2.0_1784299770737_0.19337157164450902","host":"s3://npm-registry-packages-npm-production"}},"0.3.1":{"name":"@amplemarket/design-system-web","version":"0.3.1","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.3.1","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"dist":{"shasum":"29efd856a56d834f2d6ee979fb9b4fa538d3d956","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.3.1.tgz","fileCount":40,"integrity":"sha512-pyamDvecT6gSUa4RLr/yv2mi91X+2pD4m6Y+1TQUlFxUL1xoPo3g01hmQl02NltkKZDy0w3uibyFIMH4PJa/sw==","signatures":[{"sig":"MEUCIQDpdAQTb/uNpiXCSKO0XCkuMOr6FBxVS36a3TWKY6B7JwIgMbsCN5WRjikcuaQPl+F9ygQdC51SplDdT0F+UBjEWoU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":374605},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"c75dda5e2ea5f844f88893ab30a1c096b9d46f5d","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"repository":{"url":"git+https://github.com/amplemarket/design-system-web.git","type":"git"},"_npmVersion":"11.16.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"24.18.0","dependencies":{"@amplemarket/design-system":"^0.1.3"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.3.1_1785787127393_0.9595606686146074","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@amplemarket/design-system-web","version":"0.4.0","license":"UNLICENSED","_id":"@amplemarket/design-system-web@0.4.0","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"homepage":"https://github.com/amplemarket/design-system-web#readme","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"dist":{"shasum":"f3cb589073de62aedb07ebf8a0eadbbe7559ee00","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.4.0.tgz","fileCount":43,"integrity":"sha512-BwMlJeYDMimandpx6EvSrZrJS0kJGEXZM2ETWq1wsKWrJzHKDT/N4WXlQmpEy7bL3tBdhwiiaaUMjATo9F3oLg==","signatures":[{"sig":"MEUCIAdNNkNzYD0Wln34roNmotau+AgsqhjziQmmDkkTidQpAiEApH+JmisxG4vrB9sBxaTda/m4Y1sMdNGixB1OwZTqLE8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":513223},"type":"module","exports":{"./css":"./dist/tokens.css","./json":"./dist/tokens.json","./scss":"./dist/_tokens.scss","./figma":"./dist/tokens.figma.json","./fonts":"./src/fonts.css","./tokens/*":"./tokens/*","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro","./astro/Header.astro":"./src/astro/Header/Header.astro"},"gitHead":"7179c64bcdea4ca828bb5117bc43a875bbbbdd96","scripts":{"build":"npm run build:tokens","clean":"rimraf dist","prepare":"npm run build","prebuild":"npm run clean","storybook":"storybook dev -p 6006","sync:footer":"node scripts/vendor-footer.mjs","sync:header":"node scripts/vendor-header.mjs","build:tokens":"style-dictionary build --config style-dictionary.config.js","build-storybook":"storybook build"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"repository":{"url":"git+https://github.com/amplemarket/design-system-web.git","type":"git"},"_npmVersion":"11.19.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","directories":{},"_nodeVersion":"24.20.0","dependencies":{"@amplemarket/design-system":"^0.3.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","typescript":"^5.4.0","style-dictionary":"^4.0.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","@storybook-astro/framework":"^1.6.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-web_0.4.0_1789405502471_0.4859619175488963","host":"s3://npm-registry-packages-npm-production"}},"0.5.0":{"name":"@amplemarket/design-system-web","version":"0.5.0","description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","license":"UNLICENSED","repository":{"type":"git","url":"git+https://github.com/amplemarket/design-system-web.git"},"publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"type":"module","exports":{"./css":"./dist/tokens.css","./fonts":"./src/fonts.css","./scss":"./dist/_tokens.scss","./json":"./dist/tokens.json","./figma":"./dist/tokens.figma.json","./tokens/*":"./tokens/*","./astro/Button.astro":"./src/astro/Button/Button.astro","./astro/styles.css":"./src/astro/Button/Button.css","./astro/Header.astro":"./src/astro/Header/Header.astro","./astro/Footer.astro":"./src/astro/Footer/Footer.astro"},"scripts":{"build:tokens":"style-dictionary build --config style-dictionary.config.js","build":"npm run build:tokens","clean":"rimraf dist","prebuild":"npm run clean","prepare":"npm run build","storybook":"storybook dev -p 6006","build-storybook":"storybook build","sync:header":"node scripts/vendor-header.mjs","sync:footer":"node scripts/vendor-footer.mjs"},"dependencies":{"@amplemarket/design-system":"^0.3.0"},"peerDependencies":{"astro":"^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"},"devDependencies":{"@storybook-astro/framework":"^1.6.0","@storybook/addon-a11y":"^10.4.6","@storybook/addon-docs":"^10.4.6","@storybook/builder-vite":"^10.4.6","astro":"^6.4.8","rimraf":"^5.0.5","storybook":"^10.4.6","style-dictionary":"^4.0.0","typescript":"^5.4.0"},"gitHead":"5ef85d79f975a3fb735f45213a38cd1a34fb0e24","_id":"@amplemarket/design-system-web@0.5.0","bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"homepage":"https://github.com/amplemarket/design-system-web#readme","_nodeVersion":"24.20.0","_npmVersion":"11.19.0","dist":{"integrity":"sha512-HP3k8oQUdOgd3WsnmyfuFJI+YY6RSHLDtsBsvN5jCY3ydlxBv0Hnh5AZBn+UaXPuZ4NrdQZoLFrs9C7XmRgbow==","shasum":"57072b3aa262f2249b8f3e41d72a89ba3f045731","tarball":"https://registry.npmjs.org/@amplemarket/design-system-web/-/design-system-web-0.5.0.tgz","fileCount":43,"unpackedSize":518278,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDw+/2EF38o1CHLohrvVeBZLttOJxe6OVF9jVkyZVxfuAIhALqVr4v7uF5nO9sMiqz3NlxjC8jUaM22vz0n1fpYfbyg"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:aa8b8e6f-76de-45b9-a0a7-e2d779955f61"}},"directories":{},"maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-web_0.5.0_1789471345139_0.24855887244721897"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-25T18:23:28.462Z","modified":"2026-09-15T11:22:25.471Z","0.0.2":"2026-06-25T18:23:28.824Z","0.1.1":"2026-06-25T21:35:27.680Z","0.1.2":"2026-06-30T16:41:28.917Z","0.2.0":"2026-07-17T14:49:30.880Z","0.3.1":"2026-08-03T19:58:47.547Z","0.4.0":"2026-09-14T17:05:02.601Z","0.5.0":"2026-09-15T11:22:25.292Z"},"bugs":{"url":"https://github.com/amplemarket/design-system-web/issues"},"license":"UNLICENSED","homepage":"https://github.com/amplemarket/design-system-web#readme","repository":{"type":"git","url":"git+https://github.com/amplemarket/design-system-web.git"},"description":"Website-scoped design system for Amplemarket. Inherits primitives from @amplemarket/design-system and adds a semantic layer plus website-only primitive extensions.","maintainers":[{"name":"amplemarket","email":"miguel.cabrera@amplemarket.com"}],"readme":"# @amplemarket/design-system-web\n\nThe website-scoped design system for Amplemarket. Inherits the **primitives** from [`@amplemarket/design-system`](https://github.com/amplemarket/design-system) and adds website-specific layers on top:\n\n1. **Primitive extensions** — extra stops on existing core scales that only marketing pages need (e.g. `color.neutral.25`, `color.blue.25`).\n2. **Semantics** — usage roles that are unique to the website surface (e.g. `surface.primary`, `text.primary`, `typography.heading-l`, `breakpoint.mobile`). These reference primitives directly; there are intentionally no per-component semantic tokens.\n3. **Astro components** — atoms (`<Button variant=\"primary\" />`, `<Header />`) shipped as `.astro` **source** and compiled by the consuming Astro project. Each component's CSS reads from `var(--…)` tokens, so the token surface stands on its own and components are an optional convenience.\n\nAnything brand-universal (the indigo ramp, the spacing scale, Labil Grotesk) lives in the core and is consumed unchanged. This package never re-declares core primitives — it only adds what the website surface needs and assigns roles. Other surfaces (product UI, email, decks) maintain their own semantic and component layers in their own repos.\n\nThe two halves are independent: the **token system** (Style Dictionary → CSS/SCSS/JS/JSON in `dist/`) builds and publishes on its own; the **Astro component layer** carries no build step and consumes the emitted token CSS vars.\n\n---\n\n## Install\n\nThis package is published publicly to the npmjs registry. The core package is a transitive dependency and is pulled in automatically — consumers never need to install or import it directly.\n\n```sh\n# npm\nnpm install @amplemarket/design-system-web\n\n# pnpm\npnpm add @amplemarket/design-system-web\n\n# yarn\nyarn add @amplemarket/design-system-web\n```\n\nPin to an exact package version:\n\n```sh\nnpm install @amplemarket/design-system-web@0.5.0\n```\n\n`astro` is a `peerDependency` (`^4 || ^5 || ^6 || ^7`) — consumers compile the shipped `.astro` files with their own Astro version.\n\n### How publishing works\n\n`dist/` is not committed. The publish workflow builds it in CI before `npm publish`, and the generated files are included in the public npmjs tarball. The build resolves against the core's source tokens (a transitive dependency) and emits a single self-contained bundle: core primitives + website extensions + semantics, all in one file per platform. The `.astro` components need no build — they ship as source.\n\nThe `prepare` lifecycle script remains for local `npm pack` / `npm publish` and git-URL fallback installs, but registry consumers should receive the already-built `dist/` output from the package.\n\n---\n\n## Usage\n\nThe token bundle is **self-contained**: every primitive a website token references is also declared in the bundle's output. Consumers import this package only — the core is an implementation detail.\n\n### CSS custom properties\n\n```css\n@import \"@amplemarket/design-system-web/css\";\n\n.hero {\n  background: var(--surface-primary);\n  padding: var(--spacing-64) var(--spacing-24);\n  color: var(--color-indigo-900);\n}\n\n.faq-row:hover {\n  background: var(--color-blue-25);\n}\n```\n\nCore primitives (`--color-indigo-900`, `--spacing-64`, `--shadow-300`, …) are declared right alongside the website's own tokens (`--color-neutral-25`, `--surface-primary`, …) — one import, everything resolves.\n\n### SCSS variables\n\n```scss\n@use \"@amplemarket/design-system-web/scss\" as ds;\n\n.hero { background: ds.$surface-primary; }\n.cta  { color: ds.$color-indigo-900; }\n```\n\n### JavaScript / TypeScript\n\nThe build also emits a nested JS/TS object (`dist/index.mjs`, `index.cjs`, `index.d.ts`) so tokens can be read programmatically — every core primitive plus every website extension and semantic, in one tree.\n\n```ts\nimport ds from \"@amplemarket/design-system-web\";\n\nconst pageBg = ds.surface.primary;      // resolved value\nconst indigo = ds.color.indigo[\"900\"];  // \"#10054d\"\nconst gap    = ds.spacing[\"24\"];        // \"24px\"\n```\n\n### Raw JSON (tool-to-tool, AI prompts, scripts)\n\n```ts\nimport webTokens from \"@amplemarket/design-system-web/json\";\n```\n\nOr read any source file directly, e.g. `@amplemarket/design-system-web/tokens/semantic/color.json`.\n\n### Figma variables\n\n`./figma` exports `dist/tokens.figma.json`, a DTCG file shaped for Figma's native **Variables → Import**: the primitives plus the semantic colour roles (as aliases, grouped under `Color/`), with structured colours, percent-scaled ratios, and `com.figma` scopes. Import the file from `node_modules/@amplemarket/design-system-web/dist/tokens.figma.json`, or read it in code:\n\n```ts\nimport figmaTokens from \"@amplemarket/design-system-web/figma\";\n```\n\nNative import is a one-time snapshot of variables only. It cannot create Text Styles, so typography is not included, and translucent colour stops arrive flat rather than composed from their base colour. Keeping a library continuously in sync — variables with a mode per theme and viewport, plus Text Styles bound to them — is the job of the dev-only tooling in [`scripts/figma/`](./scripts/figma/README.md), which is not part of the published package.\n\n### Astro components\n\nComponents are exported per-file under `./astro/*` and imported by path (there is no barrel — `.astro` files can't be named-exported from an `index.ts`):\n\n```astro\n---\nimport Button from \"@amplemarket/design-system-web/astro/Button.astro\";\nimport \"@amplemarket/design-system-web/css\";             // token CSS vars, once at the app root\nimport \"@amplemarket/design-system-web/astro/styles.css\"; // component CSS, once\n---\n<Button variant=\"primary\" size=\"large\">Click me</Button>\n```\n\n`.astro` files are compiled by the *consuming* Astro project — this package ships them as source and runs no component build. Components own only structural markup and CSS modifier classes (`variant`, `size`); every visual property comes from a `var(--…)` token, so opting out and rebuilding the markup against the raw tokens is a no-cost path.\n\n---\n\n## What's inside\n\n```\ntokens/\n├── primitives/                   Website-only extensions to core scales.\n│   ├── color.json                color.neutral.25, color.neutral.75, color.neutral.950, color.blue.25\n│   ├── font-weight.json          fontWeight.regular (400), fontWeight.medium (500) — wght axis values\n│   └── line-height.json          lineHeight.130, lineHeight.135 (intermediate stops the core lacks)\n└── semantic/                     Role assignments unique to the website surface.\n    ├── breakpoint.json           the viewport axis — one entry per viewport, one marked as the base\n    ├── theme.json                the theme axis — one entry per theme, one marked as the base\n    ├── color.json                surface.*, border.*, text.*, action.* usage roles (all theme-aware;\n    │                             action fills carry on-* companions for their foreground)\n    ├── radius.json               radius.xs/s/m/l/xl + radius.pill → the core radius stops\n    └── typography.json           display/heading/title/body/eyebrow/label, each in l/m/s (fontFamily/fontSize/fontWeight/lineHeight,\n                              + letterSpacing on display/heading/title/eyebrow — neutral or negative only, see Tracking below;\n                              + textCase on eyebrow; + optional responsive.mobile)\n\nsrc/\n└── astro/                        Astro component layer — shipped as source, no build step.\n    ├── Button/\n    │   ├── Button.astro          Markup + variant/size modifier classes, no inline values.\n    │   ├── Button.css            All values via var(--…) — no hex, no px.\n    │   └── Button.stories.ts     Storybook stories (.astro renderer).\n    ├── Footer/\n    │   ├── Footer.astro          Vendored Amplemarket footer.\n    │   ├── footer.client.ts      Client behavior for the footer.\n    │   ├── footer.overrides.css  Local overrides layered on the vendored CSS.\n    │   ├── Footer.stories.ts\n    │   └── webflow/              Vendored Webflow markup + CSS layers (see sync:footer).\n    ├── Header/\n    │   ├── Header.astro          Vendored Amplemarket nav.\n    │   ├── header.client.ts      Client behavior (transpiled by Vite; never inline TS in <script>).\n    │   ├── header.brand-menu.css Brand context menu on the logo.\n    │   ├── Header.stories.ts\n    │   └── webflow/              Vendored Webflow markup + CSS layers (see sync:header).\n    └── shared/\n        ├── demo-modal.client.ts  \"Watch Demo\" modal shared by Header and Footer.\n        └── demo-modal.css\n```\n\nSemantic files are organized **by primitive category, not usage namespace**: `color.json` holds every colour role — `surface.*`, `border.*`, `text.*`, and `action.*` — at the top level, and a new colour namespace (e.g. `status.*`) goes in `color.json` too, not in a new `status.json`. Token paths stay role-first (`surface > primary`), so emitted CSS vars are `--surface-primary`, not `--color-surface-primary`.\n\nToken files use the [W3C DTCG format](https://design-tokens.github.io/community-group/format/) (`$value`, `$type`, `$description`) — same as the core.\n\n### What goes in `primitives/` vs `semantic/`\n\n- **`primitives/`** — extra stops on a core scale that the website needs but other surfaces don't. The keys still encode values (`color.neutral.25`, `color.blue.25`); they are just additions to scales the core already owns. If a value would also be useful in product/email/decks, it belongs in the **core** instead — not here.\n- **`semantic/`** — usage roles that are website-specific, referencing primitives directly (`surface.primary` → `{color.neutral.25}`, `typography.heading-l` → composite of `fontFamily`/`fontSize`/…). Values are always references (`{color.neutral.25}`), never raw hex / px. Roles describe *intent* (what this color *is* in the design) and can be repointed without touching consumers.\n\nThere are intentionally **no per-component semantic tokens** (no `button.json`). A component reads primitives and abstract semantic roles straight from its CSS and owns its own variation logic via modifier classes. Only introduce a new semantic role when the abstraction is shared across multiple components — not for one-off component values.\n\nAnything cross-surface — \"this is our brand primary\", \"this is the workhorse weight\" — does **not** belong here. Each surface (product, email, decks, …) makes its own semantic calls; only primitives are shared.\n\n### Tracking (letter-spacing)\n\n**Brand rule: the website only ever uses neutral (`0`) or negative letter-spacing — we never track wide.** This is a property of the brand face (`fontFamily.brand`, Labil Grotesk), which is drawn loose enough that display sizes tighten up and text sizes sit at their natural spacing; positive tracking is never on-brand. The rule is a semantic-layer decision that lives in this repo: the core's `letterSpacing` scale (`-8`…`0`, in `em`) is a font-agnostic set of ratios and deliberately says nothing about which face uses which stop.\n\nHow the rule is applied in [tokens/semantic/typography.json](./tokens/semantic/typography.json):\n\n- **Display, heading, and title roles tighten with size.** Tracking is a function of the font size, not the role: the larger the size, the more negative the stop, and a mobile override picks up whatever stop belongs to its *reduced* size — so every role loosens (or holds) as it shrinks at the breakpoint:\n\n  | Role | Desktop | Mobile (`≤ breakpoint.mobile`) |\n  | --- | --- | --- |\n  | `display-l` | 64px · `letterSpacing.-5` | 40px · `letterSpacing.-4` |\n  | `display-m` | 56px · `letterSpacing.-5` | 36px · `letterSpacing.-4` |\n  | `display-s` | 44px · `letterSpacing.-5` | 32px · `letterSpacing.-4` |\n  | `heading-l` | 36px · `letterSpacing.-4` | 28px · `letterSpacing.-3` |\n  | `heading-m` | 32px · `letterSpacing.-4` | 24px · `letterSpacing.-3` |\n  | `heading-s` | 28px · `letterSpacing.-3` | 20px · `letterSpacing.-2` |\n  | `title-l` | 24px · `letterSpacing.-3` | 20px · `letterSpacing.-2` |\n  | `title-m` | 20px · `letterSpacing.-2` | 18px · `letterSpacing.-2` |\n  | `title-s` | 18px · `letterSpacing.-2` | 16px · `letterSpacing.0` |\n\n- **Eyebrow roles sit at `{letterSpacing.0}`, not wide.** All-caps text is the one place the wider industry reaches for positive tracking; the brand rule still holds, so the eyebrow roles pin themselves to the neutral stop explicitly rather than omitting it. The explicit `0` is the point — it records that neutral was chosen for an all-caps role, so nobody \"fixes\" it by adding a positive stop later.\n- **Body and label roles carry no `letterSpacing` at all.** They render at the face's natural spacing (`normal`, i.e. neutral). Don't add `{letterSpacing.0}` to them \"for completeness\" — the absence is the intent, and it keeps the emitted var set small.\n- **Emitted names drop the sign.** `{letterSpacing.-5}` compiles to `var(--letter-spacing-5)` (SCSS `$letter-spacing-5`, JS `letterSpacing[\"-5\"]`); `{letterSpacing.0}` is `--letter-spacing-0`. There is no positive stop, so the name is unambiguous — but read `--letter-spacing-5` as *minus* five percent, not five.\n\nWhen a role needs retuning, repoint it to another **negative or zero** stop from the core scale. If a positive value ever seems necessary, that is a signal the wrong role (or the wrong face) is being used — don't add a positive stop here or in the core.\n\n### All-caps roles (`textCase`)\n\nThe eyebrow roles are all-caps, and the casing is part of the role rather than something each call site remembers. It is carried as a `textCase` sub-property on the composite, holding the **CSS `text-transform` keyword**:\n\n```json\n\"eyebrow-m\": {\n  \"$type\": \"typography\",\n  \"$value\": { \"fontFamily\": \"{fontFamily.brand}\", \"fontSize\": \"{fontSize.14}\", \"fontWeight\": \"{fontWeight.regular}\", \"lineHeight\": \"{lineHeight.130}\", \"letterSpacing\": \"{letterSpacing.0}\", \"textCase\": \"uppercase\" }\n}\n```\n\n```css\n.eyebrow {\n  font-size: var(--typography-eyebrow-m-font-size);\n  font-weight: var(--typography-eyebrow-m-font-weight);\n  line-height: var(--typography-eyebrow-m-line-height);\n  letter-spacing: var(--typography-eyebrow-m-letter-spacing);\n  text-transform: var(--typography-eyebrow-m-text-case);\n}\n```\n\nTwo things to know about it:\n\n- **`textCase` is not part of the DTCG `typography` composite** — the spec lists only `fontFamily`, `fontSize`, `fontWeight`, `letterSpacing`, and `lineHeight`. It is our extension; Style Dictionary's `expand` fans it out like any other sub-property, so it emits `--typography-eyebrow-m-text-case` and appears in the JS/JSON exports. It is a literal keyword, not a reference, because it is a CSS keyword rather than a stop on a scale.\n- **It's presentational, not textual.** `text-transform` uppercases the rendering and leaves the DOM text as authored, which is what screen readers and copy/paste should get. Write the content in sentence case and let the role do the casing — don't ship `SHOUTING` markup.\n\n### Theming\n\nThemes are declared per-token via an optional `$extensions.themes.<name>` map; tokens that don't change across themes omit it. The custom `css/themed-variables` formatter emits one `:root` block of defaults plus one `[data-theme=\"<name>\"]` block per theme, and repeats the base values under `[data-theme=\"light\"]`. An app opts in by setting `data-theme=\"dark\"` on `<html>`. There is intentionally no `prefers-color-scheme` query — OS-preference mapping is an application-shell concern.\n\n**Themes apply to any element, not just the document root.** The theme selector is a bare attribute selector and custom properties inherit, so putting `data-theme` on a container re-themes that subtree — the CSS equivalent of applying a mode to a Figma frame:\n\n```html\n<section data-theme=\"dark\">   <!-- dark background, light text, inverted buttons -->\n  <h2>…</h2>\n  <button class=\"ds-button\">…</button>\n  <aside data-theme=\"light\">…</aside>   <!-- resets to the defaults -->\n</section>\n```\n\nThis is **the** way to build an inverted section — there are intentionally no `*-inverted` roles in the semantic layer, because an inverted element resolves to exactly what its base role resolves to under the other theme (an \"inverted action fill\" in light *is* `action.primary` in dark).\n\nA named theme is **absolute**: `data-theme=\"dark\"` stays dark when the page itself goes dark. For a container that should always be the *opposite* of the page, use the relative helper:\n\n```html\n<section data-theme=\"inverted\">…</section>\n```\n\n`inverted` resolves against `:root` — dark while the page is light, light while the page is dark — so a section keeps contrasting with its surroundings in both themes. Notes on it:\n\n- It is measured against the **document root**, not the nearest themed ancestor, so it stays predictable at any nesting depth. (An `inverted` container inside a `dark` section on a light page is therefore dark, not light.)\n- It only applies to containers, not `<html>` itself — inverting the root against itself is circular.\n- It is emitted only while there's exactly one theme beside the base. Add a second theme and \"the opposite\" stops being well-defined, so the attribute silently stops being emitted.\n\nFinally: only tokenized values flip. A component that reads a raw primitive (`var(--color-indigo-900)`) is invisible to theming — one more reason components should read semantic roles.\n\n### Responsive (viewport overrides)\n\nViewport-specific values use the same per-token mechanism as theming, on a sibling key: an optional `$extensions.responsive.<viewport>` map holding only the sub-properties that change. The `css/themed-variables` formatter emits one `@media` block per discovered viewport, after the `:root` defaults, so the override wins on source order:\n\n```json\n\"heading-s\": {\n  \"$type\": \"typography\",\n  \"$value\": { \"fontFamily\": \"{fontFamily.brand}\", \"fontSize\": \"{fontSize.28}\", \"fontWeight\": \"{fontWeight.regular}\", \"lineHeight\": \"{lineHeight.125}\" },\n  \"$extensions\": { \"responsive\": { \"mobile\": { \"fontSize\": \"{fontSize.20}\", \"lineHeight\": \"{lineHeight.130}\" } } }\n}\n```\n\n```css\n:root { --typography-heading-s-font-size: var(--font-size-28); /* … */ }\n@media (max-width: 768px) {\n  :root { --typography-heading-s-font-size: var(--font-size-20); --typography-heading-s-line-height: var(--line-height-130); }\n}\n```\n\n**The viewport axis is declared, not inferred.** `tokens/semantic/breakpoint.json` lists every viewport, each with the width it represents, and marks one with `$extensions.base` — the value that lands in `:root` and emits no media query. The base's width is the **pivot**: a viewport narrower than it overrides *below* (`max-width`), a wider one overrides *above* (`min-width`). With `desktop` as the base every override is `max-width`, i.e. desktop-first; move the base to an intermediate viewport (a `laptop` between `mobile` and `desktop`) and the two directions coexist, with no formatter change. The formatter inlines the declared literal into the media condition, because CSS vars can't appear in an `@media` condition. Consumers read one var (`--typography-heading-s-font-size`) at every viewport — the value changes under the breakpoint, so no component code changes. Only the properties listed in the override shift; `fontFamily` / `fontWeight` keep cascading from `:root`. To move the boundary, repoint `breakpoint.mobile`; to add a viewport, add a `breakpoint.<name>` token and use `responsive.<name>`.\n\nNote this is a **CSS-only** concern: the JS/TS/JSON exports emit only the base (desktop) value — they have no concept of a media query.\n\n### How the merge works in the build\n\n`style-dictionary.config.js` reads the core's raw DTCG tokens via `include` and this package's tokens via `source`. Both are emitted into this package's `dist/`, producing a single self-contained bundle per platform. Consumers see the merged tree in the JS object, and a single CSS file declares the full set of custom properties.\n\nWe deliberately consume the core's **source tokens** rather than its compiled `dist/`. That keeps reference paths (`{color.indigo.900}`) identical to how the core itself uses them, so semantic refs always resolve cleanly. `outputReferences: true` keeps semantic vars compiled to `var(--color-neutral-50)` rather than the literal hex, so when a core primitive's value changes (after a core bump), the semantic role picks it up without an edit here.\n\n---\n\n## Build\n\n```sh\nnpm install            # installs deps; `prepare` hook auto-builds dist/ (tokens)\nnpm run build          # alias for build:tokens — components need no build\nnpm run build:tokens   # Style Dictionary only — re-run after tokens/**/*.json edits\nnpm run clean          # rimraf dist\n```\n\n`build` runs a single [Style Dictionary](https://styledictionary.com/) v4 pass over `tokens/**/*.json` (with the core's tokens resolvable via `include`). The Astro components have no build step — they are published as source and compiled by consumers.\n\nOutputs under `dist/`:\n\n| Output       | Path                     | Use                                  |\n|--------------|--------------------------|--------------------------------------|\n| Token CSS    | `dist/tokens.css`        | Browsers, any CSS pipeline           |\n| Token SCSS   | `dist/_tokens.scss`      | Sass-based projects                  |\n| Token ESM    | `dist/index.mjs`         | Modern JS/TS (nested default export) |\n| Token CJS    | `dist/index.cjs`         | Node / legacy bundlers               |\n| Token types  | `dist/index.d.ts`        | TypeScript                           |\n| Token JSON   | `dist/tokens.json`       | Arbitrary consumers, AI tools        |\n| Figma tokens | `dist/tokens.figma.json` | Figma's native Variables Import      |\n\n`dist/` is generated — **it is not committed** (it holds only token output). The `prepare` script regenerates it on every `npm install` of this package (including git-URL installs by the website repo) and before `npm publish` / `npm pack`.\n\nSee [style-dictionary.config.js](./style-dictionary.config.js) to add a new token output target.\n\n## Storybook\n\n```sh\nnpm run storybook        # dev server at http://localhost:6006 (needs a built dist/)\nnpm run build-storybook  # static site → storybook-static/\n```\n\nStorybook is the visual verification path, via the community [`@storybook-astro/framework`](https://storybook-astro.org/), which renders `.astro` components server-side. Stories live next to their component as `src/astro/<Name>/<Name>.stories.ts`. The framework renders each component to an HTML *fragment* and does **not** run Astro's page pipeline that hoists frontmatter CSS imports, so [.storybook/preview.ts](./.storybook/preview.ts) imports all CSS globally: `dist/tokens.css` (run `npm run build` first), an `import.meta.glob` over every co-located `src/astro/**/*.css`, and the core font side-effect import. `storybook-static/` is gitignored.\n\n## Adding or changing a token\n\n1. Decide the layer: a new stop on a core scale → `tokens/primitives/`; a new website role → `tokens/semantic/`. If the value is meaningful to other surfaces, raise it into the **core** repo instead.\n2. Edit (or create) the relevant file under `tokens/`. Add new color roles to `color.json` under a new top-level namespace — don't create a per-namespace file. Use DTCG format. Semantic values must be **references** (`{color.neutral.25}`), not literals.\n3. If you bump the core dependency to pick up a primitive you need, update the `@amplemarket/design-system` version in `package.json` and call out the bump in the changelog entry.\n4. Run `npm run build` locally to verify `dist/` regenerates cleanly. Do **not** commit the generated `dist/` output — it is gitignored and rebuilt on install.\n5. Add a `## [X.Y.Z] — <date>` section at the top of [CHANGELOG.md](./CHANGELOG.md) describing the change, marking it **[breaking]** where the [versioning policy](#versioning) says so, and bump `package.json` to the same version. Leave tags alone — the [automated publishing workflow](#automated-publishing) creates them.\n6. Open a PR into `master` (see [Branching & releases](#branching--releases)). Merging it publishes that version to npm and tags it.\n\n## Adding a component\n\n1. **Component folder.** Create `src/astro/<Name>/<Name>.astro` plus a sibling `<Name>.css`. The CSS uses *only* `var(--…)` references — no hex, no px, no fallbacks. The `.astro` file owns structural markup and modifier classes (`variant`, `size`); size/density variants are CSS modifier classes that rebind a private `--_*` local at the base class. Do **not** scaffold a `tokens/semantic/<name>.json` — components own their variation logic.\n2. **Export.** Add an `./astro/<Name>.astro` entry to `exports` in [package.json](./package.json) (and fold the component CSS into the shared `./astro/styles.css` entry). There is no barrel re-export.\n3. **Story.** Add `src/astro/<Name>/<Name>.stories.ts` (typed `satisfies Meta<AstroRenderer>`). Slot content maps to the reserved `slots` arg; all other args map to props.\n4. **Conventions.** Keep CSS in a sibling `.css` file (a bare `<style>` block is scoped and would mangle `.ds-*`). Any client behavior goes in a sibling `.ts` module imported by a plain-JS `<script>` — never inline TypeScript in `<script>`.\n5. **Verify.** `npm run storybook` for visual verification.\n\nSee [CLAUDE.md](./CLAUDE.md) for the full set of `.astro` authoring conventions.\n\n## Branching & releases\n\n**`master` is the only long-lived branch, and every merge into it is a release.** There is no integration branch and no separate release step: a PR carries its own version bump and changelog section, and merging it publishes that version to npm and tags it.\n\n| Branch                       | What it is                                                                                     |\n|------------------------------|------------------------------------------------------------------------------------------------|\n| `master`                     | The released line. Every merge is one published version and one `vX.Y.Z` tag. Consumers pin to these tags. |\n| `feat/*`, `fix/*`, `chore/*` | Your working branches, one logical change each. Short-lived — branch, PR, merge, delete.        |\n\n**Never commit directly to `master`.** Everything goes through a feature branch and a PR.\n\n**Shipping a change:**\n\n1. Branch off **`master`** — e.g. `git switch master && git pull && git switch -c feat/my-change`.\n2. Make the change.\n3. Pick the version. Read the [versioning policy](#versioning) and decide **major / minor / patch** from the change you just made (pre-1.0: a breaking change bumps the *minor* — see the 0.x caveat).\n4. Add a `## [X.Y.Z] — <date>` section at the top of [CHANGELOG.md](./CHANGELOG.md), above the previous version, describing the change under the appropriate heading and flagging anything **[breaking]**.\n5. Bump `package.json` to the same `X.Y.Z`. [`check-version-bump`](.github/workflows/check-version-bump.yml) fails the PR if you don't, and [`check-changelog`](.github/workflows/check-changelog.yml) fails it if the new version section is missing or empty.\n6. Open a PR into **`master`**. Merging it publishes `X.Y.Z` to npm and pushes the `vX.Y.Z` tag automatically — see [Automated publishing](#automated-publishing).\n\nThat's the whole flow. There is no `## [Unreleased]` section: work that isn't ready to publish stays on its branch, because merging *is* publishing.\n\n**If two PRs are open at once**, they will both claim the same next version number. Whichever merges second has to re-bump — `git switch master && git pull && git merge master` on the branch, edit the version and the changelog heading, push. Re-run the checks before merging rather than trusting a green tick from before the other PR landed: `check-version-bump` compares against the base branch as of its last run, so a stale pass can let a duplicate version through, and then the publish job fails on `master` with nothing published. It's recoverable (open a PR that bumps to the next free version) but avoidable — merge one PR at a time when you have several ready.\n\n`dist/` is never committed — it is gitignored and rebuilt by CI before publish, and by the `prepare` hook on install. A release ships source + the changelog + the version bump, nothing generated.\n\n## Versioning\n\nThis package follows [Semantic Versioning](https://semver.org/). \"Breaking\" is defined from the point of view of a consumer who has built against a specific version of `dist/` (tokens) or a pinned version of the `.astro` source:\n\n| Change                                                                  | Bump  |\n|-------------------------------------------------------------------------|-------|\n| Renaming or removing any existing token key (primitive extension or semantic role) | major |\n| Repointing a semantic role to a different primitive such that the resolved value shifts visibly | major |\n| Changing the value of a website-owned primitive extension               | major |\n| Removing or renaming a component, prop, or variant                      | major |\n| Changing a component's default rendered DOM in a way that's visible to users | major |\n| Bumping the `astro` `peerDependency` range so a previously-supported version is dropped | major |\n| Removing a build output (CSS/SCSS/ESM/CJS/JSON/d.ts) or an `exports` path (token or `./astro/*`) | major |\n| Bumping the core `@amplemarket/design-system` version to one that is itself breaking — the core's break leaks through | major |\n| Adding a new primitive extension, semantic role, output target, component, prop, or variant | minor |\n| Bumping the core to a non-breaking minor / patch                        | minor |\n| Cosmetic re-ordering of keys, comment edits, `$description` additions   | patch |\n| Internal-only refactors of component markup that don't change the rendered output | patch |\n| Fixing an obvious typo in a value (with negligible visual impact)       | patch |\n\nIf in doubt, assume major. Consumers snapshot the resolved tokens — we would rather over-signal a breaking change than silently ship one.\n\nPre-1.0 caveat: while the package is on `0.x`, treat a minor bump as potentially breaking (per SemVer's 0.x convention) and pin exactly in the website repo until 1.0.\n\n### Automated publishing\n\nMerges to `master` publish a public package to the npmjs registry through `.github/workflows/publish-package.yml`.\n\n- If the merged PR does not change `package.json`'s version, CI fails the release. Since every merge to `master` is a release, this should never trigger — [`check-version-bump`](.github/workflows/check-version-bump.yml) catches it at PR time.\n- If the merged PR already changed the version, CI verifies a `vX.Y.Z` git tag doesn't already exist, then publishes that version to npm (under the `latest` dist-tag).\n- **After a successful publish, the workflow creates and pushes the `vX.Y.Z` tag itself.** Tagging is not a manual step. It runs only after `npm publish` succeeds, so a tag never points at a version that failed to publish — if the publish fails, fix forward and merge again rather than tagging by hand.\n- The workflow publishes with npm trusted publishing / OIDC, not a long-lived npm token. Configure the package's trusted publisher on npmjs.com for GitHub Actions, repository `amplemarket/design-system-web`, workflow filename `publish-package.yml`, and allow `npm publish`.\n- Do not set `\"private\": true` in `package.json` — that flag means \"never publish\" to npm. Public package access is controlled by `publishConfig.access`.\n\n## Changelog\n\nAll notable changes are recorded in [CHANGELOG.md](./CHANGELOG.md), following the [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) convention with one deviation: **there is no `## [Unreleased]` section.** Because every merge to `master` publishes, a change is either released or still on a branch — nothing is ever merged-but-unreleased. Each PR adds its own `## [X.Y.Z] — <date>` section at the top of the file, and the version bump and the changelog section land in the same commit as the change they describe.\n\n## Rules for contributors\n\n- **Don't re-declare core primitives.** If `color.indigo.900` already exists in the core, don't redefine it here. Only add what the core doesn't ship.\n- **Semantic values are references.** A semantic token's `$value` is `{color.neutral.25}`, never `#fdfcfb`. If you can't write the reference, the underlying primitive is missing — add it (here or in the core) first.\n- **Roles describe intent.** `surface.primary` says \"this is the default website surface\", not \"this is `#fdfcfb`\". The whole point of the semantic layer is that we can repoint it without touching consumers.\n- **No per-component tokens.** Components own their variation logic in CSS modifier classes. Add a semantic role only when an abstraction is shared across multiple components (a new typography role, a new surface color) — never a `button.*` / `card.*` slot.\n- **No surface-crossing semantics.** This package is for the website only. Roles like `surface.primary` or `text.primary` belong here *as long as* the values they encode are website-specific opinions — every other surface (product UI, email, decks) defines its own. If you find yourself wanting the same role to apply identically across surfaces, the value belongs in the core primitives.\n- **Tracking is neutral or negative, never wide.** A typography role's `letterSpacing` is `{letterSpacing.0}` or a negative core stop, or omitted (natural spacing). Never reference a positive value and never add one to the scale — see [Tracking](#tracking-letter-spacing).\n- **Keys still encode values where possible.** Primitive extensions follow the core's convention: `color.neutral.25` is a stop on the neutral ramp; `color.blue.25` is a stop on the blue ramp. Use ordinal integers only when the value isn't a single scalar.\n- **Brand-universal facts go in the core.** If you find yourself writing a `$description` that any surface would benefit from, the token probably belongs in the core repo, not here.\n","readmeFilename":"README.md"}