feat: add editable zone styling and condition value matching support

Author: hhfrancois

RELEASE_NOTES.md

@@ -8,6 +8,8 @@
 - **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.
+- **Editable zone styling**: Interactive controls expose `part="editable"` and 8 CSS custom properties (`--code-editable-text-decoration`, `--code-editable-border-radius`, `--code-editable-border`, `--code-editable-outline`, `--code-editable-background`, `--code-editable-padding`, etc.) for full decoration customization. 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).
 
 ### Bug Fixes
 
@@ -32,8 +34,8 @@
 
 ### Tests
 
-- Added 26 new tests: cleanup (3), XSS (3), conditional inline (1), copy button (8), line numbers (5), accessibility (6)
-- Updated tests: theme system (7), mixed content highlighting (7) — 150 tests total
+- Added 40 new tests: cleanup (3), XSS (3), conditional inline (1), copy button (8), line numbers (5), accessibility (6), condition value matching (5), part="editable" (5), editable zone CSS (4)
+- Updated tests: theme system (7), mixed content highlighting (7) — 164 tests total
 
 ---
 

demo/index.html

@@ -494,15 +494,15 @@ <h1>@softwarity/interactive-code</h1>
         <h2>Theme & Color Scheme</h2>
         <p>Click on highlighted values to change theme and color scheme. Changes apply globally to all "Seen by user" code blocks below.</p>
 
-        <interactive-code class="inline-code" language="html">
+        <interactive-code class="inline-code" language="html" show-copy>
           <textarea>${useTheme}<link rel="stylesheet" href="https://unpkg.com/@softwarity/interactive-code/themes/${theme}.css"></textarea>
           <code-binding key="useTheme" type="comment" value="true"
             onchange="loadThemeCSS(e.detail ? this.closest('interactive-code').querySelector('[key=theme]').value : '')"></code-binding>
           <code-binding key="theme" type="select" options="vscode,github,solarized,catppuccin" value="catppuccin"
             onchange="var c=this.closest('interactive-code').querySelector('[key=useTheme]'); if(String(c.value)!=='false') loadThemeCSS(e.detail)"></code-binding>
         </interactive-code>
 
-        <interactive-code class="inline-code" language="scss">
+        <interactive-code class="inline-code" language="scss" show-copy>
           <textarea>html {
   color-scheme: ${colorScheme};
 }</textarea>
@@ -511,6 +511,41 @@ <h2>Theme & Color Scheme</h2>
         </interactive-code>
       </section>
 
+      <!-- Editable Zone Style -->
+      <section>
+        <h2>Editable Zone Style</h2>
+        <p>Customize how interactive zones look. Select a style to see the CSS and apply it to "Seen by user" blocks below.</p>
+
+        <interactive-code class="inline-code" language="scss" show-copy>
+          <textarea>/* Interactive zone style: ${editableStyle} */
+interactive-code {</textarea>
+          <textarea condition="editableStyle=wavy">  /* default — no custom property needed */</textarea>
+          <textarea condition="editableStyle=dotted">  --code-editable-text-decoration: underline dotted 1.5px;
+  --code-editable-text-underline-offset: 3px;</textarea>
+          <textarea condition="editableStyle=dashed">  --code-editable-text-decoration: underline dashed 1.5px;
+  --code-editable-text-underline-offset: 3px;</textarea>
+          <textarea condition="editableStyle=highlight">  --code-editable-text-decoration: none;
+  --code-editable-background: rgba(128,128,128,0.15);
+  --code-editable-border-radius: 3px;
+  --code-editable-padding: 1px 4px;</textarea>
+          <textarea condition="editableStyle=outline">  --code-editable-text-decoration: none;
+  --code-editable-outline: 1px dashed;
+  --code-editable-outline-offset: 2px;</textarea>
+          <textarea condition="editableStyle=pill">  --code-editable-text-decoration: none;
+  --code-editable-background: rgba(128,128,128,0.12);
+  --code-editable-border-radius: 12px;
+  --code-editable-padding: 1px 8px;</textarea>
+          <textarea condition="editableStyle=hand-drawn">  --code-editable-text-decoration: none;
+  --code-editable-border: 1.5px solid;
+  --code-editable-border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
+  --code-editable-padding: 2px 6px;</textarea>
+          <textarea condition="editableStyle=none">  --code-editable-text-decoration: none;</textarea>
+          <textarea>}</textarea>
+          <code-binding key="editableStyle" type="select" options="wavy,dotted,dashed,highlight,outline,pill,hand-drawn,none" value="wavy"
+            onchange="applyEditableStyle(e.detail)"></code-binding>
+        </interactive-code>
+      </section>
+
       <!-- Playground Section -->
       <section class="playground">
         <h2>Playground</h2>
@@ -1302,6 +1337,61 @@ <h3>Features</h3>
 
     // Load initial theme (catppuccin)
     loadThemeCSS('catppuccin');
+
+    function applyEditableStyle(style) {
+      var els = document.querySelectorAll('.user-view interactive-code');
+      var props = [
+        '--code-editable-text-decoration',
+        '--code-editable-text-underline-offset',
+        '--code-editable-border-radius',
+        '--code-editable-border',
+        '--code-editable-outline',
+        '--code-editable-outline-offset',
+        '--code-editable-background',
+        '--code-editable-padding'
+      ];
+      els.forEach(function(el) {
+        props.forEach(function(p) { el.style.removeProperty(p); });
+        switch (style) {
+          case 'wavy':
+            break;
+          case 'dotted':
+            el.style.setProperty('--code-editable-text-decoration', 'underline dotted 1.5px');
+            el.style.setProperty('--code-editable-text-underline-offset', '3px');
+            break;
+          case 'dashed':
+            el.style.setProperty('--code-editable-text-decoration', 'underline dashed 1.5px');
+            el.style.setProperty('--code-editable-text-underline-offset', '3px');
+            break;
+          case 'highlight':
+            el.style.setProperty('--code-editable-text-decoration', 'none');
+            el.style.setProperty('--code-editable-background', 'rgba(128,128,128,0.15)');
+            el.style.setProperty('--code-editable-border-radius', '3px');
+            el.style.setProperty('--code-editable-padding', '1px 4px');
+            break;
+          case 'outline':
+            el.style.setProperty('--code-editable-text-decoration', 'none');
+            el.style.setProperty('--code-editable-outline', '1px dashed');
+            el.style.setProperty('--code-editable-outline-offset', '2px');
+            break;
+          case 'pill':
+            el.style.setProperty('--code-editable-text-decoration', 'none');
+            el.style.setProperty('--code-editable-background', 'rgba(128,128,128,0.12)');
+            el.style.setProperty('--code-editable-border-radius', '12px');
+            el.style.setProperty('--code-editable-padding', '1px 8px');
+            break;
+          case 'hand-drawn':
+            el.style.setProperty('--code-editable-text-decoration', 'none');
+            el.style.setProperty('--code-editable-border', '1.5px solid');
+            el.style.setProperty('--code-editable-border-radius', '255px 15px 225px 15px / 15px 225px 15px 255px');
+            el.style.setProperty('--code-editable-padding', '2px 6px');
+            break;
+          case 'none':
+            el.style.setProperty('--code-editable-text-decoration', 'none');
+            break;
+        }
+      });
+    }
   </script>
 </body>
 </html>

src/interactive-code.element.spec.ts

@@ -1334,4 +1334,207 @@ describe('InteractiveCodeElement', () => {
       expect(keyword?.textContent).toBe('const');
     });
   });
+
+  describe('condition value matching', () => {
+    it('should show textarea when condition key=value matches', async () => {
+      element.innerHTML = `
+        <textarea>header</textarea>
+        <textarea condition="style=wavy">wavy content</textarea>
+        <textarea condition="style=dotted">dotted content</textarea>
+        <code-binding key="style" type="select" options="wavy,dotted,dashed" value="wavy"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).toContain('wavy content');
+      expect(code).not.toContain('dotted content');
+    });
+
+    it('should update when value changes to match different condition', async () => {
+      element.innerHTML = `
+        <textarea condition="style=wavy">wavy content</textarea>
+        <textarea condition="style=dotted">dotted content</textarea>
+        <code-binding key="style" type="select" options="wavy,dotted" value="wavy"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const binding = element.querySelector('code-binding') as any;
+      binding.value = 'dotted';
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      const code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).not.toContain('wavy content');
+      expect(code).toContain('dotted content');
+    });
+
+    it('should support negated value matching with !key=value', async () => {
+      element.innerHTML = `
+        <textarea condition="!style=none">has style</textarea>
+        <textarea condition="style=none">no style</textarea>
+        <code-binding key="style" type="select" options="wavy,none" value="wavy"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).toContain('has style');
+      expect(code).not.toContain('no style');
+    });
+
+    it('should not match when binding value differs from expected', async () => {
+      element.innerHTML = `
+        <textarea condition="style=highlight">highlight content</textarea>
+        <code-binding key="style" type="select" options="wavy,highlight" value="wavy"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).not.toContain('highlight content');
+    });
+
+    it('should re-evaluate key=value conditions when binding changes externally', async () => {
+      element.innerHTML = `
+        <textarea>header</textarea>
+        <textarea condition="style=a">content A</textarea>
+        <textarea condition="style=b">content B</textarea>
+        <code-binding key="style" type="select" options="a,b,c" value="a"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      let code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).toContain('content A');
+      expect(code).not.toContain('content B');
+
+      // Change binding value externally (triggers _handleChange → updateCode)
+      const binding = element.querySelector('code-binding') as any;
+      binding.value = 'b';
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).not.toContain('content A');
+      expect(code).toContain('content B');
+    });
+
+    it('should coexist with truthy/falsy conditions', async () => {
+      element.innerHTML = `
+        <textarea condition="enabled">enabled content</textarea>
+        <textarea condition="style=wavy">wavy content</textarea>
+        <code-binding key="enabled" type="boolean" value="true"></code-binding>
+        <code-binding key="style" type="select" options="wavy,dotted" value="wavy"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const code = element.shadowRoot?.querySelector('code')?.textContent;
+      expect(code).toContain('enabled content');
+      expect(code).toContain('wavy content');
+    });
+  });
+
+  describe('part="editable" attribute', () => {
+    it('should add part="editable" to boolean controls', async () => {
+      element.innerHTML = `
+        <textarea>\${enabled}</textarea>
+        <code-binding key="enabled" type="boolean" value="true"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const control = element.shadowRoot?.querySelector('.inline-boolean');
+      expect(control?.getAttribute('part')).toBe('editable');
+    });
+
+    it('should add part="editable" to number controls', async () => {
+      element.innerHTML = `
+        <textarea>\${count}</textarea>
+        <code-binding key="count" type="number" value="5"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const control = element.shadowRoot?.querySelector('.inline-number');
+      expect(control?.getAttribute('part')).toBe('editable');
+    });
+
+    it('should add part="editable" to string controls', async () => {
+      element.innerHTML = `
+        <textarea>\${name}</textarea>
+        <code-binding key="name" type="string" value="test"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const control = element.shadowRoot?.querySelector('.inline-string');
+      expect(control?.getAttribute('part')).toBe('editable');
+    });
+
+    it('should add part="editable" to line toggle controls', async () => {
+      element.setAttribute('language', 'scss');
+      element.innerHTML = `
+        <textarea>\${toggle}color: red;</textarea>
+        <code-binding key="toggle" type="comment" value="true"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const toggle = element.shadowRoot?.querySelector('.line-toggle');
+      expect(toggle?.getAttribute('part')).toBe('editable');
+    });
+
+    it('should add part="editable" to block toggle controls', async () => {
+      element.setAttribute('language', 'typescript');
+      element.innerHTML = `
+        <textarea>\${block}const x = 1;\${/block}</textarea>
+        <code-binding key="block" type="comment" value="true"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const toggle = element.shadowRoot?.querySelector('.block-toggle');
+      expect(toggle?.getAttribute('part')).toBe('editable');
+    });
+  });
+
+  describe('editable zone CSS custom properties', () => {
+    it('should use --code-editable-text-decoration in CSS', () => {
+      document.body.appendChild(element);
+      const style = element.shadowRoot?.querySelector('style');
+      expect(style?.textContent).toContain('var(--code-editable-text-decoration,');
+    });
+
+    it('should use --code-editable-border-radius in CSS', () => {
+      document.body.appendChild(element);
+      const style = element.shadowRoot?.querySelector('style');
+      expect(style?.textContent).toContain('var(--code-editable-border-radius,');
+    });
+
+    it('should use --code-editable-border in CSS', () => {
+      document.body.appendChild(element);
+      const style = element.shadowRoot?.querySelector('style');
+      expect(style?.textContent).toContain('var(--code-editable-border,');
+    });
+
+    it('should use --code-editable-padding in CSS', () => {
+      document.body.appendChild(element);
+      const style = element.shadowRoot?.querySelector('style');
+      expect(style?.textContent).toContain('var(--code-editable-padding,');
+    });
+  });
 });