stimeo-ui 0.6.0 → 0.8.0

package/dist/inspector/examples.json

@@ -43,11 +43,11 @@
     },
     "stimeo--carousel": {
       "file": "examples/carousel/_demo.html.erb",
-      "source": "<%# Markup for the carousel demo.\n    The library handles slide advance, autoplay, syncing the current slide's\n    data-state / hidden, and the pickers' (tabs) aria-selected and roving.\n    Autoplay deliberately demonstrates WCAG 2.2.2: it pauses while the pointer hovers\n    and hard-stops when keyboard focus enters the carousel (it does not auto-resume on\n    focus out — press play). This is intentional and is spelled out in the on-screen\n    note below the carousel. Transitions and layout are the consumer's CSS. %>\n<section\n  class=\"carousel\"\n  data-controller=\"stimeo--carousel\"\n  aria-roledescription=\"carousel\"\n  aria-label=\"<%= t(\"components.carousel.demo.label\") %>\"\n  data-stimeo--carousel-autoplay-value=\"false\"\n  data-stimeo--carousel-interval-value=\"2500\"\n  data-stimeo--carousel-loop-value=\"true\"\n  data-action=\"\n    mouseenter->stimeo--carousel#pause\n    mouseleave->stimeo--carousel#resume\n    focusin->stimeo--carousel#pause\n    focusout->stimeo--carousel#resume\">\n  <div class=\"carousel__bar\">\n    <button\n      type=\"button\"\n      class=\"carousel__play\"\n      aria-pressed=\"false\"\n      aria-label=\"<%= t(\"components.carousel.demo.autoplay\") %>\"\n      data-stimeo--carousel-target=\"playToggle\"\n      data-action=\"click->stimeo--carousel#togglePlay\">\n      <%# The library toggles aria-pressed; demo.css swaps the glyph off it so the\n          control visibly reflects play (❚❚) vs. paused (▶). The icons are decorative;\n          the accessible name comes from aria-label above. %>\n      <span class=\"carousel__play-icon carousel__play-icon--play\" aria-hidden=\"true\">▶</span>\n      <span class=\"carousel__play-icon carousel__play-icon--pause\" aria-hidden=\"true\">❚❚</span>\n    </button>\n    <p\n      class=\"carousel__status\"\n      data-carousel-status\n      data-template=\"<%= t(\"components.carousel.demo.status_template\") %>\"\n      data-playing-suffix=\"<%= t(\"components.carousel.demo.status_playing\") %>\"\n      aria-live=\"polite\"></p>\n  </div>\n\n  <div class=\"carousel__viewport\" data-stimeo--carousel-target=\"viewport\">\n    <% t(\"components.carousel.demo.slides\").each_with_index do |slide, i| %>\n      <div\n        id=\"carousel-slide-<%= i + 1 %>\"\n        class=\"carousel__slide\"\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        aria-label=\"<%= \"#{i + 1} of #{t('components.carousel.demo.slides').size}\" %>\"\n        aria-labelledby=\"carousel-dot-<%= i + 1 %>\"\n        data-stimeo--carousel-target=\"slide\"\n        <%= \"hidden\" if i.positive? %>>\n        <h3 class=\"carousel__title\"><%= slide[:title] %></h3>\n        <p><%= slide[:body] %></p>\n      </div>\n    <% end %>\n  </div>\n\n  <div class=\"carousel__nav\">\n    <button type=\"button\" class=\"carousel__arrow\"\n      aria-label=\"<%= t(\"components.carousel.demo.prev\") %>\"\n      data-stimeo--carousel-target=\"prev\"\n      data-action=\"click->stimeo--carousel#prev\">‹</button>\n    <button type=\"button\" class=\"carousel__arrow\"\n      aria-label=\"<%= t(\"components.carousel.demo.next\") %>\"\n      data-stimeo--carousel-target=\"next\"\n      data-action=\"click->stimeo--carousel#next\">›</button>\n  </div>\n\n  <div class=\"carousel__dots\" role=\"tablist\"\n    aria-label=\"<%= t(\"components.carousel.demo.tablist\") %>\">\n    <% t(\"components.carousel.demo.slides\").each_with_index do |slide, i| %>\n      <button\n        id=\"carousel-dot-<%= i + 1 %>\"\n        class=\"carousel__dot\"\n        role=\"tab\"\n        aria-selected=\"<%= i.zero? %>\"\n        aria-controls=\"carousel-slide-<%= i + 1 %>\"\n        aria-label=\"<%= slide[:title] %>\"\n        tabindex=\"<%= i.zero? ? 0 : -1 %>\"\n        data-stimeo--carousel-target=\"picker\"\n        data-action=\"click->stimeo--carousel#goto\n                     keydown->stimeo--carousel#onPickerKeydown\"></button>\n    <% end %>\n  </div>\n</section>\n\n<%# On-screen explanation of the deliberate autoplay accessibility behavior, so the\n    pause-on-hover / hard-stop-on-focus is understood as intentional (WCAG 2.2.2), not a bug.\n    Kept outside the <section> so reading it doesn't itself pause the carousel. %>\n<p class=\"carousel__hint\"><%= t(\"components.carousel.demo.hint\") %></p>\n"
+      "source": "<%# Markup for the carousel demo.\n    The library handles slide advance, autoplay, syncing the current slide's\n    data-state / hidden / inert, the pickers' (tabs) aria-selected and roving, the\n    aria-disabled of controls that cannot be reached, and the viewport's aria-live.\n    There is no data-action anywhere: the controller delegates clicks, picker keys,\n    hover, and focus from its own element, so the markup only declares targets.\n    Autoplay deliberately demonstrates WCAG 2.2.2: the play toggle is what stops it for\n    good, while hovering, focusing, or backgrounding the tab only suspends it until that\n    condition ends. This is spelled out in the on-screen note below the carousel.\n    Transitions and layout are the consumer's CSS. %>\n<section\n  class=\"carousel\"\n  data-controller=\"stimeo--carousel\"\n  aria-roledescription=\"carousel\"\n  aria-label=\"<%= t(\"components.carousel.demo.label\") %>\"\n  data-stimeo--carousel-autoplay-value=\"false\"\n  data-stimeo--carousel-interval-value=\"2500\"\n  data-stimeo--carousel-loop-value=\"true\">\n  <div class=\"carousel__bar\">\n    <button\n      type=\"button\"\n      class=\"carousel__play\"\n      aria-label=\"<%= t(\"components.carousel.demo.autoplay\") %>\"\n      data-stimeo--carousel-target=\"playToggle\">\n      <%# The library owns aria-pressed (the autoplay Value is the intent it mirrors);\n          demo.css swaps the glyph off it so the control visibly reflects play (❚❚) vs.\n          paused (▶). The icons are decorative; the accessible name comes from aria-label\n          above. %>\n      <span class=\"carousel__play-icon carousel__play-icon--play\" aria-hidden=\"true\">▶</span>\n      <span class=\"carousel__play-icon carousel__play-icon--pause\" aria-hidden=\"true\">❚❚</span>\n    </button>\n    <%# A visual read-out only. The library makes the viewport the live region, so a\n        second one here would make a screen reader announce the change twice. %>\n    <p\n      class=\"carousel__status\"\n      data-carousel-status\n      data-template=\"<%= t(\"components.carousel.demo.status_template\") %>\"\n      data-playing-suffix=\"<%= t(\"components.carousel.demo.status_playing\") %>\"></p>\n  </div>\n\n  <div class=\"carousel__viewport\" data-stimeo--carousel-target=\"viewport\">\n    <% t(\"components.carousel.demo.slides\").each_with_index do |slide, i| %>\n      <div\n        id=\"carousel-slide-<%= i + 1 %>\"\n        class=\"carousel__slide\"\n        role=\"tabpanel\"\n        aria-roledescription=\"slide\"\n        aria-label=\"<%= \"#{i + 1} of #{t('components.carousel.demo.slides').size}\" %>\"\n        aria-labelledby=\"carousel-dot-<%= i + 1 %>\"\n        data-stimeo--carousel-target=\"slide\"\n        <%= \"hidden inert\" if i.positive? %>>\n        <h3 class=\"carousel__title\"><%= slide[:title] %></h3>\n        <p><%= slide[:body] %></p>\n      </div>\n    <% end %>\n  </div>\n\n  <div class=\"carousel__nav\">\n    <button type=\"button\" class=\"carousel__arrow\"\n      aria-label=\"<%= t(\"components.carousel.demo.prev\") %>\"\n      data-stimeo--carousel-target=\"prev\">‹</button>\n    <button type=\"button\" class=\"carousel__arrow\"\n      aria-label=\"<%= t(\"components.carousel.demo.next\") %>\"\n      data-stimeo--carousel-target=\"next\">›</button>\n  </div>\n\n  <div class=\"carousel__dots\" role=\"tablist\"\n    aria-label=\"<%= t(\"components.carousel.demo.tablist\") %>\">\n    <% t(\"components.carousel.demo.slides\").each_with_index do |slide, i| %>\n      <button\n        id=\"carousel-dot-<%= i + 1 %>\"\n        class=\"carousel__dot\"\n        role=\"tab\"\n        aria-selected=\"<%= i.zero? %>\"\n        aria-controls=\"carousel-slide-<%= i + 1 %>\"\n        aria-label=\"<%= slide[:title] %>\"\n        tabindex=\"<%= i.zero? ? 0 : -1 %>\"\n        data-stimeo--carousel-target=\"picker\"></button>\n    <% end %>\n  </div>\n</section>\n\n<%# On-screen explanation of the deliberate autoplay accessibility behavior, so the\n    pause-on-hover / hard-stop-on-focus is understood as intentional (WCAG 2.2.2), not a bug.\n    Kept outside the <section> so reading it doesn't itself pause the carousel. %>\n<p class=\"carousel__hint\"><%= t(\"components.carousel.demo.hint\") %></p>\n"
     },
     "stimeo--character-counter": {
       "file": "examples/character_counter/_demo.html.erb",
-      "source": "<%# Character counter demo: a textarea whose remaining count is shown beneath it.\n    The controller writes the count into the output (an aria-live=\"polite\" region),\n    toggles data-near-limit / data-over-limit on the root, and sets aria-invalid on the\n    field past the max. This demo styles those state hooks; the library only updates the\n    count text and the hooks — no consumer JS is needed (it reacts to input on its own). %>\n<div class=\"character-counter-demo\">\n  <label class=\"character-counter-demo__label\" for=\"cc-message\">\n    <%= t(\"components.character_counter.demo.label\") %>\n  </label>\n  <div\n    class=\"character-counter\"\n    data-controller=\"stimeo--character-counter\"\n    data-stimeo--character-counter-max-value=\"140\"\n    data-stimeo--character-counter-warn-at-value=\"20\">\n    <textarea\n      id=\"cc-message\"\n      class=\"character-counter__input\"\n      rows=\"3\"\n      data-stimeo--character-counter-target=\"input\"\n      aria-describedby=\"cc-message-count\"\n      placeholder=\"<%= t('components.character_counter.demo.placeholder') %>\"></textarea>\n    <span\n      id=\"cc-message-count\"\n      class=\"character-counter__output\"\n      data-stimeo--character-counter-target=\"output\"\n      aria-live=\"polite\"></span>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the character-counter demo. The visible output updates on every\n    keystroke, while the settled remaining count is debounced into the shared\n    stimeo--announcer seated below. This demo's CSS styles the root's near/over\n    hooks and the over-limit aria-invalid; watching the field needs no consumer\n    JavaScript. %>\n<% announcement = t(\"components.character_counter.demo.announcement\") %>\n<div class=\"character-counter-demo\">\n  <label class=\"character-counter-demo__label\" for=\"cc-message\">\n    <%= t(\"components.character_counter.demo.label\") %>\n  </label>\n  <div\n    class=\"character-counter\"\n    data-controller=\"stimeo--character-counter\"\n    data-stimeo--character-counter-max-value=\"140\"\n    data-stimeo--character-counter-warn-at-value=\"20\"\n    data-stimeo--character-counter-announce-text-value=\"<%= announcement %>\">\n    <textarea\n      id=\"cc-message\"\n      class=\"character-counter__input\"\n      rows=\"3\"\n      data-stimeo--character-counter-target=\"input\"\n      aria-describedby=\"cc-message-count\"\n      placeholder=\"<%= t('components.character_counter.demo.placeholder') %>\"></textarea>\n    <span\n      id=\"cc-message-count\"\n      class=\"character-counter__output\"\n      data-stimeo--character-counter-target=\"output\"></span>\n    <div data-controller=\"stimeo--announcer\">\n      <div class=\"visually-hidden\"\n           data-stimeo--announcer-target=\"polite\"\n           aria-live=\"polite\"\n           aria-atomic=\"true\"></div>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--checkbox": {
       "file": "examples/checkbox/_demo.html.erb",
@@ -111,11 +111,11 @@
     },
     "stimeo--direct-upload": {
       "file": "examples/direct_upload/_demo.html.erb",
-      "source": "<%# Direct upload demo: there is no server, so demo.js fires the ActiveStorage\n    direct-upload:* events to drive the rows. The library clones the row template per\n    file, updates aria-valuenow / data-upload-state / the --stimeo--upload-progress\n    var, and announces completion into the status live region. This demo styles the\n    bars; the sr-only status carries the announcement. %>\n<div class=\"direct-upload-demo\">\n  <button type=\"button\" class=\"demo-trigger\" data-direct-upload-start>\n    <%= t(\"components.direct_upload.demo.start\") %>\n  </button>\n  <div\n    class=\"direct-upload\"\n    data-controller=\"stimeo--direct-upload\"\n    data-stimeo--direct-upload-done-label-value=\"<%= t('components.direct_upload.demo.done') %>\"\n    data-stimeo--direct-upload-error-label-value=\"<%= t('components.direct_upload.demo.error') %>\">\n    <div class=\"direct-upload__list\" data-stimeo--direct-upload-target=\"list\"></div>\n    <template data-stimeo--direct-upload-target=\"row\">\n      <div class=\"direct-upload__row\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <span class=\"direct-upload__name\" data-field=\"name\"></span>\n        <span class=\"direct-upload__track\"><span class=\"direct-upload__bar\"></span></span>\n        <span class=\"direct-upload__percent\" data-field=\"percent\"></span>\n      </div>\n    </template>\n    <span class=\"visually-hidden\" data-stimeo--direct-upload-target=\"status\"\n          aria-live=\"polite\"></span>\n  </div>\n</div>\n"
+      "source": "<%# Direct upload demo: there is no server, so demo.js fires the ActiveStorage\n    direct-upload:* events to drive the rows — including one upload that fails\n    (error followed by end, the order ActiveStorage really uses). The library\n    clones the row template per file, updates aria-valuenow / aria-valuetext /\n    data-upload-state / the --stimeo--upload-progress var, and hands completion\n    and failure announcements to the shared announcer below. This demo styles\n    the bars. %>\n<% done_text = t(\"components.direct_upload.demo.done\") %>\n<% error_text = t(\"components.direct_upload.demo.error\") %>\n<div class=\"direct-upload-demo\">\n  <button type=\"button\" class=\"demo-trigger\" data-direct-upload-start>\n    <%= t(\"components.direct_upload.demo.start\") %>\n  </button>\n  <div\n    class=\"direct-upload\"\n    data-controller=\"stimeo--direct-upload\"\n    data-stimeo--direct-upload-announce-done-text-value=\"<%= done_text %>\"\n    data-stimeo--direct-upload-announce-error-text-value=\"<%= error_text %>\">\n    <div class=\"direct-upload__list\" data-stimeo--direct-upload-target=\"list\"></div>\n    <template data-stimeo--direct-upload-target=\"row\">\n      <div class=\"direct-upload__row\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n        <span class=\"direct-upload__name\" data-field=\"name\"></span>\n        <span class=\"direct-upload__track\"><span class=\"direct-upload__bar\"></span></span>\n        <span class=\"direct-upload__percent\" data-field=\"percent\"></span>\n      </div>\n    </template>\n  </div>\n  <%# Shared announcer: completion and failure are the transitions worth reading;\n      per-tick progress stays on each row's aria-valuenow. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\"\n         data-stimeo--announcer-target=\"polite\" aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
     },
     "stimeo--dirty-form": {
       "file": "examples/dirty_form/_demo.html.erb",
-      "source": "<%# Dirty-form demo: edit the field and the form gets data-dirty (shown as a badge).\n    While dirty, leaving is guarded (beforeunload + Turbo turbo:before-visit → a native\n    confirm). \"Save\" calls the markClean action to clear the dirty state (this catalog\n    has no server, so it stands in for a successful save). The library owns the\n    data-dirty hook and the guards; this demo only styles the badge. %>\n<div class=\"dirty-form-demo\">\n  <form class=\"dirty-form\" data-controller=\"stimeo--dirty-form\">\n    <label class=\"dirty-form__field\">\n      <span><%= t(\"components.dirty_form.demo.label\") %></span>\n      <input type=\"text\" name=\"title\" value=\"<%= t('components.dirty_form.demo.value') %>\">\n    </label>\n    <div class=\"dirty-form__bar\">\n      <span class=\"dirty-form__badge\"><%= t(\"components.dirty_form.demo.unsaved\") %></span>\n      <button type=\"button\" class=\"demo-trigger\" data-action=\"stimeo--dirty-form#markClean\">\n        <%= t(\"components.dirty_form.demo.save\") %>\n      </button>\n    </div>\n  </form>\n</div>\n"
+      "source": "<%# Dirty-form demo: edit either field and its form gets data-dirty (shown as a badge).\n    When both forms are dirty, one Turbo visit dispatches both guard events and opens\n    one native confirm using the first eligible form in live DOM order. \"Save\" calls\n    markClean for that form; this catalog has no server, so it stands in for a successful\n    save. The library owns data-dirty and navigation coordination; the demo only styles\n    the visible state. %>\n<div class=\"dirty-form-demo\">\n  <form\n    class=\"dirty-form\"\n    data-controller=\"stimeo--dirty-form\"\n    data-stimeo--dirty-form-message-value=\"<%= t('components.dirty_form.demo.first_message') %>\"\n    aria-labelledby=\"dirty-form-first-title\"\n  >\n    <h3 id=\"dirty-form-first-title\" class=\"dirty-form__title\">\n      <%= t(\"components.dirty_form.demo.first_title\") %>\n    </h3>\n    <label class=\"dirty-form__field\">\n      <span><%= t(\"components.dirty_form.demo.first_label\") %></span>\n      <input type=\"text\" name=\"title\" value=\"<%= t('components.dirty_form.demo.first_value') %>\">\n    </label>\n    <div class=\"dirty-form__bar\">\n      <span class=\"dirty-form__badge\"><%= t(\"components.dirty_form.demo.unsaved\") %></span>\n      <button type=\"button\" class=\"demo-trigger\" data-action=\"stimeo--dirty-form#markClean\">\n        <%= t(\"components.dirty_form.demo.save\") %>\n      </button>\n    </div>\n  </form>\n\n  <form\n    class=\"dirty-form\"\n    data-controller=\"stimeo--dirty-form\"\n    data-stimeo--dirty-form-message-value=\"<%= t('components.dirty_form.demo.second_message') %>\"\n    aria-labelledby=\"dirty-form-second-title\"\n  >\n    <h3 id=\"dirty-form-second-title\" class=\"dirty-form__title\">\n      <%= t(\"components.dirty_form.demo.second_title\") %>\n    </h3>\n    <label class=\"dirty-form__field\">\n      <span><%= t(\"components.dirty_form.demo.second_label\") %></span>\n      <input type=\"text\" name=\"summary\" value=\"<%= t('components.dirty_form.demo.second_value') %>\">\n    </label>\n    <div class=\"dirty-form__bar\">\n      <span class=\"dirty-form__badge\"><%= t(\"components.dirty_form.demo.unsaved\") %></span>\n      <button type=\"button\" class=\"demo-trigger\" data-action=\"stimeo--dirty-form#markClean\">\n        <%= t(\"components.dirty_form.demo.save\") %>\n      </button>\n    </div>\n  </form>\n</div>\n"
     },
     "stimeo--dismissible": {
       "file": "examples/dismissible/_demo.html.erb",
@@ -139,7 +139,7 @@
     },
     "stimeo--file-dropzone": {
       "file": "examples/file_dropzone/_demo.html.erb",
-      "source": "<%# Markup for the file-dropzone (file drag & drop / image preview) demo.\n    Click or keyboard launches the native file input, and drag & drop also adds files.\n    It validates accept / maxSize / count and shows image thumbnails via objectURL.\n    The library handles the drop bridge, validation, preview create/revoke, focus\n    handoff on removal, and live announcements. Drag & drop is only an aid — selection\n    is always possible via click / keyboard. %>\n<div class=\"file-dropzone\" data-controller=\"stimeo--file-dropzone\"\n     data-stimeo--file-dropzone-max-size-value=\"5242880\"\n     data-stimeo--file-dropzone-max-files-value=\"4\"\n     data-stimeo--file-dropzone-drag-label-value=\"<%= t(\n       'components.file_dropzone.demo.drag_label'\n     ) %>\">\n  <div\n    class=\"file-dropzone__zone\"\n    data-stimeo--file-dropzone-target=\"zone\"\n    data-action=\"dragover->stimeo--file-dropzone#onDragOver\n                 dragleave->stimeo--file-dropzone#onDragLeave\n                 drop->stimeo--file-dropzone#onDrop\">\n    <button\n      type=\"button\"\n      class=\"demo-trigger file-dropzone__trigger\"\n      data-stimeo--file-dropzone-target=\"trigger\"\n      data-action=\"click->stimeo--file-dropzone#openDialog\">\n      <%= t(\"components.file_dropzone.demo.trigger\") %>\n    </button>\n    <input\n      type=\"file\"\n      accept=\"image/*\"\n      multiple\n      aria-label=\"<%= t('components.file_dropzone.demo.input_label') %>\"\n      class=\"file-dropzone__input visually-hidden\"\n      data-stimeo--file-dropzone-target=\"input\"\n      data-action=\"change->stimeo--file-dropzone#onChange\" />\n  </div>\n\n  <ul\n    class=\"file-dropzone__list\"\n    aria-label=\"<%= t('components.file_dropzone.demo.list_label') %>\"\n    data-stimeo--file-dropzone-target=\"list\"></ul>\n\n  <%# Demo-only: the library accepts only images within the limits (5 MB / 4 files) and\n      fires stimeo--file-dropzone:reject for the rest — accepted images get a thumbnail\n      preview. Surface the reason visibly so a rejected file (e.g. an over-size photo) is\n      not mistaken for a broken preview. demo.js fills this from the reject event; the\n      reason copy is localized here. %>\n  <p class=\"file-dropzone__error\"\n     data-file-dropzone-error\n     hidden\n     data-reason-type=\"<%= t('components.file_dropzone.demo.reject_type') %>\"\n     data-reason-size=\"<%= t('components.file_dropzone.demo.reject_size') %>\"\n     data-reason-count=\"<%= t('components.file_dropzone.demo.reject_count') %>\"></p>\n\n  <span\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"file-dropzone__status visually-hidden\"\n    data-stimeo--file-dropzone-target=\"status\"></span>\n\n  <template data-stimeo--file-dropzone-target=\"itemTemplate\">\n    <li class=\"file-dropzone__item\" data-stimeo--file-dropzone-target=\"item\">\n      <img class=\"file-dropzone__thumb\" data-file-dropzone-slot=\"thumb\" alt=\"\" hidden />\n      <span class=\"file-dropzone__name\" data-file-dropzone-slot=\"name\"></span>\n      <%# Removal is handled by a delegated listener on the list container, so it\n          works instantly without waiting on Stimulus wiring a data-action onto the\n          dynamically-added button. %>\n      <button\n        type=\"button\"\n        class=\"file-dropzone__remove\">\n        <%= t(\"components.file_dropzone.demo.remove\") %>\n      </button>\n    </li>\n  </template>\n</div>\n"
+      "source": "<%# Markup for the file-dropzone (file drag & drop / image preview) demo.\n    Click or keyboard launches the native file input, and drag & drop also adds files.\n    It validates accept / maxSize / duplicates / count and shows image thumbnails via\n    objectURL. The library handles the drop bridge, validation, preview create/revoke,\n    focus handoff on removal, mirroring the accepted files back onto the native input,\n    and the announcements read by the shared announcer seated below. Drag & drop is\n    only an aid — selection is always possible via click / keyboard. %>\n<div class=\"file-dropzone\" data-controller=\"stimeo--file-dropzone\"\n     data-stimeo--file-dropzone-max-size-value=\"5242880\"\n     data-stimeo--file-dropzone-max-files-value=\"4\"\n     data-stimeo--file-dropzone-announce-drag-text-value=\"<%= t(\n       'components.file_dropzone.demo.drag_label'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-added-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_added'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-removed-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_removed'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-rejected-type-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_reject_type'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-rejected-size-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_reject_size'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-rejected-duplicate-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_reject_duplicate'\n     ) %>\"\n     data-stimeo--file-dropzone-announce-rejected-count-text-value=\"<%= t(\n       'components.file_dropzone.demo.announce_reject_count'\n     ) %>\">\n  <div\n    class=\"file-dropzone__zone\"\n    data-stimeo--file-dropzone-target=\"zone\"\n    data-action=\"dragover->stimeo--file-dropzone#onDragOver\n                 dragleave->stimeo--file-dropzone#onDragLeave\n                 drop->stimeo--file-dropzone#onDrop\">\n    <button\n      type=\"button\"\n      class=\"demo-trigger file-dropzone__trigger\"\n      data-stimeo--file-dropzone-target=\"trigger\"\n      data-action=\"click->stimeo--file-dropzone#openDialog\">\n      <%= t(\"components.file_dropzone.demo.trigger\") %>\n    </button>\n    <input\n      type=\"file\"\n      accept=\"image/*\"\n      multiple\n      aria-label=\"<%= t('components.file_dropzone.demo.input_label') %>\"\n      class=\"file-dropzone__input visually-hidden\"\n      data-stimeo--file-dropzone-target=\"input\"\n      data-action=\"change->stimeo--file-dropzone#onChange\" />\n  </div>\n\n  <ul\n    class=\"file-dropzone__list\"\n    aria-label=\"<%= t('components.file_dropzone.demo.list_label') %>\"\n    data-stimeo--file-dropzone-target=\"list\"></ul>\n\n  <%# Demo-only: the library accepts only unique images within the limits (5 MB / 4 files)\n      and fires stimeo--file-dropzone:reject for the rest — accepted images get a thumbnail\n      preview. The reason is already spoken by the shared announcer; this repeats it on\n      screen so a rejected file (e.g. an over-size photo) is not mistaken for a broken\n      preview. demo.js fills this from the reject event; the reason copy is localized here. %>\n  <p class=\"file-dropzone__error\"\n     data-file-dropzone-error\n     hidden\n     data-reason-type=\"<%= t('components.file_dropzone.demo.reject_type') %>\"\n     data-reason-size=\"<%= t('components.file_dropzone.demo.reject_size') %>\"\n     data-reason-duplicate=\"<%= t('components.file_dropzone.demo.reject_duplicate') %>\"\n     data-reason-count=\"<%= t('components.file_dropzone.demo.reject_count') %>\"></p>\n\n  <template data-stimeo--file-dropzone-target=\"itemTemplate\">\n    <li class=\"file-dropzone__item\" data-stimeo--file-dropzone-target=\"item\">\n      <img class=\"file-dropzone__thumb\" data-stimeo--file-dropzone-target=\"thumb\" alt=\"\" hidden />\n      <span class=\"file-dropzone__name\" data-stimeo--file-dropzone-target=\"name\"></span>\n      <%# Removal is handled by a delegated listener on the list container, so it\n          works instantly without waiting on Stimulus wiring a data-action onto the\n          dynamically-added button. The library keeps this aria-label and only\n          expands {name}, so the accessible name stays in the page's language. %>\n      <button\n        type=\"button\"\n        class=\"file-dropzone__remove\"\n        aria-label=\"<%= t('components.file_dropzone.demo.remove_label') %>\"\n        data-stimeo--file-dropzone-target=\"remove\">\n        <%= t(\"components.file_dropzone.demo.remove\") %>\n      </button>\n    </li>\n  </template>\n\n  <%# Shared announcer: additions, rejections, removals, and the drag affordance are\n      the transitions worth reading. The dropzone owns no live region of its own. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\"\n         data-stimeo--announcer-target=\"polite\"\n         aria-live=\"polite\"\n         aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
     },
     "stimeo--filter": {
       "file": "examples/filter/_demo.html.erb",
@@ -155,11 +155,11 @@
     },
     "stimeo--form-field": {
       "file": "examples/form_field/_demo.html.erb",
-      "source": "<%# Markup for the form-field demo.\n    Associates label / description / error with the control via aria-describedby /\n    aria-invalid / aria-errormessage. Showing/clearing the error uses the action\n    parameter (message) and #clearError. The look (e.g. the invalid border) switches\n    on data-stimeo--form-field-invalid and aria-invalid. %>\n<div class=\"form-field-demo\" data-controller=\"stimeo--form-field\"\n     data-stimeo--form-field-focus-on-error-value=\"true\">\n  <label class=\"form-field-demo__label\" for=\"ff-email\">\n    <%= t(\"components.form_field.demo.label\") %>\n  </label>\n\n  <input class=\"form-field-demo__control\" id=\"ff-email\" type=\"email\" aria-invalid=\"false\"\n         placeholder=\"<%= t('components.form_field.demo.placeholder') %>\"\n         data-stimeo--form-field-target=\"control\" />\n\n  <%# Helper description. On connect it's assigned an id and linked into the\n      control's aria-describedby. %>\n  <p class=\"form-field-demo__description\" data-stimeo--form-field-target=\"description\">\n    <%= t(\"components.form_field.demo.hint\") %>\n  </p>\n\n  <%# Note clarifying the demo's intent (this part only wires up the error state;\n      it doesn't validate or clear the value). %>\n  <p class=\"form-field-demo__note\"><%= t(\"components.form_field.demo.note\") %></p>\n\n  <%# Error region. role=\"alert\" so it's announced without moving focus. Starts hidden. %>\n  <p class=\"form-field-demo__error\" role=\"alert\" hidden\n     data-stimeo--form-field-target=\"error\"></p>\n\n  <div class=\"form-field-demo__actions\">\n    <%# setError reads the message from the action parameter (no consumer JS needed). %>\n    <button type=\"button\" class=\"demo-trigger\"\n            data-stimeo--form-field-message-param=\"<%= t('components.form_field.demo.error') %>\"\n            data-action=\"click->stimeo--form-field#setError\">\n      <%= t(\"components.form_field.demo.validate\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\"\n            data-action=\"click->stimeo--form-field#clearError\">\n      <%= t(\"components.form_field.demo.clear\") %>\n    </button>\n  </div>\n\n  <%# Helper region that subscribes to the validate event to show status (updated by demo.js). %>\n  <p class=\"form-field-demo__status\" id=\"ff-status\" aria-live=\"polite\"\n     data-valid-text=\"<%= t('components.form_field.demo.valid') %>\"></p>\n</div>\n"
+      "source": "<%# Markup for the form-field demo.\n    Associates label / description / error with the control via aria-describedby /\n    aria-invalid / aria-errormessage. Showing/clearing the error uses the action\n    parameter (message) and #clearError. The look switches on\n    data-stimeo--form-field-invalid and aria-invalid. %>\n<div class=\"form-field-demo\" data-controller=\"stimeo--form-field\"\n     data-stimeo--form-field-focus-on-error-value=\"true\">\n  <label class=\"form-field-demo__label\" for=\"ff-email\">\n    <%= t(\"components.form_field.demo.label\") %>\n  </label>\n\n  <input class=\"form-field-demo__control\" id=\"ff-email\" type=\"email\" aria-invalid=\"false\"\n         placeholder=\"<%= t('components.form_field.demo.placeholder') %>\"\n         data-stimeo--form-field-target=\"control\" />\n\n  <%# Helper description. It is assigned an id and linked into the control's\n      aria-describedby. %>\n  <p class=\"form-field-demo__description\" data-stimeo--form-field-target=\"description\">\n    <%= t(\"components.form_field.demo.hint\") %>\n  </p>\n\n  <%# Note clarifying the demo's intent (this part only wires up the error state;\n      it doesn't validate or clear the value). %>\n  <p class=\"form-field-demo__note\"><%= t(\"components.form_field.demo.note\") %></p>\n\n  <%# Visual error region. Starts hidden; speech is delegated to the shared\n      announcer seated below. %>\n  <p class=\"form-field-demo__error\" hidden\n     data-stimeo--form-field-target=\"error\"></p>\n\n  <div class=\"form-field-demo__actions\">\n    <%# setError reads the message from the action parameter (no consumer JS needed). %>\n    <button type=\"button\" class=\"demo-trigger\"\n            data-stimeo--form-field-message-param=\"<%= t('components.form_field.demo.error') %>\"\n            data-action=\"click->stimeo--form-field#setError\">\n      <%= t(\"components.form_field.demo.validate\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\"\n            data-action=\"click->stimeo--form-field#clearError\">\n      <%= t(\"components.form_field.demo.clear\") %>\n    </button>\n  </div>\n\n  <%# Helper region that subscribes to the validate event and shows the valid\n      state only (updated by demo.js). %>\n  <p class=\"form-field-demo__status\" id=\"ff-status\" aria-live=\"polite\"\n     data-valid-text=\"<%= t('components.form_field.demo.valid') %>\"></p>\n\n  <%# Assertive announcement target. It is seated in the accessibility tree ahead\n      of the first error, which is what makes the message observable. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\" data-stimeo--announcer-target=\"assertive\"\n         aria-live=\"assertive\" aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
     },
     "stimeo--form-validation": {
       "file": "examples/form_validation/_demo.html.erb",
-      "source": "<%# Markup for the form-validation demo.\n    stimeo--form-validation orchestrates WHEN native constraint validation runs\n    (submit / blur / change / input) and routes each control's validationMessage\n    into its stimeo--form-field error region — the ARIA wiring stays in form-field.\n    Rules are plain markup attributes (required, type=\"email\"); message text comes\n    from the browser. The plan listbox joins through a validatable mirror:\n    <input type=\"text\" hidden required> — the hidden ATTRIBUTE, not type=\"hidden\",\n    which is barred from constraint validation. The authored novalidate keeps the\n    no-JS fallback graceful (the controller preserves it). Valid submissions are\n    kept on the page by demo.js so the catalog can show a success status. %>\n<form class=\"form-validation-demo\" action=\"#\" method=\"get\" novalidate\n      data-controller=\"stimeo--form-validation\"\n      data-stimeo--form-validation-stimeo--form-field-outlet=\".form-validation-demo__field\">\n\n  <div class=\"form-validation-demo__field\" data-controller=\"stimeo--form-field\">\n    <label class=\"form-validation-demo__label\" for=\"fv-email\">\n      <%= t(\"components.form_validation.demo.email_label\") %>\n    </label>\n    <input class=\"form-validation-demo__control\" id=\"fv-email\" name=\"email\" type=\"email\"\n           required placeholder=\"<%= t('components.form_validation.demo.email_placeholder') %>\"\n           data-stimeo--form-field-target=\"control\" />\n    <p class=\"form-validation-demo__error\" role=\"alert\" hidden\n       data-stimeo--form-field-target=\"error\"></p>\n  </div>\n\n  <%# The listbox keeps its committed value in the mirror below. The form-field\n      control is the visible trigger, so aria-invalid and invalid focus land there. %>\n  <div class=\"form-validation-demo__field listbox\"\n       data-controller=\"stimeo--form-field stimeo--listbox\">\n    <span id=\"fv-plan-label\" class=\"form-validation-demo__label\">\n      <%= t(\"components.form_validation.demo.plan_label\") %>\n    </span>\n    <button\n      type=\"button\"\n      class=\"demo-trigger listbox__trigger\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls=\"fv-plan-options\"\n      aria-labelledby=\"fv-plan-label fv-plan-value\"\n      data-stimeo--listbox-target=\"trigger\"\n      data-stimeo--form-field-target=\"control\"\n      data-action=\"click->stimeo--listbox#toggle keydown->stimeo--listbox#onTriggerKeydown\">\n      <span id=\"fv-plan-value\" data-stimeo--listbox-target=\"value\">\n        <%= t(\"components.form_validation.demo.plan_placeholder\") %>\n      </span>\n      <span class=\"listbox__chevron\" aria-hidden=\"true\">▾</span>\n    </button>\n    <ul id=\"fv-plan-options\" class=\"listbox__list\" role=\"listbox\"\n        aria-labelledby=\"fv-plan-label\" hidden data-stimeo--listbox-target=\"list\">\n      <% %w[free pro team].each_with_index do |plan, index| %>\n        <li id=\"fv-plan-opt-<%= index %>\" class=\"listbox__option\" role=\"option\"\n            aria-selected=\"false\" data-value=\"<%= plan %>\"\n            data-stimeo--listbox-target=\"option\"\n            data-action=\"click->stimeo--listbox#select\">\n          <%= t(\"components.form_validation.demo.plans.#{plan}\") %>\n        </li>\n      <% end %>\n    </ul>\n    <%# Validatable mirror: the hidden attribute participates in constraint\n        validation and submits with the form — type=\"hidden\" would do neither. %>\n    <input type=\"text\" hidden required name=\"plan\" data-stimeo--listbox-target=\"field\" />\n    <p class=\"form-validation-demo__error\" role=\"alert\" hidden\n       data-stimeo--form-field-target=\"error\"></p>\n  </div>\n\n  <p class=\"form-validation-demo__note\"><%= t(\"components.form_validation.demo.note\") %></p>\n\n  <button type=\"submit\" class=\"demo-trigger\">\n    <%= t(\"components.form_validation.demo.submit\") %>\n  </button>\n\n  <%# Status line updated by demo.js; templates ride data-* so the copy stays bilingual. %>\n  <p class=\"form-validation-demo__status\" id=\"fv-status\" aria-live=\"polite\"\n     data-valid-text=\"<%= t('components.form_validation.demo.valid_status') %>\"\n     data-invalid-template=\"<%= t('components.form_validation.demo.invalid_template') %>\"></p>\n</form>\n"
+      "source": "<%# Markup for the form-validation demo.\n    stimeo--form-validation orchestrates WHEN native constraint validation runs\n    (submit / blur / change / input) and routes each control's message into its\n    stimeo--form-field visual error — the ARIA wiring stays in form-field, and\n    the speech goes to the shared announcer seated at the end of this form.\n    Rules are plain markup attributes (required, type=\"email\", plus the\n    declarative disallow=\"whitespace\"); the wording comes from localized\n    data-stimeo--form-validation-message-* overrides rather than the browser, so\n    the catalog reads the same in both locales. The plan listbox joins through a\n    validatable mirror: <input type=\"text\" hidden required> — the hidden\n    ATTRIBUTE, not type=\"hidden\", which is barred from constraint validation.\n    The authored novalidate keeps the no-JS fallback graceful (the controller\n    preserves it). Valid submissions are kept on the page by demo.js so the\n    catalog can show a success status. %>\n<form class=\"form-validation-demo\" action=\"#\" method=\"get\" novalidate\n      data-controller=\"stimeo--form-validation\"\n      data-stimeo--form-validation-stimeo--form-field-outlet=\".form-validation-demo__field\">\n\n  <div class=\"form-validation-demo__field\" data-controller=\"stimeo--form-field\">\n    <label class=\"form-validation-demo__label\" for=\"fv-email\">\n      <%= t(\"components.form_validation.demo.email_label\") %>\n    </label>\n    <input class=\"form-validation-demo__control\" id=\"fv-email\" name=\"email\" type=\"email\"\n           required placeholder=\"<%= t('components.form_validation.demo.email_placeholder') %>\"\n           data-stimeo--form-validation-message-value-missing=\n             \"<%= t('components.form_validation.demo.messages.email_required') %>\"\n           data-stimeo--form-validation-message-type-mismatch=\n             \"<%= t('components.form_validation.demo.messages.email_type') %>\"\n           data-stimeo--form-field-target=\"control\" />\n    <%# Visual error only. Speech goes through the shared announcer seated below. %>\n    <p class=\"form-validation-demo__error\" hidden\n       data-stimeo--form-field-target=\"error\"></p>\n  </div>\n\n  <div class=\"form-validation-demo__field\" data-controller=\"stimeo--form-field\">\n    <label class=\"form-validation-demo__label\" for=\"fv-name\">\n      <%= t(\"components.form_validation.demo.name_label\") %>\n    </label>\n    <input class=\"form-validation-demo__control\" id=\"fv-name\" name=\"name\" type=\"text\"\n           required placeholder=\"<%= t('components.form_validation.demo.name_placeholder') %>\"\n           data-stimeo--form-validation-disallow=\"whitespace\"\n           data-stimeo--form-validation-message-value-missing=\n             \"<%= t('components.form_validation.demo.messages.name_required') %>\"\n           data-stimeo--form-validation-message-whitespace=\n             \"<%= t('components.form_validation.demo.messages.name_whitespace') %>\"\n           data-stimeo--form-field-target=\"control\" />\n    <p class=\"form-validation-demo__error\" hidden\n       data-stimeo--form-field-target=\"error\"></p>\n  </div>\n\n  <%# The listbox keeps its committed value in the mirror below. The form-field\n      control is the visible trigger, so aria-invalid and invalid focus land there. %>\n  <div class=\"form-validation-demo__field listbox\"\n       data-controller=\"stimeo--form-field stimeo--listbox\">\n    <span id=\"fv-plan-label\" class=\"form-validation-demo__label\">\n      <%= t(\"components.form_validation.demo.plan_label\") %>\n    </span>\n    <button\n      type=\"button\"\n      class=\"demo-trigger listbox__trigger\"\n      role=\"combobox\"\n      aria-haspopup=\"listbox\"\n      aria-expanded=\"false\"\n      aria-controls=\"fv-plan-options\"\n      aria-labelledby=\"fv-plan-label fv-plan-value\"\n      data-stimeo--listbox-target=\"trigger\"\n      data-stimeo--form-field-target=\"control\"\n      data-action=\"click->stimeo--listbox#toggle keydown->stimeo--listbox#onTriggerKeydown\">\n      <span id=\"fv-plan-value\" data-stimeo--listbox-target=\"value\">\n        <%= t(\"components.form_validation.demo.plan_placeholder\") %>\n      </span>\n      <span class=\"listbox__chevron\" aria-hidden=\"true\">▾</span>\n    </button>\n    <ul id=\"fv-plan-options\" class=\"listbox__list\" role=\"listbox\"\n        aria-labelledby=\"fv-plan-label\" hidden data-stimeo--listbox-target=\"list\">\n      <% %w[free pro team].each_with_index do |plan, index| %>\n        <li id=\"fv-plan-opt-<%= index %>\" class=\"listbox__option\" role=\"option\"\n            aria-selected=\"false\" data-value=\"<%= plan %>\"\n            data-stimeo--listbox-target=\"option\"\n            data-action=\"click->stimeo--listbox#select\">\n          <%= t(\"components.form_validation.demo.plans.#{plan}\") %>\n        </li>\n      <% end %>\n    </ul>\n    <%# Validatable mirror: the hidden attribute participates in constraint\n        validation and submits with the form — type=\"hidden\" would do neither. %>\n    <input type=\"text\" hidden required name=\"plan\"\n           data-stimeo--form-validation-message-value-missing=\n             \"<%= t('components.form_validation.demo.messages.plan_required') %>\"\n           data-stimeo--listbox-target=\"field\" />\n    <p class=\"form-validation-demo__error\" hidden\n       data-stimeo--form-field-target=\"error\"></p>\n  </div>\n\n  <p class=\"form-validation-demo__note\"><%= t(\"components.form_validation.demo.note\") %></p>\n\n  <button type=\"submit\" class=\"demo-trigger\">\n    <%= t(\"components.form_validation.demo.submit\") %>\n  </button>\n\n  <%# Status line updated by demo.js; templates ride data-* so the copy stays bilingual. %>\n  <p class=\"form-validation-demo__status\" id=\"fv-status\" aria-live=\"polite\"\n     data-valid-text=\"<%= t('components.form_validation.demo.valid_status') %>\"\n     data-invalid-template=\"<%= t('components.form_validation.demo.invalid_template') %>\"></p>\n\n  <%# Assertive announcement target for the field errors form-field sets. One\n      receiver serves every field, and it is seated in the accessibility tree\n      ahead of the first error, which is what makes the message observable. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\" data-stimeo--announcer-target=\"assertive\"\n         aria-live=\"assertive\" aria-atomic=\"true\"></div>\n  </div>\n</form>\n"
     },
     "stimeo--frame-loading": {
       "file": "examples/frame_loading/_demo.html.erb",
@@ -227,7 +227,7 @@
     },
     "stimeo--nested-form": {
       "file": "examples/nested_form/_demo.html.erb",
-      "source": "<%# Markup for the nested / dynamic fields demo (cocoon-style line items).\n    The controller clones the <template> row (renumbering __INDEX__), removes rows by\n    dropping unsaved ones / flagging _destroy on persisted ones, enforces min/max, and\n    announces the count through a shared stimeo--announcer. Remove buttons are handled\n    by delegation, so cloned rows need no per-row wiring. %>\n<%\n  item_label = t(\"components.nested_form.demo.item_label\")\n  remove_label = t(\"components.nested_form.demo.remove\")\n  count_message = t(\"components.nested_form.demo.count_message\")\n%>\n<div class=\"nested-demo\" data-controller=\"stimeo--nested-form\"\n     data-stimeo--nested-form-min-value=\"1\"\n     data-stimeo--nested-form-max-value=\"5\"\n     data-stimeo--nested-form-count-message-value=\"<%= count_message %>\">\n  <div class=\"nested-demo__list\" data-stimeo--nested-form-target=\"list\">\n    <fieldset class=\"nested-demo__row\">\n      <label class=\"nested-demo__field\">\n        <span><%= item_label %></span>\n        <input type=\"text\" class=\"demo-input\" name=\"order[items_attributes][0][name]\">\n      </label>\n      <button type=\"button\" class=\"demo-trigger\"\n              data-stimeo--nested-form-target=\"remove\"><%= remove_label %></button>\n    </fieldset>\n  </div>\n\n  <template data-stimeo--nested-form-target=\"template\">\n    <fieldset class=\"nested-demo__row\">\n      <label class=\"nested-demo__field\">\n        <span><%= item_label %></span>\n        <input type=\"text\" class=\"demo-input\" name=\"order[items_attributes][__INDEX__][name]\">\n      </label>\n      <button type=\"button\" class=\"demo-trigger\"\n              data-stimeo--nested-form-target=\"remove\"><%= remove_label %></button>\n    </fieldset>\n  </template>\n\n  <button type=\"button\" class=\"demo-trigger\" data-stimeo--nested-form-target=\"add\"\n          data-action=\"click->stimeo--nested-form#add\">\n    <%= t(\"components.nested_form.demo.add\") %>\n  </button>\n\n  <%# Shared announcer: row count changes are read out without moving focus away. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\" data-stimeo--announcer-target=\"polite\"\n         aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the nested / dynamic fields demo (invoice-style line items).\n    The controller clones the <template> row (renumbering __INDEX__), removes rows by\n    dropping unsaved ones / flagging _destroy on persisted ones, enforces min/max, and\n    announces the count through a shared stimeo--announcer. Remove buttons are handled\n    by delegation, so cloned rows need no per-row wiring. %>\n<%\n  item_label = t(\"components.nested_form.demo.item_label\")\n  remove_label = t(\"components.nested_form.demo.remove\")\n  count_message = t(\"components.nested_form.demo.count_message\")\n  persisted_value = t(\"components.nested_form.demo.persisted_value\")\n%>\n<div class=\"nested-demo\" data-controller=\"stimeo--nested-form\"\n     data-stimeo--nested-form-min-value=\"1\"\n     data-stimeo--nested-form-max-value=\"5\"\n     data-stimeo--nested-form-count-message-value=\"<%= count_message %>\">\n  <div class=\"nested-demo__list\" data-stimeo--nested-form-target=\"list\">\n    <fieldset class=\"nested-demo__row\">\n      <label class=\"nested-demo__field\">\n        <span><%= item_label %></span>\n        <input type=\"text\" class=\"demo-input\" name=\"order[items_attributes][0][name]\">\n      </label>\n      <button type=\"button\" class=\"demo-trigger\"\n              data-stimeo--nested-form-target=\"remove\"><%= remove_label %></button>\n    </fieldset>\n    <%# A persisted row: its _destroy flag makes Remove hide it instead of deleting it. %>\n    <fieldset class=\"nested-demo__row\">\n      <input type=\"hidden\" name=\"order[items_attributes][1][_destroy]\" value=\"0\"\n             data-stimeo--nested-form-target=\"destroyFlag\">\n      <label class=\"nested-demo__field\">\n        <span><%= item_label %></span>\n        <input type=\"text\" class=\"demo-input\" value=\"<%= persisted_value %>\"\n               name=\"order[items_attributes][1][name]\">\n      </label>\n      <button type=\"button\" class=\"demo-trigger\"\n              data-stimeo--nested-form-target=\"remove\"><%= remove_label %></button>\n    </fieldset>\n  </div>\n\n  <template data-stimeo--nested-form-target=\"template\">\n    <fieldset class=\"nested-demo__row\">\n      <label class=\"nested-demo__field\">\n        <span><%= item_label %></span>\n        <input type=\"text\" class=\"demo-input\" name=\"order[items_attributes][__INDEX__][name]\">\n      </label>\n      <button type=\"button\" class=\"demo-trigger\"\n              data-stimeo--nested-form-target=\"remove\"><%= remove_label %></button>\n    </fieldset>\n  </template>\n\n  <button type=\"button\" class=\"demo-trigger\" data-stimeo--nested-form-target=\"add\"\n          data-action=\"click->stimeo--nested-form#add\">\n    <%= t(\"components.nested_form.demo.add\") %>\n  </button>\n\n  <%# Shared announcer: row count changes are read out without moving focus away. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\" data-stimeo--announcer-target=\"polite\"\n         aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
     },
     "stimeo--network-status": {
       "file": "examples/network_status/_demo.html.erb",
@@ -243,7 +243,7 @@
     },
     "stimeo--otp": {
       "file": "examples/otp/_demo.html.erb",
-      "source": "<%# Markup for the otp (OTP PIN passcode) demo.\n    Provides auto-advance on entry in each field, Backspace to go back, paste\n    distribution, and value sync. %>\n<div\n  class=\"otp-demo\"\n  id=\"otp-passcode\"\n  data-controller=\"stimeo--otp\"\n  data-stimeo--otp-length-value=\"6\"\n  data-stimeo--otp-pattern-value=\"[0-9]\"\n  role=\"group\"\n  aria-label=\"<%= t(\"components.otp.demo.label\") %>\"\n>\n  \n  <div class=\"otp-demo__label\"><%= t(\"components.otp.demo.label\") %></div>\n  \n  <div class=\"otp-demo__fields\">\n    <% 6.times do |i| %>\n      <input\n        class=\"otp-demo__field\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"1\"\n        data-stimeo--otp-target=\"field\"\n        data-action=\"\n          input->stimeo--otp#onInput\n          keydown->stimeo--otp#onKeydown\n          paste->stimeo--otp#onPaste\n        \"\n        aria-label=\"<%= t(\"components.otp.demo.digit_label\", position: i + 1) %>\"\n      />\n    <% end %>\n  </div>\n\n  <input\n    type=\"hidden\"\n    data-stimeo--otp-target=\"value\"\n    name=\"otp\"\n  />\n\n  <%# Region for invalid-input / full-width-character warning messages. %>\n  <div\n    data-stimeo--otp-target=\"error\"\n    id=\"otp-error-message\"\n    class=\"otp-demo__error\"\n    role=\"alert\"\n    aria-live=\"polite\"\n    hidden\n  >\n    <span class=\"otp-demo__error-badge\">!</span>\n    <span class=\"otp-demo__error-text\">\n      <%= t(\"components.otp.demo.invalid_msg\") %>\n    </span>\n  </div>\n\n  <%# Placeholder for the completion celebration message. %>\n  <div id=\"otp-complete-message\" class=\"otp-demo__message\" style=\"display: none;\">\n    <span class=\"otp-demo__success-badge\">✓</span>\n    <span class=\"otp-demo__success-text\">\n      <%= t(\"components.otp.demo.complete_msg\") %>\n      <strong id=\"otp-success-code\"></strong>\n    </span>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the otp (OTP PIN passcode) demo.\n    Provides auto-advance on entry in each field, Backspace to clear, paste and\n    autofill splitting, and value sync. The digit count is the number of fields. %>\n<div\n  class=\"otp-demo\"\n  id=\"otp-passcode\"\n  data-controller=\"stimeo--otp\"\n  data-stimeo--otp-pattern-value=\"[0-9]\"\n  role=\"group\"\n  aria-label=\"<%= t(\"components.otp.demo.label\") %>\"\n>\n\n  <div class=\"otp-demo__label\"><%= t(\"components.otp.demo.label\") %></div>\n\n  <div class=\"otp-demo__fields\">\n    <% 6.times do |i| %>\n      <input\n        class=\"otp-demo__field\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        maxlength=\"1\"\n        autocomplete=\"one-time-code\"\n        data-stimeo--otp-target=\"field\"\n        data-action=\"\n          input->stimeo--otp#onInput\n          keydown->stimeo--otp#onKeydown\n          paste->stimeo--otp#onPaste\n          pointerdown->stimeo--otp#onPointerDown\n        \"\n        aria-label=\"<%= t(\"components.otp.demo.digit_label\", position: i + 1) %>\"\n      />\n    <% end %>\n  </div>\n\n  <input\n    type=\"hidden\"\n    data-stimeo--otp-target=\"value\"\n    name=\"otp\"\n  />\n\n  <%# Region for invalid-input / full-width-character warning messages. %>\n  <div\n    data-stimeo--otp-target=\"error\"\n    id=\"otp-error-message\"\n    class=\"otp-demo__error\"\n    role=\"alert\"\n    aria-live=\"polite\"\n    hidden\n  >\n    <span class=\"otp-demo__error-badge\">!</span>\n    <span class=\"otp-demo__error-text\">\n      <%= t(\"components.otp.demo.invalid_msg\") %>\n    </span>\n  </div>\n\n  <%# The completion message is shown by CSS reading data-state on the root, so the\n      demo script only has to fill in the code itself. %>\n  <div id=\"otp-complete-message\" class=\"otp-demo__message\">\n    <span class=\"otp-demo__success-badge\">✓</span>\n    <span class=\"otp-demo__success-text\">\n      <%= t(\"components.otp.demo.complete_msg\") %>\n      <strong id=\"otp-success-code\"></strong>\n    </span>\n  </div>\n\n  <button type=\"button\" class=\"demo-trigger otp-demo__clear\" data-action=\"stimeo--otp#clear\">\n    <%= t(\"components.otp.demo.clear\") %>\n  </button>\n</div>\n"
     },
     "stimeo--overflow-indicator": {
       "file": "examples/overflow_indicator/_demo.html.erb",
@@ -347,7 +347,7 @@
     },
     "stimeo--separator": {
       "file": "examples/separator/_demo.html.erb",
-      "source": "<%# Markup for the separator demo.\n    The top is a decorative separator (only role=\"separator\" and aria-orientation).\n    The bottom is a valued, focusable separator that increments/decrements aria-valuenow\n    with the arrow keys and fires stimeo--separator:change. The actual pane-width change\n    (demo.js) and line rendering (demo.css) are the consumer's job. %>\n<div class=\"separator-demo\">\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.intro\") %></p>\n  <div\n    class=\"separator separator--horizontal\"\n    role=\"separator\"\n    data-controller=\"stimeo--separator\"\n    data-stimeo--separator-orientation-value=\"horizontal\"></div>\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.after\") %></p>\n\n  <div class=\"separator-demo__split\">\n    <%# The primary pane: demo.css sizes this one from --separator-split, so the\n        value the splitter reports is this pane's size. A vertical splitter can\n        only take the left pane as primary, because ArrowRight both moves the\n        handle right and increases the value. %>\n    <div class=\"separator-demo__pane\" id=\"separator-demo-primary\">\n      <%= t(\"components.separator.demo.left\") %>\n    </div>\n    <div\n      class=\"separator separator--vertical\"\n      role=\"separator\"\n      tabindex=\"0\"\n      <%# The pattern names the splitter after the primary pane, and that pane\n          carries its own visible text, so it is referenced instead of writing a\n          separate label. %>\n      aria-labelledby=\"separator-demo-primary\"\n      aria-controls=\"separator-demo-primary\"\n      aria-orientation=\"vertical\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      aria-valuenow=\"50\"\n      data-controller=\"stimeo--separator\"\n      data-stimeo--separator-focusable-value=\"true\"\n      data-stimeo--separator-step-value=\"5\"\n      data-action=\"keydown->stimeo--separator#onKeydown\"></div>\n    <div class=\"separator-demo__pane\"><%= t(\"components.separator.demo.right\") %></div>\n  </div>\n\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.after_horizontal\") %></p>\n\n  <%# Horizontal, value-bearing separator (top/bottom split). aria-orientation=\"horizontal\"\n      scopes the arrows to ArrowUp/ArrowDown. demo.js reuses the same --separator-split var. %>\n  <div class=\"separator-demo__split separator-demo__split--stacked\">\n    <div class=\"separator-demo__pane\"><%= t(\"components.separator.demo.top\") %></div>\n    <div\n      class=\"separator separator--horizontal-handle\"\n      role=\"separator\"\n      tabindex=\"0\"\n      aria-labelledby=\"separator-demo-primary-stacked\"\n      aria-controls=\"separator-demo-primary-stacked\"\n      aria-orientation=\"horizontal\"\n      aria-valuemin=\"20\"\n      aria-valuemax=\"80\"\n      aria-valuenow=\"50\"\n      data-controller=\"stimeo--separator\"\n      data-stimeo--separator-focusable-value=\"true\"\n      data-stimeo--separator-step-value=\"5\"\n      data-action=\"keydown->stimeo--separator#onKeydown\"></div>\n    <%# The primary pane here is the bottom one: demo.css sizes the last child\n        from --separator-split, which is what lets ArrowUp both move the handle\n        up and increase the value. %>\n    <div class=\"separator-demo__pane\" id=\"separator-demo-primary-stacked\">\n      <%= t(\"components.separator.demo.bottom\") %>\n    </div>\n  </div>\n</div>\n"
+      "source": "<%# Separator demo markup. The first separator is decorative; the other two are\n    focusable and value-bearing, dispatching change as the arrow keys adjust them.\n    The consumer-owned demo.js and demo.css turn that value into pane sizes and\n    the divider's appearance. %>\n<div class=\"separator-demo\">\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.intro\") %></p>\n  <div\n    class=\"separator separator--horizontal\"\n    data-controller=\"stimeo--separator\"\n    data-stimeo--separator-orientation-value=\"horizontal\"></div>\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.after\") %></p>\n\n  <div class=\"separator-demo__split\">\n    <%# The primary pane. Its width follows --separator-split, so the separator's\n        Value reports this pane's size: ArrowRight raises the value while moving\n        the vertical divider right. %>\n    <div class=\"separator-demo__pane\" id=\"separator-demo-primary\">\n      <%= t(\"components.separator.demo.left\") %>\n    </div>\n    <div\n      class=\"separator separator--vertical\"\n      <%# Reuse the primary pane's visible text as the separator's name. %>\n      aria-labelledby=\"separator-demo-primary\"\n      aria-controls=\"separator-demo-primary\"\n      data-controller=\"stimeo--separator\"\n      data-stimeo--separator-orientation-value=\"vertical\"\n      data-stimeo--separator-focusable-value=\"true\"\n      data-stimeo--separator-min-value=\"20\"\n      data-stimeo--separator-max-value=\"80\"\n      data-stimeo--separator-step-value=\"5\"\n      data-stimeo--separator-value-value=\"50\"\n      data-action=\"keydown->stimeo--separator#onKeydown\"></div>\n    <div class=\"separator-demo__pane\"><%= t(\"components.separator.demo.right\") %></div>\n  </div>\n\n  <p class=\"separator-demo__text\"><%= t(\"components.separator.demo.after_horizontal\") %></p>\n\n  <%# A horizontal separator takes ArrowUp and ArrowDown. demo.js maps the same\n      --separator-split custom property onto the top / bottom pane ratio. %>\n  <div class=\"separator-demo__split separator-demo__split--stacked\">\n    <div class=\"separator-demo__pane\"><%= t(\"components.separator.demo.top\") %></div>\n    <div\n      class=\"separator separator--horizontal-handle\"\n      aria-labelledby=\"separator-demo-primary-stacked\"\n      aria-controls=\"separator-demo-primary-stacked\"\n      data-controller=\"stimeo--separator\"\n      data-stimeo--separator-orientation-value=\"horizontal\"\n      data-stimeo--separator-focusable-value=\"true\"\n      data-stimeo--separator-min-value=\"20\"\n      data-stimeo--separator-max-value=\"80\"\n      data-stimeo--separator-step-value=\"5\"\n      data-stimeo--separator-value-value=\"50\"\n      data-action=\"keydown->stimeo--separator#onKeydown\"></div>\n    <%# Here the lower pane is the primary one. Flexing the last child from\n        --separator-split makes ArrowUp raise the primary pane's value while\n        moving the divider up. %>\n    <div class=\"separator-demo__pane\" id=\"separator-demo-primary-stacked\">\n      <%= t(\"components.separator.demo.bottom\") %>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--sidebar": {
       "file": "examples/sidebar/_demo.html.erb",
@@ -391,7 +391,7 @@
     },
     "stimeo--submit-once": {
       "file": "examples/submit_once/_demo.html.erb",
-      "source": "<%# Submit-once demo: the submit button disables and swaps its label on submit, then\n    restores. This catalog has no server, so demo.js intercepts the submit and simulates\n    a round trip by firing turbo:submit-end after a short delay. The library owns the\n    disable / aria-busy / data-submitting / label state; this demo only styles it. %>\n<div class=\"submit-once-demo\">\n  <form\n    data-controller=\"stimeo--submit-once\"\n    data-stimeo--submit-once-busy-label-value=\"<%= t('components.submit_once.demo.busy') %>\"\n    data-action=\"submit->stimeo--submit-once#start\">\n    <label class=\"submit-once-demo__field\">\n      <span><%= t(\"components.submit_once.demo.label\") %></span>\n      <input type=\"text\" name=\"title\" class=\"submit-once-demo__input\">\n    </label>\n    <button type=\"submit\" class=\"demo-trigger\" data-stimeo--submit-once-target=\"submit\">\n      <%= t(\"components.submit_once.demo.submit\") %>\n    </button>\n  </form>\n</div>\n"
+      "source": "<%# Submit-once demo. A structured idle / busy target pair keeps the DOM the\n    consumer authored while the button is disabled. This catalog has no server,\n    so demo.js fires Turbo's start / end lifecycle around a short fake round\n    trip. %>\n<% announce_start = t(\"components.submit_once.demo.announce_start\") %>\n<% announce_ready = t(\"components.submit_once.demo.announce_ready\") %>\n<% submit_label = t(\"components.submit_once.demo.submit\") %>\n<% busy_label = t(\"components.submit_once.demo.busy\") %>\n<div class=\"submit-once-demo\">\n  <form\n    data-controller=\"stimeo--submit-once\"\n    data-stimeo--submit-once-announce-text-value=\"<%= announce_start %>\"\n    data-stimeo--submit-once-announce-ready-text-value=\"<%= announce_ready %>\">\n    <label class=\"submit-once-demo__field\">\n      <span><%= t(\"components.submit_once.demo.label\") %></span>\n      <input type=\"text\" name=\"title\" class=\"submit-once-demo__input\">\n    </label>\n    <button type=\"submit\" class=\"demo-trigger\" data-stimeo--submit-once-target=\"submit\">\n      <span data-stimeo--submit-once-target=\"idle\"><%= submit_label %></span>\n      <span data-stimeo--submit-once-target=\"busy\" hidden><%= busy_label %></span>\n    </button>\n  </form>\n\n  <%# aria-busy exposes state that can be queried; this always-present region is\n      what announces the transition itself, without moving focus. %>\n  <div data-controller=\"stimeo--announcer\">\n    <div class=\"visually-hidden\" data-stimeo--announcer-target=\"polite\"\n         aria-live=\"polite\" aria-atomic=\"true\"></div>\n  </div>\n</div>\n"
     },
     "stimeo--switch": {
       "file": "examples/switch/_demo.html.erb",