{"id":50715189,"url":"https://github.com/mycelial-systems/editable-field","last_synced_at":"2026-06-09T18:32:12.710Z","repository":{"id":345132851,"uuid":"1181968739","full_name":"mycelial-systems/editable-field","owner":"mycelial-systems","description":"Web component for a text input with edit button","archived":false,"fork":false,"pushed_at":"2026-05-23T21:14:43.000Z","size":99,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-23T23:18:15.654Z","etag":null,"topics":["component","html","web"],"latest_commit_sha":null,"homepage":"https://mycelial-systems.github.io/editable-field/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mycelial-systems.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-14T21:41:09.000Z","updated_at":"2026-05-23T21:14:47.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/mycelial-systems/editable-field","commit_stats":null,"previous_names":["mycelial-systems/editable-field"],"tags_count":8,"template":false,"template_full_name":"mycelial-systems/template-web-component","purl":"pkg:github/mycelial-systems/editable-field","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycelial-systems%2Feditable-field","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycelial-systems%2Feditable-field/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycelial-systems%2Feditable-field/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycelial-systems%2Feditable-field/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mycelial-systems","download_url":"https://codeload.github.com/mycelial-systems/editable-field/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mycelial-systems%2Feditable-field/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34121021,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-09T02:00:06.510Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","html","web"],"created_at":"2026-06-09T18:32:11.540Z","updated_at":"2026-06-09T18:32:12.705Z","avatar_url":"https://github.com/mycelial-systems.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Editable Field\n`editable-field` is a tiny Web Component that wraps an `\u003cinput\u003e`\ntogether with a pencil/save/cancel button set. The pencil button enables\nediting, and the save/cancel controls are revealed once the field is in\nedit mode. It keeps the host attributes (`name`, `value`, `disabled`) in\nsync with the internal input and emits lifecycle events that bubble up to\nany listener, including handlers that watch for namespaced event names.\n\n[See a live demo](https://mycelial-systems.github.io/editable-field/) and\ncheck the `example/` folder for a hands-on playbook.\n\n\u003cdetails\u003e\u003csummary\u003e\u003ch2\u003eContents\u003c/h2\u003e\u003c/summary\u003e\n\n\u003c!-- toc --\u003e\n\n- [Install](#install)\n- [Quick start](#quick-start)\n- [API](#api)\n  * [Attributes](#attributes)\n  * [Events](#events)\n- [Usage](#usage)\n  * [JavaScript](#javascript)\n  * [HTML](#html)\n- [CSS](#css)\n  * [CSS variables](#css-variables)\n- [Pre-built files](#pre-built-files)\n- [Notes](#notes)\n\n\u003c!-- tocstop --\u003e\n\n\u003c/details\u003e\n\n## Install\n\nInstall via npm, yarn, or pnpm and the package will register the\n`\u003ceditable-field\u003e` custom element globally.\n\n```sh\nnpm i -S @substrate-system/editable-field\n```\n\n## Quick start\n\nImport the element and its styles into your bundle entry. The JS import\ntouches `customElements.define` so the tag is ready to use; the CSS import\nbrings the default gap, outline, and button styles.\n\n```js\nimport '@substrate-system/editable-field'\nimport '@substrate-system/editable-field/css'\n```\n\nNow use `\u003ceditable-field\u003e` in your markup.\n\n## API\n\n### Attributes\n\n- `name` (string, default `''`)\n  Mirrors the attribute to the inner `\u003cinput\u003e`'s `name` and `id`\n- `value` (string, default `''`)\n  Syncs to the input `value`. Updating the host attribute when the field is\n  idle updates what appears when the next edit session starts.\n- `disabled` (any truthy value, default `true`)\n  Keeps the input disabled and adds `aria-disabled=\"true\"`. Remove the\n  attribute (or set it to `'false'`) to re-enable typing.\n  Example:\n  `\u003ceditable-field\n      name=\"email\"\n      value=\"hi@example.com\"\n      disabled\n  \u003e\u003c/editable-field\u003e`\n\n### Events\n\n- `edit`\n  - Origin: host element via `this.emit('edit')` / `this.dispatch('edit')`\n  - Bubbles: yes\n  - Notes: Fires when the pencil button enables editing.\n    The event is also available as `editable-field:edit` through\n    `field.on('edit', handler)`.\n- `save`\n  - Origin: internal `\u003cinput\u003e`\n  - Bubbles: yes\n  - Notes: Fired when the save button is clicked. Because the event\n    originates from the `\u003cinput\u003e`, `event.target.value` gives the new value.\n    A namespaced `editable-field:save` is emitted via `field.on('save', …)`\n    as shown in `example/index.ts`.\n- `cancel`\n  - Origin: host element (`this.emit('cancel')`, `this.dispatch('cancel')`)\n  - Bubbles: yes\n  - Notes: Triggered by the cancel button. The component resets the cached\n    `_originalValue` before the event bubbles.\n\nThe `example/index.ts` file also shows how to log the events, inspect the event\n`type`, and listen for the wildcard `field.addEventListener('*', handler)`\nthat surfaces every emitted event.\n\n## Usage\n\nSee [`./example/index.ts](./example/index.ts).\n\n### JavaScript\n\n```ts\nimport { type EditableField } from '@substrate-system/editable-field'\n\nconst field = document.querySelector\u003cEditableField\u003e('editable-field')\nfield?.addEventListener('save', ev =\u003e {\n    const input = ev.target\n    console.log('saved value:', input.value)\n})\n\nfield?.on('save', ev =\u003e {\n    console.log('namespaced event:', ev.type)\n})\n```\n\n### HTML\n\nThe component consumes the same attributes as the native `\u003cinput\u003e`:\n\n```html\n\u003cform\u003e\n    \u003clabel for=\"email\"\u003eEmail\u003c/label\u003e\n    \u003ceditable-field\n        id=\"email\"\n        name=\"email\"\n        value=\"user@example.com\"\n    \u003e\u003c/editable-field\u003e\n\u003c/form\u003e\n```\n\nWhen placed inside a form, the `name` attribute flows through to the inner\ninput so form serialization (via `FormData`) works without extra wiring.\n\n## CSS\n\nThe package ships with default styles:\n\n```js\nimport '@substrate-system/editable-field/css'\n// or for the minified output:\nimport '@substrate-system/editable-field/min/css'\n```\n\nInclude these imports once in your CSS/JS entry point before you render the\nelements so the buttons and outlines behave as shipped.\n\n### CSS variables\n\n- `--editable-field-gap` (`0.5rem`): Gap between the input and the button trio.\n- `--pencil-button-color` (`currentcolor`): Stroke color for the pencil icon.\n- `--pencil-button-size` (`1.5rem`): Width/height of the pencil icon.\n- `--save-button-color` (`currentcolor`): Stroke color for the save checkmark.\n- `--save-button-size` (`1.5rem`): Width/height of the save icon.\n- `--x-button-color` (`currentcolor`): Stroke color for the cancel \"x\".\n- `--x-button-size` (`1.5rem`): Width/height of the cancel icon.\n\nOverride any of these variables on the host to restyle the buttons or the\nspacing without touching the component internals.\n\n```css\neditable-field {\n    --editable-field-gap: 1rem;\n    --save-button-color: #0b99ff;\n    --x-button-color: #e66;\n}\n```\n\n## Pre-built files\n\nIf you prefer a drop-in script, copy the bundled JS/CSS from `dist/` into\nyour public folder.\n\n```sh\ncp ./node_modules/@substrate-system/editable-field/dist/index.min.js ./public/editable-field.min.js\ncp ./node_modules/@substrate-system/editable-field/dist/style.min.css ./public/editable-field.css\n```\n\n```html\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"./editable-field.css\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cscript type=\"module\" src=\"./editable-field.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Notes\n\n- The component keeps `aria-disabled=\"true\"` on the host until the pencil\n  button is clicked; `input.focus()` runs as soon as editing starts.\n- Save/cancel buttons are hidden by default and shown via the `.editing`\n  class when editing is active. The pencil button is hidden while in edit\n  mode.\n- The cancel flow restores the cached `_originalValue` before it emits\n  `cancel`.\n- To inspect live logging, set `localStorage.DEBUG` to `editable-field` and\n  run `example/index.ts` during development.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmycelial-systems%2Feditable-field","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmycelial-systems%2Feditable-field","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmycelial-systems%2Feditable-field/lists"}