{"_id":"@davidhund/share-mastodon-component","_rev":"5-a446a282d9d044ee411cd4f8e3e011dd","name":"@davidhund/share-mastodon-component","dist-tags":{"latest":"3.0.3"},"versions":{"2.0.0":{"name":"@davidhund/share-mastodon-component","version":"2.0.0","keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"author":{"name":"davidhund"},"license":"EUPL-1.2","_id":"@davidhund/share-mastodon-component@2.0.0","maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"homepage":"https://github.com/davidhund/share-mastodon-component#readme","bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"dist":{"shasum":"e3806837637548a10a34ad0e637eab16832b0a93","tarball":"https://registry.npmjs.org/@davidhund/share-mastodon-component/-/share-mastodon-component-2.0.0.tgz","fileCount":28,"integrity":"sha512-0zlk6fV5RfBtPdnDScM3SC1OHlN9AGv3rlI1nsM3CwxlBugtnjtDBgZvPuVaKdCoh2CqO6JlTVWOeQ4sAZgt7w==","signatures":[{"sig":"MEUCIQCON8R/zU9hEun0XweKjySkBnh4mRb7G0mhUNI82T/yhAIgT1EZ+snIiPJ1eiCiYY/3U9bf8YlUCh1gn7AFLbqsH6o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155091},"main":"./dist/share-mastodon.min.js","type":"module","module":"./dist/share-mastodon.min.js","exports":{".":{"import":"./dist/share-mastodon.min.js"},"./locales/de":{"import":"./dist/locales/de.js"},"./locales/en":{"import":"./dist/locales/en.js"},"./locales/es":{"import":"./dist/locales/es.js"},"./locales/fr":{"import":"./dist/locales/fr.js"},"./locales/nl":{"import":"./dist/locales/nl.js"}},"gitHead":"7ffa4abefdfadde40a5c03a72d36ca21a4694128","scripts":{"test":"wtr","build":"npm run format && npm run build:script && npm run build:locales","format":"biome format --write ./src/**/*.js","prepare":"npm run build:script && npm run build:locales","test:watch":"wtr --watch","build:script":"esbuild src/share-mastodon.js --format=esm --target=es2020 --platform=browser --bundle --minify --sourcemap --outfile=dist/share-mastodon.min.js","build:locales":"esbuild src/locales/en.js src/locales/nl.js src/locales/fr.js src/locales/de.js src/locales/es.js --format=esm --target=es2020 --platform=browser --minify --sourcemap --outdir=dist/locales","prepublishOnly":"npm run build"},"_npmUser":{"name":"davidhund","email":"david@valuedstandards.com"},"repository":{"url":"git+https://github.com/davidhund/share-mastodon-component.git","type":"git"},"_npmVersion":"11.14.1","description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","directories":{},"_nodeVersion":"24.15.0","_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28","@biomejs/biome":"2.5","@web/dev-server":"^0.4.6","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2"},"_npmOperationalInternal":{"tmp":"tmp/share-mastodon-component_2.0.0_1781522554917_0.08623043619345405","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@davidhund/share-mastodon-component","version":"2.0.1","keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"author":{"name":"davidhund"},"license":"EUPL-1.2","_id":"@davidhund/share-mastodon-component@2.0.1","maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"homepage":"https://github.com/davidhund/share-mastodon-component#readme","bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"dist":{"shasum":"f33d93be82f81aba40e87c947e7de98d2845ed75","tarball":"https://registry.npmjs.org/@davidhund/share-mastodon-component/-/share-mastodon-component-2.0.1.tgz","fileCount":28,"integrity":"sha512-LyMatRb0DW6U8Hi5u5Op5s++UdD0l/QGkNZO+5SUJ424iTKd1LxgNq++0SWvT/zfA5UjMGavw5Ib1oBUgZLMYQ==","signatures":[{"sig":"MEYCIQDB+st+XFrd/Vgf7tGdwUF/9ut+wQBEcAeCwQbgCrn8kAIhAKYJP3px6T70SwLoHxOQjvqCXI9xRhvL1SDOwBdy4Go9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155431},"main":"./dist/share-mastodon.min.js","type":"module","module":"./dist/share-mastodon.min.js","exports":{".":{"import":"./dist/share-mastodon.min.js"},"./locales/de":{"import":"./dist/locales/de.js"},"./locales/en":{"import":"./dist/locales/en.js"},"./locales/es":{"import":"./dist/locales/es.js"},"./locales/fr":{"import":"./dist/locales/fr.js"},"./locales/nl":{"import":"./dist/locales/nl.js"}},"gitHead":"9af2f48e42ee3f650387a9bf2d5ea35a0a0c21e5","scripts":{"test":"wtr","build":"npm run format && npm run build:script && npm run build:locales","format":"biome format --write ./src/**/*.js","prepare":"npm run build:script && npm run build:locales","test:watch":"wtr --watch","build:script":"esbuild src/share-mastodon.js --format=esm --target=es2020 --platform=browser --bundle --minify --sourcemap --outfile=dist/share-mastodon.min.js","build:locales":"esbuild src/locales/en.js src/locales/nl.js src/locales/fr.js src/locales/de.js src/locales/es.js --format=esm --target=es2020 --platform=browser --minify --sourcemap --outdir=dist/locales","prepublishOnly":"npm run build"},"_npmUser":{"name":"davidhund","email":"david@valuedstandards.com"},"repository":{"url":"git+https://github.com/davidhund/share-mastodon-component.git","type":"git"},"_npmVersion":"11.14.1","description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","directories":{},"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28","@biomejs/biome":"2.5","@web/dev-server":"^0.4.6","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2"},"_npmOperationalInternal":{"tmp":"tmp/share-mastodon-component_2.0.1_1781522602747_0.34585923737966695","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@davidhund/share-mastodon-component","version":"2.0.2","keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"author":{"name":"davidhund"},"license":"EUPL-1.2","_id":"@davidhund/share-mastodon-component@2.0.2","maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"homepage":"https://github.com/davidhund/share-mastodon-component#readme","bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"dist":{"shasum":"1fd20bb2ac41b044c59e0717a5927ed81a086a55","tarball":"https://registry.npmjs.org/@davidhund/share-mastodon-component/-/share-mastodon-component-2.0.2.tgz","fileCount":28,"integrity":"sha512-OcO16kLRrijLALWMxpdym69OmUw2IxO9B4ChjOc7aeVhemu3WWkDK3p4e4r6ONY/FUIO/deAKzeKUjdkha303w==","signatures":[{"sig":"MEYCIQDGmQklvFzTQkRbV4+uLeT06BKs/9txwnwYBPBKh/qbIwIhAP4vEFjPSZNn/Z2GckZsbtYhraszdEg2M/kD40YB8N4S","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":155568},"main":"./dist/share-mastodon.min.js","type":"module","module":"./dist/share-mastodon.min.js","exports":{".":{"import":"./dist/share-mastodon.min.js"},"./locales/de":{"import":"./dist/locales/de.js"},"./locales/en":{"import":"./dist/locales/en.js"},"./locales/es":{"import":"./dist/locales/es.js"},"./locales/fr":{"import":"./dist/locales/fr.js"},"./locales/nl":{"import":"./dist/locales/nl.js"}},"gitHead":"e04bf8c58e651b2b0f98421ad3c0b815de170973","scripts":{"test":"wtr","build":"npm run format && npm run build:script && npm run build:locales","format":"biome format --write ./src/**/*.js","prepare":"npm run build:script && npm run build:locales","test:watch":"wtr --watch","build:script":"esbuild src/share-mastodon.js --format=esm --target=es2020 --platform=browser --bundle --minify --sourcemap --outfile=dist/share-mastodon.min.js","build:locales":"esbuild src/locales/en.js src/locales/nl.js src/locales/fr.js src/locales/de.js src/locales/es.js --format=esm --target=es2020 --platform=browser --minify --sourcemap --outdir=dist/locales","prepublishOnly":"npm run build"},"_npmUser":{"name":"davidhund","email":"david@valuedstandards.com"},"repository":{"url":"git+https://github.com/davidhund/share-mastodon-component.git","type":"git"},"_npmVersion":"11.14.1","description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","directories":{},"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28","@biomejs/biome":"2.5","@web/dev-server":"^0.4.6","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2"},"_npmOperationalInternal":{"tmp":"tmp/share-mastodon-component_2.0.2_1781523912595_0.023364904883314885","host":"s3://npm-registry-packages-npm-production"}},"3.0.2":{"name":"@davidhund/share-mastodon-component","version":"3.0.2","keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"author":{"name":"davidhund"},"license":"EUPL-1.2","_id":"@davidhund/share-mastodon-component@3.0.2","maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"homepage":"https://github.com/davidhund/share-mastodon-component#readme","bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"dist":{"shasum":"a955db3a7785808e468e44defb16619704c31f11","tarball":"https://registry.npmjs.org/@davidhund/share-mastodon-component/-/share-mastodon-component-3.0.2.tgz","fileCount":39,"integrity":"sha512-TmRi8heid9WrFTzqXFq+P7cUwjuAiuE0WU5j24Og8+sjjh+7VO6Qgp30fBG1Vvb/KoWLziSriDTgxuQ8rF2Cfw==","signatures":[{"sig":"MEUCIQCxBGEKfXCZAmbEuh6gt9aVc5eqdmjSIno9flFTiy+zMQIgH5qPs0kSpi+EgNMzpBF8Rk6p41VNPJHFNTJGCWR1uD8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":365744},"main":"./dist/share-mastodon.min.js","type":"module","module":"./dist/share-mastodon.min.js","exports":{".":{"import":"./dist/share-mastodon.min.js"},"./de":{"import":"./dist/share-mastodon.de.min.js"},"./es":{"import":"./dist/share-mastodon.es.min.js"},"./fr":{"import":"./dist/share-mastodon.fr.min.js"},"./nl":{"import":"./dist/share-mastodon.nl.min.js"}},"gitHead":"dd5432d2760031154b47b7969ae60c1d2c16f69e","scripts":{"test":"wtr","build":"npm run format && npm run build:script","format":"biome format --write ./src","prepare":"npm run build:script","test:watch":"wtr --watch","build:locale":"node scripts/create-locale.mjs","build:script":"node scripts/build.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"davidhund","email":"david@valuedstandards.com"},"repository":{"url":"git+https://github.com/davidhund/share-mastodon-component.git","type":"git"},"_npmVersion":"11.14.1","description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","directories":{},"_nodeVersion":"24.15.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"esbuild":"^0.28","@biomejs/biome":"2.5","@web/dev-server":"^0.4.6","@open-wc/testing":"^4.0.0","@web/test-runner":"^0.20.2"},"_npmOperationalInternal":{"tmp":"tmp/share-mastodon-component_3.0.2_1781794170557_0.3726325579703922","host":"s3://npm-registry-packages-npm-production"}},"3.0.3":{"name":"@davidhund/share-mastodon-component","version":"3.0.3","description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","type":"module","main":"./dist/share-mastodon.min.js","module":"./dist/share-mastodon.min.js","exports":{".":{"import":"./dist/share-mastodon.min.js"},"./nl":{"import":"./dist/share-mastodon.nl.min.js"},"./fr":{"import":"./dist/share-mastodon.fr.min.js"},"./de":{"import":"./dist/share-mastodon.de.min.js"},"./es":{"import":"./dist/share-mastodon.es.min.js"}},"scripts":{"format":"biome format --write ./src","build:script":"node scripts/build.mjs","build:locale":"node scripts/create-locale.mjs","build":"npm run format && npm run build:script","prepare":"npm run build:script","prepublishOnly":"npm run build","test":"wtr","test:watch":"wtr --watch"},"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/davidhund/share-mastodon-component.git"},"keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"author":{"name":"davidhund"},"license":"EUPL-1.2","bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"homepage":"https://github.com/davidhund/share-mastodon-component#readme","devDependencies":{"@biomejs/biome":"2.5","@open-wc/testing":"^4.0.0","@web/dev-server":"^0.4.6","@web/test-runner":"^0.20.2","esbuild":"^0.28"},"_id":"@davidhund/share-mastodon-component@3.0.3","gitHead":"cc2f80e02f0d7e8ea4363bce37e0d72ba806ce2c","_nodeVersion":"22.22.3","_npmVersion":"10.9.8","dist":{"integrity":"sha512-kdHm9g1sC90CPweB/pd/akMmxBR8HQsqP9UdPhrLTC89yVNWdwnwWtBfbu2UmiKKdHnUbFwx8/6bgniV73SBfw==","shasum":"f88df256edea51b3561d8d076bd7efa0c7d2e3e1","tarball":"https://registry.npmjs.org/@davidhund/share-mastodon-component/-/share-mastodon-component-3.0.3.tgz","fileCount":24,"unpackedSize":306809,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIGQsZ8SL/B0zkkAbiE5/maxFM5v0zjdr85NPllMkIwolAiBYCxf8aJEiGtco3m0EtJ7AHLPLRc3wrQCv7Ck5DibtTw=="}]},"_npmUser":{"name":"davidhund","email":"david@valuedstandards.com"},"directories":{},"maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/share-mastodon-component_3.0.3_1781796652747_0.8956859315897208"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-15T11:22:34.732Z","modified":"2026-06-18T15:30:53.004Z","2.0.0":"2026-06-15T11:22:35.080Z","2.0.1":"2026-06-15T11:23:22.887Z","2.0.2":"2026-06-15T11:45:12.729Z","3.0.2":"2026-06-18T14:49:30.723Z","3.0.3":"2026-06-18T15:30:52.897Z"},"bugs":{"url":"https://github.com/davidhund/share-mastodon-component/issues"},"author":{"name":"davidhund"},"license":"EUPL-1.2","homepage":"https://github.com/davidhund/share-mastodon-component#readme","keywords":["web-component","share","mastodon","fediverse","accessible","a11y","i18n","localization","social-sharing","lightweight","no-dependencies","html5"],"repository":{"type":"git","url":"git+https://github.com/davidhund/share-mastodon-component.git"},"description":"Framework-free HTML Web Component to add Mastodon sharing to any site—with accessibility, multi-language support, and zero dependencies","maintainers":[{"name":"davidhund","email":"david@valuedstandards.com"}],"readme":"# `<share-mastodon>` Web Component\n\nAccessible, multilingual HTML Web Component that opens a Mastodon instance dialog and remembers your server via `localStorage`.\n\n- No framework dependency — plain JavaScript ES Module\n- Progressive enhancement: works as a plain link without JS\n- Remembers the user's Mastodon instance across visits\n- Separate self-contained builds for each language: English (default), Dutch, French, German, Spanish\n- Fully overridable via attributes\n\n## Getting Started\n\n### Use in your project\n\nInstall from npm:\n\n```bash\nnpm install @davidhund/share-mastodon-component\n```\n\nThen import and use the component in your HTML:\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@davidhund/share-mastodon-component/dist/share-mastodon.min.js\"></script>\n\n<share-mastodon>\n  <a href=\"https://share.joinmastodon.org/#text=Check%20this%20out\">Share via Mastodon</a>\n</share-mastodon>\n```\n\nOr via ES modules:\n\n```js\nimport { ShareMastodon } from '@davidhund/share-mastodon-component';\n```\n\nSee [Basic usage](#basic-usage) and [Attributes](#attributes) below for more options.\n\n## Building\n\nFor development and contributing:\n\n```bash\nnpm install    # Install dev dependencies\nnpm run build  # Build to /dist (source code + locales)\n```\n\nThen view the demo page:\n\n```bash\nnpx serve .    # Start local server, then open http://localhost:3000/index.html\n```\n\nThe `index.html` file includes interactive examples you can use as a reference for all features and styling options. Open your browser's **Developer Console** to see custom events being logged in real-time.\n\n## Architecture\n\nThe component is a **single-file Web Component** (~730 lines) with no external dependencies:\n\n- **Light DOM** — renders directly to the page (no Shadow DOM), so all styles are inherited and all selectors work\n- **Vanilla JavaScript** — no framework required; works in any HTML environment\n- **Progressive enhancement** — works without JavaScript (graceful fallback to standard link)\n- **Storage** — remembers the user's server choice via `localStorage` (shared across all instances on the page)\n- **Accessibility-first** — WCAG 2.2 AA compliance with full keyboard navigation and screen reader support\n\n**What it does:**\n1. Wraps your link text (or an existing `<a>` element)\n2. Intercepts clicks to show a modal dialog\n3. Saves the server hostname to `localStorage`\n4. Redirects to the official Mastodon share flow\n5. Emits custom events for advanced integrations\n\n## Installation\n\n### From npm (recommended)\n\n```bash\nnpm install @davidhund/share-mastodon-component\n```\n\n### From CDN\n\n```html\n<script type=\"module\" src=\"https://unpkg.com/@davidhund/share-mastodon-component/dist/share-mastodon.min.js\"></script>\n```\n\n### From source\n\nFor local development, clone the repository and build:\n\n```bash\ngit clone https://github.com/davidhund/share-mastodon-component.git\ncd share-mastodon-component\nnpm install\nnpm run build\n```\n\nThen reference the built files:\n\n```html\n<script type=\"module\" src=\"./path/to/dist/share-mastodon.min.js\"></script>\n```\n\n## Basic usage\n\nWrap any text (or an existing `<a>`) in `<share-mastodon>`:\n\n```html\n<share-mastodon>Share via Mastodon</share-mastodon>\n```\n\nPreferably with a no-JS fallback anchor:\n\n```html\n<share-mastodon>\n  <a href=\"https://share.joinmastodon.org/#text=Check%20this%20out\">Share via Mastodon</a>\n</share-mastodon>\n```\n\n## Attributes\n\n| Attribute | Description |\n|---|---|\n| `server` | Preset the Mastodon instance hostname (e.g. `mastodon.social`). Skips the dialog and goes directly to the share page. Also saved to `localStorage` and shared across all instances on the page. |\n| `show-icon` | Show the Mastodon SVG logo before the link. The icon has `role=\"presentation\"` and is `1em` in size. |\n| `icon-only` | Show only the icon; link text is visually hidden but remains in the accessibility tree. Implies `show-icon`. |\n| `text` | Custom share text. Defaults to `document.title`. |\n| `via` | Appends a `via` handle to the share text (e.g. `@you@mastodon.social`). |\n| `label` | Overrides the link label text. |\n| `label-explainer` | Visually hidden explainer shown when no server is set yet. |\n| `edit-text` | Label for the \"edit server\" button (shown after a server is saved). |\n| `dialog-label` | Heading label inside the dialog. |\n| `dialog-hint` | Hint text inside the dialog input. |\n| `dialog-hint-invalid` | Error message for an invalid server. Use `%SERVER%` as a placeholder for the entered value. |\n| `dialog-save` | Label for the save button. |\n| `dialog-cancel` | Label for the cancel button. |\n\n## Examples\n\n### Preset server\n\n```html\n<share-mastodon server=\"mastodon.social\">Share via Mastodon</share-mastodon>\n```\n\n### With icon\n\n```html\n<share-mastodon show-icon=\"true\">Share via Mastodon</share-mastodon>\n```\n\n### Icon only (visually hidden text)\n\n```html\n<share-mastodon icon-only=\"true\">Share via Mastodon</share-mastodon>\n```\n\n### Custom share text and via handle\n\n```html\n<share-mastodon\n  text=\"Check out this article!\"\n  via=\"@you@mastodon.social\"\n  show-icon=\"true\"\n>Share via Mastodon</share-mastodon>\n```\n\n### Override all i18n strings\n\n```html\n<share-mastodon\n  label=\"Share this page\"\n  label-explainer=\"Enter your Mastodon server address first.\"\n  edit-text=\"Change Mastodon server\"\n  dialog-label=\"Your Mastodon server:\"\n  dialog-hint=\"e.g. mastodon.social, fosstodon.org or mas.to\"\n  dialog-hint-invalid=\"'%SERVER%' does not appear to be a valid server.\"\n  dialog-save=\"Continue\"\n  dialog-cancel=\"Cancel\"\n>Share this page</share-mastodon>\n```\n\n## Accessibility\n\nThis component is built with accessibility as a core principle:\n\n- **WCAG 2.2 Level AA** — compliant with Web Content Accessibility Guidelines\n- **Keyboard navigation** — fully operable with Tab, Enter, Escape keys\n- **Screen reader friendly** — semantic HTML with proper ARIA labels and roles\n- **Focus management** — visible focus indicators; focus returns to trigger after dialog closes\n- **Dialog semantics** — uses native `<dialog>` element with proper role and aria-labelledby\n- **Color contrast** — meets minimum AA contrast ratios\n- **Respects motion preferences** — no forced animations (future enhancement)\n\n## Browser Support\n\nRequires **modern browsers** with support for:\n- ES Modules (`import` / `export`)\n- Custom Elements (Web Components)\n- `<dialog>` element\n- `localStorage`\n\n**Tested on:**\n- Chrome/Edge 90+\n- Firefox 88+\n- Safari 15+\n- Mobile browsers (iOS Safari 15+, Android Chrome 90+)\n\n**Polyfills:** For older browsers, you'll need polyfills for Custom Elements and the `<dialog>` element.\n\n## Custom events\n\nAll events bubble and are cancelable. They are prefixed with the tag name: `share-mastodon:`. Listen on `document` to catch all instances, or on a specific element for one instance.\n\n### `share-mastodon:init`\n\nFired once when the component is fully initialised. `event.detail` is the component element itself.\n\n```js\ndocument.addEventListener('share-mastodon:init', (event) => {\n  console.log('Initialised:', event.detail); // the <share-mastodon> element\n});\n```\n\n### `share-mastodon:dialog:open`\n\nFired when the dialog opens. `event.detail` is an empty object.\n\n```js\ndocument.addEventListener('share-mastodon:dialog:open', (event) => {\n  console.log('Dialog opened by:', event.target);\n});\n```\n\n### `share-mastodon:dialog:close`\n\nFired after the dialog closes. `event.detail` contains the dialog's `returnValue`:\n\n| Value | Meaning |\n|---|---|\n| `\"mastodon.social\"` (hostname) | User saved a valid server |\n| `\"cancel\"` | User closed without saving |\n| `\"\"` (empty string) | Dialog closed another way (e.g. Escape or `closedby=\"any\"`) |\n\n```js\ndocument.addEventListener('share-mastodon:dialog:close', (event) => {\n  const returnValue = event.detail;\n\n  if (!returnValue || returnValue === 'cancel') {\n    console.log('Dialog closed without change.');\n    return;\n  }\n\n  console.log('Server saved:', returnValue); // e.g. \"mastodon.social\"\n});\n```\n\n## Localization\n\nThe component is available in multiple languages. Each language has its own self-contained build with strings baked in — simply load the appropriate build file.\n\n### Available languages\n\n- **`share-mastodon.min.js`** — English (default)\n- **`share-mastodon.nl.min.js`** — Dutch\n- **`share-mastodon.fr.min.js`** — French\n- **`share-mastodon.de.min.js`** — German\n- **`share-mastodon.es.min.js`** — Spanish\n\n### Using a specific language\n\nChoose the build that matches your language. All builds contain identical functionality with only the UI strings changed. Each language is a separate pre-built file, so consumers import only the strings they need — minimizing bundle size.\n\n**Via CDN:**\n\n```html\n<!-- English (default) -->\n<script type=\"module\" src=\"https://unpkg.com/@davidhund/share-mastodon-component/dist/share-mastodon.min.js\"></script>\n\n<!-- Or Dutch -->\n<script type=\"module\" src=\"https://unpkg.com/@davidhund/share-mastodon-component/dist/share-mastodon.nl.min.js\"></script>\n\n<!-- Or French -->\n<script type=\"module\" src=\"https://unpkg.com/@davidhund/share-mastodon-component/dist/share-mastodon.fr.min.js\"></script>\n\n<share-mastodon>Partager sur Mastodon</share-mastodon>\n```\n\n**Via npm:**\n\n```js\n// English\nimport { ShareMastodon } from '@davidhund/share-mastodon-component';\n\n// Or Dutch\nimport { ShareMastodon } from '@davidhund/share-mastodon-component/nl';\n\n// Or French\nimport { ShareMastodon } from '@davidhund/share-mastodon-component/fr';\n```\n\n### Adding a new language\n\nTo contribute a new language, follow these steps:\n\n1. **Scaffold the locale file:**\n   ```bash\n   npm run build:locale -- pt  # Creates src/locales/pt.js for Portuguese\n   ```\n\n2. **Translate the strings** in `src/locales/pt.js`:\n   ```js\n   export default {\n     anchor_text: \"Partilhar no Mastodon\",\n     anchor_text_explainer: \"Para partilhar esta página no Mastodon, introduza o seu servidor.\",\n     // ... translate the remaining 6 strings\n   };\n   ```\n\n3. **Build and test:**\n   ```bash\n   npm run build\n   ```\n\n4. **Submit a pull request** with your new locale file and updated package.json exports.\n\n## Styles\n\nThe component injects a minimal stylesheet once (light DOM — no Shadow DOM). All layout values are exposed as CSS custom properties so you can override them without touching the source.\n\n### CSS custom properties\n\n| Property | Default | Applied to |\n|---|---|---|\n| `--share-mastodon-display` | `flex` | host element |\n| `--share-mastodon-align-items` | `center` | host element |\n| `--share-mastodon-gap` | `.25em` | host element; also fallback for fields gap |\n| `--share-mastodon-link-display` | `flex` | `.share-mastodon__link` |\n| `--share-mastodon-link-gap` | `.25em` | `.share-mastodon__link` |\n| `--share-mastodon-padding` | `1.5em` | `.share-mastodon__dialog` |\n| `--share-mastodon-dialog-min-width` | `min(calc(100vw - 3em), 40ch)` | `.share-mastodon__dialog` |\n| `--share-mastodon-dialog-backdrop-color` | `rgba(0,0,0,.7)` | `::backdrop` |\n| `--share-mastodon-fields-display` | `flex` | `.share-mastodon__dialog-fields` |\n| `--share-mastodon-fields-justify-content` | `space-between` | `.share-mastodon__dialog-fields` |\n| `--share-mastodon-fields-gap` | `var(--share-mastodon-gap)` | `.share-mastodon__dialog-fields` |\n| `--share-mastodon-dialog-color-invalid` | `rgb(200,50,50)` | hint text in invalid state |\n\n### CSS classnames\n\n| Classname | Element | Notes |\n|---|---|---|\n| `share-mastodon__link` | `<a>` | The share anchor |\n| `share-mastodon__link-icon` | `<span>` | Icon wrapper; present when `show-icon` or `icon-only` is set |\n| `share-mastodon__link-icon-only` | modifier on `<a>` | Added when `icon-only` is set |\n| `share-mastodon__text` | `<span>` | Link label text |\n| `share-mastodon__explainer` | `<span>` | Visually hidden hint shown before a server is saved |\n| `share-mastodon__visually-hidden` | utility | Visually hides content while keeping it in the accessibility tree |\n| `share-mastodon__edit` | `<button>` | \"Edit server\" button; hidden until a server is saved |\n| `share-mastodon__edit-text` | `<span>` | Text inside the edit button |\n| `share-mastodon__dialog` | `<dialog>` | The instance dialog |\n| `share-mastodon__dialog-form` | `<form>` | Form inside the dialog |\n| `share-mastodon__dialog-label` | `<label>` | Dialog heading label |\n| `share-mastodon__dialog-hint` | `<p>` | Hint / error paragraph |\n| `share-mastodon__dialog-fields` | `<div>` | Flex wrapper for input and buttons |\n| `share-mastodon__dialog-input` | `<input>` | Server hostname input |\n| `share-mastodon__dialog-save` | `<button>` | Save / continue button |\n| `share-mastodon__dialog-save-text` | `<span>` | Text inside the save button |\n| `share-mastodon__dialog-cancel` | `<button>` | Cancel / close button |\n| `share-mastodon__dialog-cancel-text` | `<span>` | Text inside the cancel button |\n| `share-mastodon__dialog-is-invalid` | modifier on `<dialog>` | Added when the entered server fails validation |\n\n## Troubleshooting\n\n### Component not showing up\n- Ensure you've run `npm run build` to generate the `/dist` folder\n- Verify the script tag points to the correct path: `./dist/share-mastodon.min.js`\n- Check browser console for errors\n\n### Dialog doesn't open when I click the link\n- Verify JavaScript is enabled\n- Check that `<share-mastodon>` tag is properly closed\n- Open browser console to see any error messages\n- For IE11: this component does not support IE11 (requires ES6+ and `<dialog>`)\n\n### localStorage not persisting across page loads\n- Ensure the user hasn't disabled cookies/storage in their browser settings\n- Check if the app is running in a private/incognito window (localStorage disabled by default)\n- Verify the browser isn't configured to clear storage on exit\n\n### Changing languages\n- Each language has its own separate build: `share-mastodon.min.js` (English), `share-mastodon.nl.min.js` (Dutch), etc.\n- Load the build that matches the desired language. The UI strings are baked into each build at compile time.\n\n### Styling not applying\n- Remember: the component uses **light DOM** (not Shadow DOM), so CSS cascade and specificity apply normally\n- To override styles, use CSS custom properties or target the BEM classnames (see \"Styles\" section)\n- Avoid using too-specific selectors that might conflict with your page styles\n\n## Development\n\n**Requirements:** Node.js LTS or later\n\n```bash\nnpm run build       # Format and build all locale variants to /dist\nnpm test            # Run test suite\nnpm test -- --watch # Watch mode for development\nnpm run format      # Format source code with Biome\nnpm run build:locale -- xx  # Scaffold a new locale (xx = language code)\n```\n\n## License\n\n[EUPL-1.2](./LICENSE.txt) — See [LICENSE.txt](./LICENSE.txt) for full details.\n\n**Summary:** Open source with copyleft protection. You can use, modify, and distribute this component freely, but any modifications must also be open source under EUPL-1.2 or a compatible license.\n","readmeFilename":"README.md"}