stimeo-ui 0.7.0 → 0.8.0

package/dist/inspector/examples.json

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

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 12,
-  "packageVersion": "0.7.0",
+  "packageVersion": "0.8.0",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -167,7 +167,8 @@
       ],
       "events": [
         "submit",
-        "done"
+        "done",
+        "reconcile"
       ],
       "requiredTargets": [],
       "conditionalTargets": [],
@@ -349,7 +350,15 @@
         "interval",
         "loop"
       ],
-      "valueConstraints": [],
+      "valueConstraints": [
+        {
+          "value": "interval",
+          "type": "number",
+          "finite": true,
+          "greaterThan": 0,
+          "suggestion": "Set interval to a finite number of milliseconds greater than 0 — anything else falls back to 5000 at runtime."
+        }
+      ],
       "valueRelations": [],
       "actions": [
         "goto",
@@ -367,10 +376,24 @@
         "reconcile"
       ],
       "requiredTargets": [
-        "slide",
-        "picker"
+        "slide"
+      ],
+      "conditionalTargets": [
+        {
+          "whenPresent": "prev",
+          "require": [
+            "next"
+          ],
+          "suggestion": "Add the \"next\" button that pairs with \"prev\" — a carousel the reader can only step backwards through cannot reach the slides ahead of it."
+        },
+        {
+          "whenPresent": "next",
+          "require": [
+            "prev"
+          ],
+          "suggestion": "Add the \"prev\" button that pairs with \"next\" — a carousel the reader can only step forwards through cannot return to a slide they passed."
+        }
       ],
-      "conditionalTargets": [],
       "requiredActions": [],
       "actionCompletion": [],
       "a11y": [
@@ -400,7 +423,27 @@
           "values": [
             "tabpanel"
           ],
-          "suggestion": "Add role=\"tabpanel\" to each slide target."
+          "whenContains": {
+            "target": "picker",
+            "within": "scope",
+            "min": 1
+          },
+          "suggestion": "Add role=\"tabpanel\" to each slide target — its picker is the tab."
+        },
+        {
+          "target": "slide",
+          "attrs": [
+            "role"
+          ],
+          "values": [
+            "group"
+          ],
+          "whenContains": {
+            "target": "picker",
+            "within": "scope",
+            "max": 0
+          },
+          "suggestion": "Add role=\"group\" to each slide target — a carousel with no pickers has no tabs, so its slides are groups rather than tabpanels."
         },
         {
           "target": "slide",
@@ -433,7 +476,44 @@
       ],
       "keyboard": [],
       "hosts": [],
-      "managedAria": [],
+      "managedAria": [
+        {
+          "target": "playToggle",
+          "attrs": [
+            "aria-pressed"
+          ],
+          "suggestion": "Remove aria-pressed from the playToggle target — the controller mirrors the autoplay Value onto it. Set data-stimeo--carousel-autoplay-value to choose the initial state."
+        },
+        {
+          "target": "playToggle",
+          "attrs": [
+            "aria-disabled"
+          ],
+          "suggestion": "Remove aria-disabled from the playToggle target — the controller marks it when the carousel has no slide left to rotate to."
+        },
+        {
+          "target": "prev",
+          "attrs": [
+            "aria-disabled"
+          ],
+          "suggestion": "Remove aria-disabled from the prev target — the controller marks it at the first slide of a non-looping carousel."
+        },
+        {
+          "target": "next",
+          "attrs": [
+            "aria-disabled"
+          ],
+          "suggestion": "Remove aria-disabled from the next target — the controller marks it at the last slide of a non-looping carousel."
+        },
+        {
+          "target": "viewport",
+          "attrs": [
+            "aria-live",
+            "aria-atomic"
+          ],
+          "suggestion": "Remove aria-live and aria-atomic from the viewport target — the controller switches the region between off while rotating and polite while stopped."
+        }
+      ],
       "compositions": [],
       "companions": [],
       "targetDeclarations": [],
@@ -447,6 +527,20 @@
           ],
           "max": 1,
           "suggestion": "Leave aria-selected=\"true\" on exactly one picker and set the others to \"false\" — the carousel shows one slide, and connect keeps the first."
+        },
+        {
+          "within": "",
+          "target": "playToggle",
+          "min": 1,
+          "when": {
+            "value": "autoplay",
+            "type": "boolean",
+            "equals": [
+              "true"
+            ],
+            "default": "false"
+          },
+          "suggestion": "Add a \"playToggle\" button wired to stimeo--carousel#togglePlay — a carousel that rotates on its own needs a control that stops it (WCAG 2.2.2)."
         }
       ],
       "forbiddenAria": []
@@ -1468,7 +1562,8 @@
       "events": [
         "progress",
         "done",
-        "error"
+        "error",
+        "reconcile"
       ],
       "requiredTargets": [
         "list",
@@ -1719,12 +1814,21 @@
         "list",
         "item",
         "itemTemplate",
-        "status"
+        "name",
+        "thumb",
+        "remove"
       ],
       "values": [
         "maxSize",
         "maxFiles",
-        "dragLabel"
+        "allowDuplicates",
+        "announceDragText",
+        "announceAddedText",
+        "announceRemovedText",
+        "announceRejectedTypeText",
+        "announceRejectedSizeText",
+        "announceRejectedDuplicateText",
+        "announceRejectedCountText"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -1737,7 +1841,8 @@
       ],
       "events": [
         "change",
-        "reject"
+        "reject",
+        "reconcile"
       ],
       "requiredTargets": [
         "input",
@@ -1757,6 +1862,16 @@
             "itemTemplate"
           ],
           "suggestion": "Add an \"itemTemplate\" target — a \"list\" has no item markup to clone without it."
+        },
+        {
+          "whenPresent": "itemTemplate",
+          "require": [
+            "item",
+            "name",
+            "remove"
+          ],
+          "requireInside": true,
+          "suggestion": "Complete the item template: inside it, it needs an \"item\" root, a \"name\" element for the file name, and a \"remove\" button. Parts declared outside the template never reach the clone, so no file can render."
         }
       ],
       "requiredActions": [],
@@ -1823,7 +1938,8 @@
       ],
       "events": [
         "show",
-        "dismiss"
+        "dismiss",
+        "reconcile"
       ],
       "requiredTargets": [
         "region"
@@ -1964,7 +2080,8 @@
       "actions": [],
       "events": [
         "start",
-        "end"
+        "end",
+        "reconcile"
       ],
       "requiredTargets": [],
       "conditionalTargets": [],
@@ -2083,7 +2200,8 @@
         "format"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [],
       "conditionalTargets": [],
@@ -2801,7 +2919,8 @@
       ],
       "events": [
         "add",
-        "remove"
+        "remove",
+        "reconcile"
       ],
       "requiredTargets": [
         "list",
@@ -2932,7 +3051,6 @@
         "error"
       ],
       "values": [
-        "length",
         "pattern"
       ],
       "valueConstraints": [],
@@ -2940,12 +3058,15 @@
       "actions": [
         "onInput",
         "onKeydown",
-        "onPaste"
+        "onPaste",
+        "onPointerDown",
+        "clear"
       ],
       "events": [
         "change",
         "complete",
-        "invalid"
+        "invalid",
+        "reconcile"
       ],
       "requiredTargets": [
         "field"
@@ -2953,10 +3074,46 @@
       "conditionalTargets": [],
       "requiredActions": [],
       "actionCompletion": [],
-      "a11y": [],
+      "a11y": [
+        {
+          "target": "",
+          "attrs": [
+            "role"
+          ],
+          "values": [
+            "group"
+          ],
+          "suggestion": "Add role=\"group\" to the controller element."
+        },
+        {
+          "target": "",
+          "attrs": [
+            "aria-label",
+            "aria-labelledby"
+          ],
+          "suggestion": "Name the passcode group via aria-label or aria-labelledby."
+        },
+        {
+          "target": "field",
+          "attrs": [
+            "aria-label",
+            "aria-labelledby"
+          ],
+          "suggestion": "Name each field target after its position via aria-label or aria-labelledby."
+        }
+      ],
       "keyboard": [],
       "hosts": [],
-      "managedAria": [],
+      "managedAria": [
+        {
+          "target": "field",
+          "attrs": [
+            "aria-invalid",
+            "aria-errormessage"
+          ],
+          "suggestion": "Remove aria-invalid and aria-errormessage from the field target — the controller writes them while it reports discarded input and returns them once the input is accepted."
+        }
+      ],
       "compositions": [],
       "companions": [],
       "targetDeclarations": [],
@@ -4428,7 +4585,8 @@
       "events": [
         "hide",
         "show",
-        "timeout"
+        "timeout",
+        "reconcile"
       ],
       "requiredTargets": [],
       "conditionalTargets": [],
@@ -4595,7 +4753,8 @@
       ],
       "events": [
         "start",
-        "end"
+        "end",
+        "reconcile"
       ],
       "requiredTargets": [],
       "conditionalTargets": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stimeo-ui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Headless Stimulus UI framework for Ruby on Rails — behavior-only, accessible components driven by HTML attributes.",
   "type": "module",
   "license": "MIT",
@@ -84,7 +84,7 @@
     }
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.7",
+    "@biomejs/biome": "2.5.10",
     "@floating-ui/dom": "1.8.0",
     "@rails/actioncable": "8.1.301",
     "@types/rails__actioncable": "8.0.3",