stimeo-ui 0.6.0 → 0.7.0

package/dist/inspector/examples.json

@@ -47,7 +47,7 @@
     },
     "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",
@@ -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",
@@ -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",