feat: add carousel mode for select bindings with keyboard navigation support

Author: hhfrancois

RELEASE_NOTES.md

@@ -10,6 +10,7 @@
 - **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).
+- **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).
 
 ### Bug Fixes
 
@@ -34,8 +35,8 @@
 
 ### Tests
 
-- 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
+- Added 52 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), carousel (6 rendering + 6 code-binding)
+- Updated tests: theme system (7), mixed content highlighting (7) — 177 tests total
 
 ---
 

demo/index.html

@@ -541,7 +541,7 @@ <h2>Editable Zone Style</h2>
   --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"
+          <code-binding key="editableStyle" type="select" carousel options="wavy,dotted,dashed,highlight,outline,pill,hand-drawn,none" value="wavy"
             onchange="applyEditableStyle(e.detail)"></code-binding>
         </interactive-code>
       </section>
@@ -666,14 +666,14 @@ <h3>String Type</h3>
 
         <!-- Select Type -->
         <article class="doc-section">
-          <h3>Select Type</h3>
-          <p>2 options = toggle, 3+ options = dropdown:</p>
+          <h3>Select Type — Dropdown or Carousel</h3>
+          <p>2 options = toggle click, 3+ options = dropdown. Add <code>carousel</code> attribute to cycle through options on click instead:</p>
 
           <div class="code-header"><span>Written by developer</span></div>
           <interactive-code class="inline-code" language="html" show-copy>
             <textarea><interactive-code language="scss" ${show-line-numbers} ${show-copy}>
   <textarea>.alert { background: '${color}'; }&lt;/textarea>
-  <code-binding key="color" type="select" options="crimson,forestgreen,royalblue,orange" value="crimson"
+  <code-binding key="color" type="select" ${carousel} options="crimson,forestgreen,royalblue,orange" value="crimson"
     onchange="document.getElementById('preview-alert').style.background = e.detail"></code-binding>
 </interactive-code>
 
@@ -682,6 +682,8 @@ <h3>Select Type</h3>
               onchange="var el=this.closest('.doc-section').querySelector('.user-view interactive-code'); e.detail ? el.setAttribute('show-line-numbers','') : el.removeAttribute('show-line-numbers')"></code-binding>
             <code-binding key="show-copy" type="attribute" value="false"
               onchange="var el=this.closest('.doc-section').querySelector('.user-view interactive-code'); e.detail ? el.setAttribute('show-copy','') : el.removeAttribute('show-copy')"></code-binding>
+            <code-binding key="carousel" type="attribute" value="false"
+              onchange="var cb=this.closest('.doc-section').querySelector('.user-view code-binding[key=color]'); e.detail ? cb.setAttribute('carousel','') : cb.removeAttribute('carousel'); cb.dispatchEvent(new CustomEvent('change', {detail: cb.value, bubbles: true, composed: true}))"></code-binding>
           </interactive-code>
 
           <div class="preview-wrapper">
@@ -1215,6 +1217,12 @@ <h3>API - &lt;code-binding&gt;</h3>
                   <td>—</td>
                   <td>Comma-separated options (for <code>select</code> type)</td>
                 </tr>
+                <tr>
+                  <td><code>carousel</code></td>
+                  <td><code>boolean</code></td>
+                  <td><code>false</code></td>
+                  <td>Cycle through options on click instead of dropdown (for <code>select</code> type)</td>
+                </tr>
               </tbody>
             </table>
           </div>
@@ -1271,7 +1279,7 @@ <h3>Binding Types</h3>
                 <tr>
                   <td><code>select</code></td>
                   <td>Option from list</td>
-                  <td>Click toggle (2 options) or dropdown (3+)</td>
+                  <td>Click toggle (2 options), dropdown (3+), or carousel (<code>carousel</code> attribute)</td>
                 </tr>
                 <tr>
                   <td><code>color</code></td>

src/code-binding.element.spec.ts

@@ -456,6 +456,67 @@ describe('CodeBindingElement', () => {
     });
   });
 
+  describe('carousel getter', () => {
+    it('should return false when carousel attribute is not set', () => {
+      expect(element.carousel).toBe(false);
+    });
+
+    it('should return true when carousel attribute is set', () => {
+      element.setAttribute('carousel', '');
+      expect(element.carousel).toBe(true);
+    });
+  });
+
+  describe('previous()', () => {
+    it('should cycle to previous option in select', () => {
+      element.setAttribute('type', 'select');
+      element.setAttribute('options', 'a, b, c');
+      element.setAttribute('value', 'b');
+      document.body.appendChild(element);
+
+      element.previous();
+      expect(element.value).toBe('a');
+
+      document.body.removeChild(element);
+    });
+
+    it('should wrap around to last option when at first', () => {
+      element.setAttribute('type', 'select');
+      element.setAttribute('options', 'a, b, c');
+      element.setAttribute('value', 'a');
+      document.body.appendChild(element);
+
+      element.previous();
+      expect(element.value).toBe('c');
+
+      document.body.removeChild(element);
+    });
+
+    it('should not cycle when disabled', () => {
+      element.setAttribute('type', 'select');
+      element.setAttribute('options', 'a, b, c');
+      element.setAttribute('value', 'b');
+      element.setAttribute('disabled', '');
+      document.body.appendChild(element);
+
+      element.previous();
+      expect(element.value).toBe('b');
+
+      document.body.removeChild(element);
+    });
+
+    it('should do nothing for non-select types', () => {
+      element.setAttribute('type', 'number');
+      element.setAttribute('value', '5');
+      document.body.appendChild(element);
+
+      element.previous();
+      expect(element.value).toBe(5);
+
+      document.body.removeChild(element);
+    });
+  });
+
   describe('change event', () => {
     it('should bubble', () => {
       element.setAttribute('type', 'number');

src/code-binding.element.ts

@@ -42,6 +42,7 @@ export class CodeBindingElement extends HTMLElement {
     const v = this.getAttribute('options');
     return v ? v.split(',').map(s => s.trim()) : [];
   }
+  get carousel(): boolean { return this.hasAttribute('carousel'); }
 
   get value(): any { return this._value; }
   set value(v: any) {
@@ -135,6 +136,19 @@ export class CodeBindingElement extends HTMLElement {
     }
   }
 
+  /** Cycle to previous option (for select carousel) */
+  previous() {
+    if (this._disabled) return;
+    if (this.type === 'select') {
+      const opts = this.options;
+      if (opts.length > 0) {
+        const currentIndex = opts.indexOf(this._value);
+        const prevIndex = (currentIndex - 1 + opts.length) % opts.length;
+        this.value = opts[prevIndex];
+      }
+    }
+  }
+
   /** Increment number value */
   increment() {
     if (this._disabled) return;

src/interactive-code.element.spec.ts

@@ -1512,6 +1512,102 @@ describe('InteractiveCodeElement', () => {
     });
   });
 
+  describe('select carousel mode', () => {
+    it('should render select with carousel attribute as clickable span', async () => {
+      element.innerHTML = `
+        <textarea>\${color}</textarea>
+        <code-binding key="color" type="select" carousel options="red, green, blue" value="red"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const carousel = element.shadowRoot?.querySelector('.inline-select-carousel');
+      expect(carousel).not.toBeNull();
+      expect(carousel?.getAttribute('data-action')).toBe('toggle');
+      // Should NOT render a dropdown
+      const select = element.shadowRoot?.querySelector('select');
+      expect(select).toBeNull();
+    });
+
+    it('should display current value in carousel', async () => {
+      element.innerHTML = `
+        <textarea>\${color}</textarea>
+        <code-binding key="color" type="select" carousel options="red, green, blue" value="green"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const valueSpan = element.shadowRoot?.querySelector('.inline-select-carousel .token-string');
+      expect(valueSpan?.textContent).toBe('green');
+    });
+
+    it('should have role="button" and part="editable" on carousel', async () => {
+      element.innerHTML = `
+        <textarea>\${color}</textarea>
+        <code-binding key="color" type="select" carousel options="red, green, blue" value="red"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const carousel = element.shadowRoot?.querySelector('.inline-select-carousel');
+      expect(carousel?.getAttribute('role')).toBe('button');
+      expect(carousel?.getAttribute('part')).toBe('editable');
+    });
+
+    it('should cycle value on click via toggle action', async () => {
+      element.innerHTML = `
+        <textarea>\${color}</textarea>
+        <code-binding key="color" type="select" carousel options="red, green, blue" value="red"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const binding = element.querySelector('code-binding') as CodeBindingElement;
+      binding.toggle();
+
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      expect(binding.value).toBe('green');
+      const valueSpan = element.shadowRoot?.querySelector('.inline-select-carousel .token-string');
+      expect(valueSpan?.textContent).toBe('green');
+    });
+
+    it('should also work with 2 options when carousel is set', async () => {
+      element.innerHTML = `
+        <textarea>\${mode}</textarea>
+        <code-binding key="mode" type="select" carousel options="on, off" value="on"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      // Should render as carousel, not as toggle
+      const carousel = element.shadowRoot?.querySelector('.inline-select-carousel');
+      expect(carousel).not.toBeNull();
+      const toggle = element.shadowRoot?.querySelector('.inline-select-toggle');
+      expect(toggle).toBeNull();
+    });
+
+    it('should render as dropdown when carousel is not set (3+ options)', async () => {
+      element.innerHTML = `
+        <textarea>\${color}</textarea>
+        <code-binding key="color" type="select" options="red, green, blue" value="red"></code-binding>
+      `;
+      document.body.appendChild(element);
+
+      await new Promise(resolve => setTimeout(resolve, 150));
+
+      const select = element.shadowRoot?.querySelector('select');
+      expect(select).not.toBeNull();
+      const carousel = element.shadowRoot?.querySelector('.inline-select-carousel');
+      expect(carousel).toBeNull();
+    });
+  });
+
   describe('editable zone CSS custom properties', () => {
     it('should use --code-editable-text-decoration in CSS', () => {
       document.body.appendChild(element);

src/interactive-code.element.ts

@@ -493,6 +493,12 @@ export class InteractiveCodeElement extends HTMLElement {
     } else if (event.key === 'ArrowDown' && binding.type === 'number') {
       event.preventDefault();
       binding.decrement();
+    } else if (event.key === 'ArrowUp' && binding.type === 'select' && binding.carousel) {
+      event.preventDefault();
+      binding.toggle();
+    } else if (event.key === 'ArrowDown' && binding.type === 'select' && binding.carousel) {
+      event.preventDefault();
+      binding.previous();
     }
   }
 
@@ -797,6 +803,11 @@ export class InteractiveCodeElement extends HTMLElement {
 
       case 'select': {
         const options = binding.options;
+        // Carousel mode: click to cycle through all options
+        if (binding.carousel) {
+          return `<span class="inline-control inline-select-carousel${disabledClass}" part="editable" data-binding="${escKey}" data-action="toggle" role="button" tabindex="${tabindex}" aria-label="Cycle ${escKey}: ${escValue}">` +
+            `<span class="token-string">${escValue}</span></span>`;
+        }
         // For 2 options, render as toggle (like boolean)
         if (options.length === 2) {
           return `<span class="inline-control inline-select-toggle${disabledClass}" part="editable" data-binding="${escKey}" data-action="toggle" role="button" tabindex="${tabindex}" aria-label="Toggle ${escKey}: ${escValue}">` +
@@ -1127,7 +1138,8 @@ export class InteractiveCodeElement extends HTMLElement {
       .inline-boolean,
       .inline-number,
       .inline-string,
-      .inline-select-toggle {
+      .inline-select-toggle,
+      .inline-select-carousel {
         padding: var(--code-editable-padding, 0 4px);
         position: relative;
       }

types/code-binding.element.d.ts

@@ -26,6 +26,7 @@ export declare class CodeBindingElement extends HTMLElement {
     get max(): number | undefined;
     get step(): number | undefined;
     get options(): string[];
+    get carousel(): boolean;
     get value(): any;
     set value(v: any);
     get disabled(): boolean;
@@ -36,6 +37,8 @@ export declare class CodeBindingElement extends HTMLElement {
     private emitChange;
     /** Toggle boolean/comment/attribute value or cycle through select options */
     toggle(): void;
+    /** Cycle to previous option (for select carousel) */
+    previous(): void;
     /** Increment number value */
     increment(): void;
     /** Decrement number value */