<section class="demo-section">
  <h2>Data patterns</h2>

  <h3>Editable string</h3>
  <p>
    <span id="demo-editable-string">Click the pencil to edit this text.</span>
  </p>
  <p>
    <span id="demo-editable-textarea">Multi-line editable string.</span>
  </p>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      if (window.VMKUIKit?.editableString) {
        window.VMKUIKit.editableString(document.getElementById("demo-editable-string"));
        window.VMKUIKit.editableString(document.getElementById("demo-editable-textarea"), true);
      }
    });
  </script>

  <h3>Input clear</h3>
  <div class="input-group" style="max-width: 320px">
    <input type="text" class="input-group-input" placeholder="Search...">
    <button type="button" class="input-group-action" data-input-clear aria-label="Clear search">
      <i class="ph ph-x"></i>
    </button>
  </div>

  <h3>Date picker trigger</h3>
  <div class="form-group" style="max-width: 320px;">
    <input type="date" class="input input-date" value="2026-04-23" data-date-picker>
  </div>

</section>