v1.1.1

Features

• Fold markers ${fold} … ${/fold}: collapsible sections are now expressed as content markers (mirroring the block-comment ${key}…${/key} pattern, no companion binding needed). ${fold} starts collapsed, ${fold:open} starts expanded. They work in any language and — unlike the previous attribute — both inside a <textarea> and via the code property (programmatic content). Marker lines are removed from the output and from copy/download.
• Escaping \${...}: write \${...} to render the literal ${...} instead of interpreting it (binding, block comment or fold) — useful for documenting the syntax with the component itself.

Improvements

• Collapsible UI polish: the collapsed band uses a larger double-chevron "unfold" icon (clearer than a caret), its whole row is clickable to expand, and its layout is overlap-proof (the ⋯ N lines text can no longer overlap the icon). All fold chevrons are crisp SVGs.

Breaking changes

• Removed collapsible / collapsed <textarea> attributes (introduced in 1.1.0) in favor of the ${fold} markers above. Migrate <textarea collapsible collapsed>…</textarea> to a ${fold} … ${/fold} block (and collapsible without collapsed to ${fold:open}).

v1.1.0

Features

• JSON language: New language="json" with dedicated syntax highlighting (property keys vs string values, true/false/null, numbers, punctuation). JSONC // and /* */ comments are displayed but stripped from copy/download so the exported content stays valid (RFC 8259).
• Collapsible sections: New collapsible attribute on <textarea> folds a range of non-interactive lines (GitHub-diff style), with collapsed to start folded. The collapsed band shows the hidden line count (▸ ⋯ N lines); when expanded, a collapse chevron sits in the gutter/margin of the first and last line. Folding is purely visual — copy/download still export the full content. Keyboard accessible (role="button", Enter/Space).
• Button binding type: New type="button" renders a clickable action token that emits a change event on every click (e.detail = its value) with no re-render — ideal for a hub of actions. value is the label (a button<index> default is synthesized when omitted). Exposes a trigger() method.
• Download button: New show-download attribute displays a download button (next to copy) that exports the full content as a file. The file name comes from the optional download="name.ext" attribute or defaults to snippet.<ext> based on the language; MIME type matches the language.
• Gutter rail: A fixed-width left gutter is now reserved whenever the component has line numbers, collapsible sections, or comment toggles — so fold chevrons and comment toggles share a consistent rail. Comment and block-comment toggles moved into the gutter, which preserves the code indentation regardless of comment state (toggling a comment no longer shifts the code). Width is customizable via --code-gutter-width.

Improvements

• Comment toggles no longer shift code: line/block comment indicators are rendered in the gutter (out of flow), so commenting/uncommenting keeps the code aligned. Copy/download output is unchanged.

Tests

• Added src/new-features.spec.ts (13 tests): JSON highlighting, JSONC comment stripping on export, collapsible sections, button type, download, and gutter behavior.
• Fixed a pre-existing XSS test whose assertion checked innerHTML serialization (which legitimately decodes < inside attribute values); it now asserts no <script> element is injected.

v1.0.7

Features

• Theme system: Built-in IntelliJ default theme with 4 external CSS themes (vscode, github, solarized, catppuccin). Themes use CSS custom properties with light-dark() for automatic light/dark support. External themes are published as CSS files and available via CDN.
• Color scheme: color-scheme attribute to override light/dark mode per element (inherits from parent by default).
• Mixed content highlighting: When language="html", <style> blocks use SCSS highlighting and <script> blocks use TypeScript highlighting automatically.
• CSS custom properties: All 18 token colors and 10 UI colors exposed as --token-* and --code-* variables for external customization.
• Interactive zone styling: Interactive controls expose part="interactive" for external CSS styling (supports :hover). Themes provide color hooks: --code-interactive-highlight (accent), --code-interactive-color (text), --code-interactive-bg-color (background), --code-interactive-border-color (border). Shadow DOM decoration customizable via --code-interactive-text-decoration, --code-interactive-border, etc. Built-in styles: wavy (default), dotted, dashed, highlight, outline, pill, hand-drawn, none.
• Condition value matching: Conditional textareas now support condition="key=value" syntax to show content when a binding equals a specific value (in addition to existing truthy/falsy checks).
• Select carousel mode: New carousel boolean attribute on <code-binding type="select"> cycles through options on click instead of opening a dropdown. Supports keyboard navigation (ArrowUp/ArrowDown) and Shift+click to cycle backward.
• Copy to clipboard button: New show-copy attribute displays a copy button (top-right corner) with SVG clipboard/check icons and visual feedback (green check for 2 seconds after copy). Hidden by default.
• Line numbers: New show-line-numbers attribute displays line numbers in the gutter. Numbers are excluded from copy/paste via user-select: none. Section separators have no line number.
• Hyphenated binding keys: Binding keys now support hyphens (e.g., ${show-line-numbers}) for use with the attribute binding type on HTML attributes.
• Accessibility: Interactive controls now have role, aria-label, and tabindex attributes. Keyboard navigation supports Enter/Space for toggle actions, ArrowUp/Down for number increment/decrement. Focus-visible outline on all interactive elements.

Bug Fixes

• Conditional content not updated for inline controls: When a select (3+ options), number, string, or color binding was modified via inline controls, the _internalChange flag prevented updateCode() from being called, so conditional textareas were not re-evaluated. Now checks for condition dependencies after inline changes.
• Memory leak - empty disconnectedCallback(): MutationObserver, setTimeout, and event listeners were never cleaned up when the element was removed from the DOM. All resources are now properly disposed in disconnectedCallback().
• XSS risk in binding rendering: String, number, color, and select values were inserted into HTML attributes without escaping. All dynamic values are now escaped with escapeHtml().
• Fragile _internalChange flag: If binding.value = newValue threw an error, the flag remained stuck at true. Now wrapped in try/finally blocks.

Improvements

• Consolidated input listeners: Three separate input event listeners merged into a single _handleShadowInput() with extracted helper methods (_handleInlineNumberInput, _handleInlineStringInput, _handleInlineColorInput)
• Refactored renderTemplate(): Decomposed into smaller methods: findBlockCommentKeys(), renderLine(), processMarkers(), buildLineHtml()
• Named event handlers: All anonymous event handlers converted to bound named methods for proper cleanup in disconnectedCallback()
• CommentStyle interface: Extracted return type of getCommentStyle() into a named interface

Tests

• 178 tests total (+68 new): cleanup (3), XSS (3), conditional inline (1), copy button (8), line numbers (5), accessibility (6), condition value matching (5), interactive zone (9), carousel (13), theme system (7), mixed content highlighting (7)

v1.0.6

Features

• Conditional textareas: Multiple <textarea> elements can now have a condition attribute to conditionally show/hide code sections based on binding values
  • condition="key" → show when binding is truthy
  • condition="!key" → show when binding is falsy
  • Useful for showing different code patterns based on user selection
• Section separators: Optional show-separators attribute on <interactive-code> adds subtle visual separators between concatenated textarea sections
  • Customizable via --code-separator-color CSS variable

Example

<interactive-code language="typescript" show-separators>
  <textarea>const result = provider.complete(input, { groupBy: ${groupBy} });</textarea>
  <textarea condition="!groupBy">// Use result.items for flat list</textarea>
  <textarea condition="groupBy">// Use result.groups for grouped display</textarea>
  <code-binding key="groupBy" type="select" options="undefined,'continent'" value="undefined"></code-binding>
</interactive-code>

Tests

• Added 7 new tests for conditional textareas and separators (110 tests total)

v1.0.5

Bug Fixes

• Multi-line block comments now correctly gray out all lines (not just the first line)

v1.0.4

Features

• Comment style adapts to language: // for TypeScript/SCSS, # for Shell, <!-- --> for HTML
• Block comment syntax with ${key}...${/key} for multi-line comments (/* */ or <!-- -->)
• Attribute type now supports attributes with values: ${title}="My Title" (whole attribute is toggled/strikethrough)
• Comment toggle: replaced checkbox with clickable comment indicator (//, #, <!-- -->, /* */) - grayed when active (code visible), highlighted in green when commented
• New attribute binding type for toggling HTML attributes (displays with strikethrough when disabled)
• Wavy underline on editable elements to make them more visible
• Comment checkbox color now matches the editable underline color

Bug Fixes

• Breaking: onchange attribute now receives CustomEvent instead of value directly
  • Before: onchange="handler(e)" where e was the value
  • After: onchange="handler(e.detail)" where e.detail is the value
  • This makes behavior consistent with addEventListener('change', ...) and frameworks (Angular, React, Vue)
• Fix onchange attribute handlers not being called for number, string, and color inputs
• Color picker preview and text now update in real-time when color changes

Improvements

• Changed ${key} binding placeholders from red to green for better visibility
• key attribute values in <code-binding> now highlighted in matching green color
• Demo: Responsive layout for "Seen by user" sections (stacked vertically)
• Demo: Replaced checkbox with icons for better preview
• Demo: Replaced box-shadow with border in comment type example for better visibility
• Demo: Added example for new attribute binding type
• Demo: Added examples for all comment styles per language
• Demo: Updated attribute type examples with boolean and value-based attributes

Tests

• Added 14 new tests for comment and attribute features (103 tests total)

v1.0.3

Maintenance release.

v1.0.2

Features

• Add unit tests for CodeBindingElement and InteractiveCodeElement (89 tests)
• Add Vitest configuration with happy-dom environment

v1.0.1

Bug Fixes

• Fix TypeScript build error with unused oldValue parameter in attributeChangedCallback