stimeo-ui 0.5.0 → 0.6.0

package/dist/inspector/examples.json

@@ -19,7 +19,7 @@
     },
     "stimeo--aspect-ratio": {
       "file": "examples/aspect_ratio/_demo.html.erb",
-      "source": "<%# Markup for the aspect-ratio demo.\n    The library only supplies the ratio Value as the --stimeo--aspect-ratio custom\n    property; demo.css does the actual ratio rendering\n    (aspect-ratio: var(--stimeo--aspect-ratio)). %>\n<div class=\"aspect-ratio-demo\">\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"16/9\">\n      <div class=\"ratio-box__content\" data-stimeo--aspect-ratio-target=\"content\">16 / 9</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.wide\") %></figcaption>\n  </figure>\n\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"1/1\">\n      <div class=\"ratio-box__content\" data-stimeo--aspect-ratio-target=\"content\">1 / 1</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.square\") %></figcaption>\n  </figure>\n\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"3/4\">\n      <div class=\"ratio-box__content\" data-stimeo--aspect-ratio-target=\"content\">3 / 4</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.portrait\") %></figcaption>\n  </figure>\n</div>\n"
+      "source": "<%# Markup for the aspect-ratio demo.\n    The library only supplies the ratio Value as the --stimeo--aspect-ratio custom\n    property; demo.css does the actual ratio rendering\n    (aspect-ratio: var(--stimeo--aspect-ratio)). %>\n<div class=\"aspect-ratio-demo\">\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"16/9\">\n      <div class=\"ratio-box__content\">16 / 9</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.wide\") %></figcaption>\n  </figure>\n\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"1/1\">\n      <div class=\"ratio-box__content\">1 / 1</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.square\") %></figcaption>\n  </figure>\n\n  <figure class=\"aspect-ratio-demo__item\">\n    <div class=\"ratio-box\" data-controller=\"stimeo--aspect-ratio\"\n         data-stimeo--aspect-ratio-ratio-value=\"3/4\">\n      <div class=\"ratio-box__content\">3 / 4</div>\n    </div>\n    <figcaption><%= t(\"components.aspect_ratio.demo.portrait\") %></figcaption>\n  </figure>\n</div>\n"
     },
     "stimeo--auto-submit": {
       "file": "examples/auto_submit/_demo.html.erb",
@@ -27,7 +27,7 @@
     },
     "stimeo--avatar": {
       "file": "examples/avatar/_demo.html.erb",
-      "source": "<%# Markup for the avatar demo.\n    The accessible name is owned solely by the container (role=\"img\" + aria-label);\n    the inner <img> and fallback use aria-hidden=\"true\" to avoid double announcement.\n    The library only detects load/error and toggles display (data-state); shape,\n    color, and size are drawn by demo.css. %>\n<div class=\"avatar-demo\">\n  <%# 1. An avatar that loads successfully. The src is a self-contained data-URI SVG that\n      draws a person silhouette (a picture, not letters) so the \"loaded image\" state reads\n      clearly different from the initials fallback below. %>\n  <figure class=\"avatar-demo__item\">\n    <span\n      class=\"avatar\"\n      data-controller=\"stimeo--avatar\"\n      role=\"img\"\n      aria-label=\"<%= t(\"components.avatar.demo.name_ok\") %>\"\n      data-stimeo--avatar-src-value=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%236366f1'/%3E%3Cstop%20offset='1'%20stop-color='%234338ca'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='96'%20height='96'%20fill='url(%23g)'/%3E%3Ccircle%20cx='48'%20cy='38'%20r='17'%20fill='%23eef2ff'/%3E%3Cpath%20d='M20%2084%20a28%2028%200%200%201%2056%200%20Z'%20fill='%23eef2ff'/%3E%3C/svg%3E\">\n      <img\n        class=\"avatar__image\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-stimeo--avatar-target=\"image\"\n        data-action=\"load->stimeo--avatar#onLoad error->stimeo--avatar#onError\">\n      <span\n        class=\"avatar__fallback\"\n        aria-hidden=\"true\"\n        hidden\n        data-stimeo--avatar-target=\"fallback\"\n      >AU</span>\n    </span>\n    <figcaption><%= t(\"components.avatar.demo.caption_ok\") %></figcaption>\n  </figure>\n\n  <%# 2. An avatar that fails to load (nonexistent path → fallback initials). The browser\n      logs an expected 404 for the missing image — that is the point: it triggers the error\n      → fallback path the library handles. %>\n  <figure class=\"avatar-demo__item\">\n    <span\n      class=\"avatar\"\n      data-controller=\"stimeo--avatar\"\n      role=\"img\"\n      aria-label=\"<%= t(\"components.avatar.demo.name_fallback\") %>\"\n      data-stimeo--avatar-src-value=\"/this-image-does-not-exist.jpg\">\n      <img\n        class=\"avatar__image\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-stimeo--avatar-target=\"image\"\n        data-action=\"load->stimeo--avatar#onLoad error->stimeo--avatar#onError\">\n      <span\n        class=\"avatar__fallback\"\n        aria-hidden=\"true\"\n        hidden\n        data-stimeo--avatar-target=\"fallback\"\n      >JD</span>\n    </span>\n    <figcaption><%= t(\"components.avatar.demo.caption_fallback\") %></figcaption>\n  </figure>\n</div>\n"
+      "source": "<%# Markup for the avatar demo.\n    The accessible name is owned solely by the container (role=\"img\" + aria-label);\n    the inner <img> and fallback use aria-hidden=\"true\" to avoid double announcement.\n    The library only tracks the source and its load state, exposing empty / loading /\n    loaded / error on data-state; shape, color, and size are drawn by demo.css. %>\n<div class=\"avatar-demo\">\n  <%# 1. An avatar that loads successfully. The src is a self-contained data-URI SVG that\n      draws a person silhouette (a picture, not letters) so the \"loaded image\" state reads\n      clearly different from the initials fallback below. %>\n  <figure class=\"avatar-demo__item\">\n    <span\n      class=\"avatar\"\n      data-controller=\"stimeo--avatar\"\n      role=\"img\"\n      aria-label=\"<%= t(\"components.avatar.demo.name_ok\") %>\"\n      data-stimeo--avatar-src-value=\"data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='96'%20height='96'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%236366f1'/%3E%3Cstop%20offset='1'%20stop-color='%234338ca'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='96'%20height='96'%20fill='url(%23g)'/%3E%3Ccircle%20cx='48'%20cy='38'%20r='17'%20fill='%23eef2ff'/%3E%3Cpath%20d='M20%2084%20a28%2028%200%200%201%2056%200%20Z'%20fill='%23eef2ff'/%3E%3C/svg%3E\">\n      <img\n        class=\"avatar__image\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-stimeo--avatar-target=\"image\"\n        data-action=\"load->stimeo--avatar#onLoad error->stimeo--avatar#onError\">\n      <span\n        class=\"avatar__fallback\"\n        aria-hidden=\"true\"\n        hidden\n        data-stimeo--avatar-target=\"fallback\"\n      >AU</span>\n    </span>\n    <figcaption><%= t(\"components.avatar.demo.caption_ok\") %></figcaption>\n  </figure>\n\n  <%# 2. An avatar that fails to load (nonexistent path → fallback initials). The browser\n      logs an expected 404 for the missing image — that is the point: it triggers the error\n      → fallback path the library handles. %>\n  <figure class=\"avatar-demo__item\">\n    <span\n      class=\"avatar\"\n      data-controller=\"stimeo--avatar\"\n      role=\"img\"\n      aria-label=\"<%= t(\"components.avatar.demo.name_fallback\") %>\"\n      data-stimeo--avatar-src-value=\"/this-image-does-not-exist.jpg\">\n      <img\n        class=\"avatar__image\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        data-stimeo--avatar-target=\"image\"\n        data-action=\"load->stimeo--avatar#onLoad error->stimeo--avatar#onError\">\n      <span\n        class=\"avatar__fallback\"\n        aria-hidden=\"true\"\n        hidden\n        data-stimeo--avatar-target=\"fallback\"\n      >JD</span>\n    </span>\n    <figcaption><%= t(\"components.avatar.demo.caption_fallback\") %></figcaption>\n  </figure>\n\n  <%# 3. An avatar with no image target at all. Both targets are optional, so a\n      fallback-only avatar is valid and settles in the empty state. %>\n  <figure class=\"avatar-demo__item\">\n    <span\n      class=\"avatar\"\n      data-controller=\"stimeo--avatar\"\n      role=\"img\"\n      aria-label=\"<%= t(\"components.avatar.demo.name_empty\") %>\">\n      <span\n        class=\"avatar__fallback\"\n        aria-hidden=\"true\"\n        data-stimeo--avatar-target=\"fallback\"\n      >GU</span>\n    </span>\n    <figcaption><%= t(\"components.avatar.demo.caption_empty\") %></figcaption>\n  </figure>\n</div>\n"
     },
     "stimeo--breadcrumb": {
       "file": "examples/breadcrumb/_demo.html.erb",
@@ -103,7 +103,7 @@
     },
     "stimeo--date-range-picker": {
       "file": "examples/date_range_picker/_demo.html.erb",
-      "source": "<%# Markup for the date-range-picker (range-selection calendar) demo.\n    stimeo--date-range-picker derives from calendar and handles two-point start/end\n    selection, a provisional range preview mid-selection, marking in-range cells,\n    auto-swapping when start > end, applying presets, and grid keyboard movement\n    (roving). Range ends are shown with aria-selected and the inside with data-in-range;\n    placement and styling live in demo.css. %>\n<div class=\"drp demo-card\" data-controller=\"stimeo--date-range-picker\">\n  <div class=\"drp__header\">\n    <button class=\"drp__nav\" type=\"button\"\n            data-action=\"click->stimeo--date-range-picker#prev\"\n            aria-label=\"<%= t(\"components.date_range_picker.demo.prev_month\") %>\">‹</button>\n    <span class=\"drp__label\" id=\"drp-month\" aria-live=\"polite\"\n          data-stimeo--date-range-picker-target=\"monthLabel\"></span>\n    <button class=\"drp__nav\" type=\"button\"\n            data-action=\"click->stimeo--date-range-picker#next\"\n            aria-label=\"<%= t(\"components.date_range_picker.demo.next_month\") %>\">›</button>\n  </div>\n\n  <div class=\"drp__weekdays\" aria-hidden=\"true\">\n    <% t(\"components.date_range_picker.demo.weekdays\").each do |day| %>\n      <span class=\"drp__weekday\"><%= day %></span>\n    <% end %>\n  </div>\n\n  <div class=\"drp__grid\" role=\"grid\" aria-labelledby=\"drp-month\"\n       data-stimeo--date-range-picker-target=\"grid\">\n    <% 6.times do %>\n      <div class=\"drp__row\" role=\"row\">\n        <% 7.times do %>\n          <button class=\"drp__cell\" type=\"button\" role=\"gridcell\" tabindex=\"-1\"\n                  data-stimeo--date-range-picker-target=\"cell\"\n                  data-action=\"click->stimeo--date-range-picker#selectDate\n                               mouseenter->stimeo--date-range-picker#previewTo\n                               focus->stimeo--date-range-picker#previewTo\n                               keydown->stimeo--date-range-picker#onKeydown\"></button>\n        <% end %>\n      </div>\n    <% end %>\n  </div>\n\n  <div class=\"drp__presets\" role=\"group\"\n       aria-label=\"<%= t(\"components.date_range_picker.demo.presets_label\") %>\">\n    <button class=\"drp__preset\" type=\"button\" data-range=\"today\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_today\") %>\n    </button>\n    <button class=\"drp__preset\" type=\"button\" data-range=\"last7\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_last7\") %>\n    </button>\n    <button class=\"drp__preset\" type=\"button\" data-range=\"thisMonth\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_this_month\") %>\n    </button>\n  </div>\n\n  <span class=\"drp__status\" role=\"status\" aria-live=\"polite\"\n        data-stimeo--date-range-picker-target=\"status\"></span>\n\n  <input type=\"hidden\" name=\"start_date\" data-stimeo--date-range-picker-target=\"startField\" />\n  <input type=\"hidden\" name=\"end_date\" data-stimeo--date-range-picker-target=\"endField\" />\n</div>\n"
+      "source": "<%# Markup for the date-range-picker (range-selection calendar) demo.\n    stimeo--date-range-picker derives from calendar and handles two-point start/end\n    selection, a provisional range preview mid-selection, marking in-range cells,\n    auto-swapping when start > end, applying presets, and grid keyboard movement\n    (roving). Range ends are shown with aria-selected and the inside with data-in-range;\n    placement and styling live in demo.css.\n\n    Two unavailable days are declared as data rather than written onto cells. The\n    42 cells are reused for a different date every month, so availability has to\n    be keyed by the date; the controller derives each cell's aria-disabled from\n    this array on every paint. A range may still span such a day — it just cannot\n    end on one. %>\n<% blackout = [3.days.from_now, 4.days.from_now].map { |day| day.strftime(\"%Y-%m-%d\") } %>\n<div class=\"drp demo-card\" data-controller=\"stimeo--date-range-picker\"\n     data-stimeo--date-range-picker-disabled-dates-value=\"<%= blackout.to_json %>\">\n  <div class=\"drp__header\">\n    <button class=\"drp__nav\" type=\"button\"\n            data-action=\"click->stimeo--date-range-picker#prev\"\n            aria-label=\"<%= t(\"components.date_range_picker.demo.prev_month\") %>\">‹</button>\n    <span class=\"drp__label\" id=\"drp-month\" aria-live=\"polite\"\n          data-stimeo--date-range-picker-target=\"monthLabel\"></span>\n    <button class=\"drp__nav\" type=\"button\"\n            data-action=\"click->stimeo--date-range-picker#next\"\n            aria-label=\"<%= t(\"components.date_range_picker.demo.next_month\") %>\">›</button>\n  </div>\n\n  <div class=\"drp__weekdays\" aria-hidden=\"true\">\n    <% t(\"components.date_range_picker.demo.weekdays\").each do |day| %>\n      <span class=\"drp__weekday\"><%= day %></span>\n    <% end %>\n  </div>\n\n  <div class=\"drp__grid\" role=\"grid\" aria-labelledby=\"drp-month\"\n       data-stimeo--date-range-picker-target=\"grid\">\n    <% 6.times do %>\n      <div class=\"drp__row\" role=\"row\">\n        <% 7.times do %>\n          <button class=\"drp__cell\" type=\"button\" role=\"gridcell\" tabindex=\"-1\"\n                  data-stimeo--date-range-picker-target=\"cell\"\n                  data-action=\"click->stimeo--date-range-picker#selectDate\n                               mouseenter->stimeo--date-range-picker#previewTo\n                               focus->stimeo--date-range-picker#previewTo\n                               keydown->stimeo--date-range-picker#onKeydown\"></button>\n        <% end %>\n      </div>\n    <% end %>\n  </div>\n\n  <div class=\"drp__presets\" role=\"group\"\n       aria-label=\"<%= t(\"components.date_range_picker.demo.presets_label\") %>\">\n    <button class=\"drp__preset\" type=\"button\" data-range=\"today\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_today\") %>\n    </button>\n    <button class=\"drp__preset\" type=\"button\" data-range=\"last7\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_last7\") %>\n    </button>\n    <button class=\"drp__preset\" type=\"button\" data-range=\"thisMonth\"\n            data-action=\"click->stimeo--date-range-picker#applyPreset\">\n      <%= t(\"components.date_range_picker.demo.preset_this_month\") %>\n    </button>\n  </div>\n\n  <span class=\"drp__status\" role=\"status\" aria-live=\"polite\"\n        data-stimeo--date-range-picker-target=\"status\"></span>\n\n  <%# Says on screen why two days are struck out. The dates move with today, so\n      without this the exclusion reads as a glitch rather than a demonstration. %>\n  <p class=\"drp__note\"><%= t(\"components.date_range_picker.demo.blackout_note\") %></p>\n\n  <input type=\"hidden\" name=\"start_date\" data-stimeo--date-range-picker-target=\"startField\" />\n  <input type=\"hidden\" name=\"end_date\" data-stimeo--date-range-picker-target=\"endField\" />\n</div>\n"
     },
     "stimeo--dialog": {
       "file": "examples/dialog/_demo.html.erb",
@@ -219,7 +219,7 @@
     },
     "stimeo--multi-select": {
       "file": "examples/multi_select/_demo.html.erb",
-      "source": "<%# Markup for the multi-select (multiple-selection combobox) demo.\n    Filter candidates as you type, select several, and show the selected ones as chips.\n    Focus stays on the input; the active candidate is shown via aria-activedescendant\n    and selection via aria-selected. The library handles filtering, multi-select\n    toggling, chip create/remove, roving, live announcements, and dismiss. Placement\n    lives in demo.css. %>\n<div class=\"multi-select\" data-controller=\"stimeo--multi-select\">\n  <span id=\"multi-select-label\" class=\"multi-select__label\">\n    <%= t(\"components.multi_select.demo.label\") %>\n  </span>\n\n  <ul\n    class=\"multi-select__tags\"\n    aria-label=\"<%= t(\"components.multi_select.demo.selected_label\") %>\"\n    data-stimeo--multi-select-target=\"tags\"></ul>\n\n  <input\n    type=\"text\"\n    class=\"multi-select__input\"\n    role=\"combobox\"\n    aria-expanded=\"false\"\n    aria-autocomplete=\"list\"\n    aria-controls=\"multi-select-list\"\n    aria-labelledby=\"multi-select-label\"\n    placeholder=\"<%= t(\"components.multi_select.demo.placeholder\") %>\"\n    data-stimeo--multi-select-target=\"input\"\n    data-action=\"input->stimeo--multi-select#filter\n                 keydown->stimeo--multi-select#onKeydown\n                 focus->stimeo--multi-select#open\" />\n\n  <ul\n    id=\"multi-select-list\"\n    class=\"multi-select__list\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    aria-label=\"<%= t(\"components.multi_select.demo.options_label\") %>\"\n    hidden\n    data-stimeo--multi-select-target=\"list\">\n    <% %w[apple banana cherry grape orange melon].each_with_index do |fruit, index| %>\n      <li\n        id=\"multi-select-opt-<%= index %>\"\n        class=\"multi-select__option\"\n        role=\"option\"\n        aria-selected=\"false\"\n        data-value=\"<%= fruit %>\"\n        data-stimeo--multi-select-target=\"option\"\n        data-action=\"click->stimeo--multi-select#toggleOption\">\n        <%= t(\"components.multi_select.demo.options.#{fruit}\") %>\n      </li>\n    <% end %>\n  </ul>\n\n  <span\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"multi-select__status visually-hidden\"\n    data-stimeo--multi-select-target=\"status\"></span>\n\n  <template data-stimeo--multi-select-target=\"tagTemplate\">\n    <li class=\"multi-select__tag\" data-stimeo--multi-select-target=\"tag\">\n      <span data-multi-select-slot=\"label\"></span>\n      <%# Removal is handled by a delegated listener on the tags 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=\"multi-select__remove\"\n        tabindex=\"-1\">×</button>\n    </li>\n  </template>\n</div>\n"
+      "source": "<%# Markup for the multi-select (multiple-selection combobox) demo.\n    Filter candidates as you type, select several, and show the selected ones as chips.\n    Focus stays on the input; the active candidate is shown via aria-activedescendant\n    and selection via aria-selected. The library handles filtering, multi-select\n    toggling, chip create/remove, roving, shared announcements, and dismiss. Placement\n    lives in demo.css. %>\n<% announce_selected = t(\"components.multi_select.demo.announce_selected\") %>\n<% announce_removed = t(\"components.multi_select.demo.announce_removed\") %>\n<% remove_label = t(\"components.multi_select.demo.remove_label\") %>\n<div\n  class=\"multi-select\"\n  data-controller=\"stimeo--multi-select\"\n  data-stimeo--multi-select-announce-text-value=\"<%= announce_selected %>\"\n  data-stimeo--multi-select-announce-removed-text-value=\"<%= announce_removed %>\">\n  <span id=\"multi-select-label\" class=\"multi-select__label\">\n    <%= t(\"components.multi_select.demo.label\") %>\n  </span>\n\n  <ul\n    class=\"multi-select__tags\"\n    aria-label=\"<%= t(\"components.multi_select.demo.selected_label\") %>\"\n    data-stimeo--multi-select-target=\"tags\"></ul>\n\n  <input\n    type=\"text\"\n    class=\"multi-select__input\"\n    role=\"combobox\"\n    aria-expanded=\"false\"\n    aria-autocomplete=\"list\"\n    aria-controls=\"multi-select-list\"\n    aria-labelledby=\"multi-select-label\"\n    placeholder=\"<%= t(\"components.multi_select.demo.placeholder\") %>\"\n    data-stimeo--multi-select-target=\"input\"\n    data-action=\"input->stimeo--multi-select#filter\n                 keydown->stimeo--multi-select#onKeydown\n                 focus->stimeo--multi-select#open\" />\n\n  <ul\n    id=\"multi-select-list\"\n    class=\"multi-select__list\"\n    role=\"listbox\"\n    aria-multiselectable=\"true\"\n    aria-label=\"<%= t(\"components.multi_select.demo.options_label\") %>\"\n    hidden\n    data-stimeo--multi-select-target=\"list\">\n    <% %w[apple banana cherry grape orange melon].each_with_index do |fruit, index| %>\n      <li\n        id=\"multi-select-opt-<%= index %>\"\n        class=\"multi-select__option\"\n        role=\"option\"\n        aria-selected=\"false\"\n        data-value=\"<%= fruit %>\"\n        data-stimeo--multi-select-target=\"option\"\n        data-action=\"click->stimeo--multi-select#toggleOption\">\n        <%= t(\"components.multi_select.demo.options.#{fruit}\") %>\n      </li>\n    <% end %>\n  </ul>\n\n  <template data-stimeo--multi-select-target=\"tagTemplate\">\n    <li class=\"multi-select__tag\" data-stimeo--multi-select-target=\"tag\">\n      <span data-stimeo--multi-select-target=\"label\"></span>\n      <%# Removal is handled by a delegated listener on the tags 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=\"multi-select__remove\"\n        tabindex=\"-1\"\n        aria-label=\"<%= remove_label %>\"\n        data-stimeo--multi-select-target=\"remove\">×</button>\n    </li>\n  </template>\n\n  <%# Selection announcements go to the shared announcer that lives in the page. %>\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--navigation-menu": {
       "file": "examples/navigation_menu/_demo.html.erb",
@@ -295,7 +295,7 @@
     },
     "stimeo--radio-group": {
       "file": "examples/radio_group/_demo.html.erb",
-      "source": "<%# Markup for the radio-group (APG Radio Group) demo.\n    A custom card-style radio. Single selection is shown via aria-checked and the single\n    tab stop via roving tabindex. Arrows move the selection (focus = selection). The\n    selected value is reflected into a hidden field; the look is the consumer's CSS. %>\n<div class=\"radio-group-demo\" role=\"radiogroup\" aria-labelledby=\"rg-label\"\n     data-controller=\"stimeo--radio-group\">\n  <span class=\"radio-group-demo__legend\" id=\"rg-label\">\n    <%= t(\"components.radio_group.demo.legend\") %>\n  </span>\n  <p class=\"radio-group-demo__hint\"><%= t(\"components.radio_group.demo.hint\") %></p>\n\n  <div class=\"radio-group-demo__options\">\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n         data-value=\"basic\" data-stimeo--radio-group-target=\"radio\"\n         data-action=\"click->stimeo--radio-group#select\n                      keydown->stimeo--radio-group#onKeydown\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.basic\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.basic_desc\") %></span>\n    </div>\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"-1\"\n         data-value=\"pro\" data-stimeo--radio-group-target=\"radio\"\n         data-action=\"click->stimeo--radio-group#select\n                      keydown->stimeo--radio-group#onKeydown\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.pro\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.pro_desc\") %></span>\n    </div>\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"-1\"\n         data-value=\"max\" data-stimeo--radio-group-target=\"radio\"\n         data-action=\"click->stimeo--radio-group#select\n                      keydown->stimeo--radio-group#onKeydown\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.max\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.max_desc\") %></span>\n    </div>\n  </div>\n\n  <input type=\"hidden\" name=\"plan\" value=\"\" data-stimeo--radio-group-target=\"field\" />\n\n  <p class=\"radio-group-demo__status\" aria-live=\"polite\">\n    <%= t(\"components.radio_group.demo.selected\") %>\n    <span data-radio-value><%= t(\"components.radio_group.demo.none\") %></span>\n  </p>\n</div>\n"
+      "source": "<%# Markup for the radio-group (APG Radio Group) demo.\n    A custom card-style radio. Single selection is shown via aria-checked and the single\n    tab stop via roving tabindex. Arrows move the selection (focus = selection). The group\n    delegates click and keydown, so the radios carry no data-action of their own. The\n    selected value is reflected into a hidden field; the look is the consumer's CSS. %>\n<div class=\"radio-group-demo\" role=\"radiogroup\" aria-labelledby=\"rg-label\"\n     data-controller=\"stimeo--radio-group\">\n  <span class=\"radio-group-demo__legend\" id=\"rg-label\">\n    <%= t(\"components.radio_group.demo.legend\") %>\n  </span>\n  <p class=\"radio-group-demo__hint\"><%= t(\"components.radio_group.demo.hint\") %></p>\n\n  <div class=\"radio-group-demo__options\">\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n         data-value=\"basic\" data-stimeo--radio-group-target=\"radio\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.basic\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.basic_desc\") %></span>\n    </div>\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"-1\"\n         data-value=\"pro\" data-stimeo--radio-group-target=\"radio\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.pro\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.pro_desc\") %></span>\n    </div>\n    <div class=\"radio-group-demo__option\" role=\"radio\" aria-checked=\"false\" tabindex=\"-1\"\n         data-value=\"max\" data-stimeo--radio-group-target=\"radio\">\n      <span class=\"radio-group-demo__name\"><%= t(\"components.radio_group.demo.max\") %></span>\n      <span class=\"radio-group-demo__desc\"><%= t(\"components.radio_group.demo.max_desc\") %></span>\n    </div>\n  </div>\n\n  <input type=\"hidden\" name=\"plan\" value=\"\" data-stimeo--radio-group-target=\"field\" />\n\n  <p class=\"radio-group-demo__status\" aria-live=\"polite\">\n    <%= t(\"components.radio_group.demo.selected\") %>\n    <span data-radio-value><%= t(\"components.radio_group.demo.none\") %></span>\n  </p>\n</div>\n"
     },
     "stimeo--range-slider": {
       "file": "examples/range_slider/_demo.html.erb",
@@ -303,7 +303,7 @@
     },
     "stimeo--rating": {
       "file": "examples/rating/_demo.html.erb",
-      "source": "<%# Markup for the rating (APG Radio Group, ordinal scale) demo.\n    Each symbol is role=\"radio\" with an aria-label (\"3 stars\", etc.). Selection is\n    aria-checked; the currently filled range is data-rating-hover (the selected value or\n    a hover preview). Focus alone does not preview, so Space (select the focused star) shows.\n    The star look is the consumer's CSS. %>\n<div class=\"rating-demo-wrap\">\n  <p class=\"rating-demo__hint\"><%= t(\"components.rating.demo.hint\") %></p>\n  <div class=\"rating-demo\" role=\"radiogroup\" aria-label=\"<%= t('components.rating.demo.label') %>\"\n       data-controller=\"stimeo--rating\"\n       data-stimeo--rating-value-value=\"0\" data-stimeo--rating-max-value=\"5\">\n    <% (1..5).each do |n| %>\n      <span class=\"rating-demo__star\" role=\"radio\" aria-checked=\"false\"\n            aria-label=\"<%= t('components.rating.demo.star', count: n) %>\"\n            tabindex=\"<%= n == 1 ? 0 : -1 %>\"\n            data-rating-value=\"<%= n %>\" data-stimeo--rating-target=\"symbol\"\n            data-action=\"click->stimeo--rating#select\n                         mouseenter->stimeo--rating#preview\n                         mouseleave->stimeo--rating#endPreview\n                         keydown->stimeo--rating#onKeydown\">\n        <svg class=\"rating-demo__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M12 2l2.9 6.26 6.86.6-5.2 4.52 1.56 6.72L12 17.1 5.88 20.6l1.56-6.72-5.2-4.52\n                   6.86-.6z\"></path>\n        </svg>\n      </span>\n    <% end %>\n\n    <input type=\"hidden\" name=\"rating\" value=\"0\" data-stimeo--rating-target=\"field\" />\n\n    <%# Subscribe to the change event to show the current value (updated by demo.js). %>\n    <span class=\"rating-demo__status\" aria-live=\"polite\"\n          data-empty-text=\"<%= t('components.rating.demo.empty') %>\"\n          data-rated-template=\"<%= t('components.rating.demo.rated') %>\"><%= t(\n            'components.rating.demo.empty'\n          ) %></span>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the rating (APG Radio Group, ordinal scale) demo.\n    Each symbol is role=\"radio\" with an aria-label (\"3 stars\", etc.). Selection is\n    aria-checked; the currently filled range is data-rating-hover (the selected value or\n    a hover/focus preview). DOM order defines values 1..N. The star look is the consumer's CSS. %>\n<div class=\"rating-demo-wrap\">\n  <p class=\"rating-demo__hint\"><%= t(\"components.rating.demo.hint\") %></p>\n  <div class=\"rating-demo\" role=\"radiogroup\" aria-label=\"<%= t('components.rating.demo.label') %>\"\n       data-controller=\"stimeo--rating\"\n       data-stimeo--rating-value-value=\"0\">\n    <% (1..5).each do |n| %>\n      <span class=\"rating-demo__star\" role=\"radio\" aria-checked=\"false\"\n            aria-label=\"<%= t('components.rating.demo.star', count: n) %>\"\n            tabindex=\"<%= n == 1 ? 0 : -1 %>\"\n            data-stimeo--rating-target=\"symbol\"\n            data-action=\"click->stimeo--rating#select\n                         mouseenter->stimeo--rating#preview\n                         mouseleave->stimeo--rating#endPreview\n                         focus->stimeo--rating#preview\n                         blur->stimeo--rating#endPreview\n                         keydown->stimeo--rating#onKeydown\">\n        <svg class=\"rating-demo__icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <path d=\"M12 2l2.9 6.26 6.86.6-5.2 4.52 1.56 6.72L12 17.1 5.88 20.6l1.56-6.72-5.2-4.52\n                   6.86-.6z\"></path>\n        </svg>\n      </span>\n    <% end %>\n\n    <input type=\"hidden\" name=\"rating\" value=\"0\" data-stimeo--rating-target=\"field\" />\n\n    <%# Subscribe to committed and reconciled values to update this instance's status. %>\n    <span class=\"rating-demo__status\" aria-live=\"polite\"\n          data-empty-text=\"<%= t('components.rating.demo.empty') %>\"\n          data-rated-template=\"<%= t('components.rating.demo.rated') %>\"><%= t(\n            'components.rating.demo.empty'\n          ) %></span>\n  </div>\n</div>\n"
     },
     "stimeo--read-more": {
       "file": "examples/read_more/_demo.html.erb",
@@ -403,7 +403,7 @@
     },
     "stimeo--tags-input": {
       "file": "examples/tags_input/_demo.html.erb",
-      "source": "<%# Markup for the tags-input demo.\n    Enter or a comma (delimiter) turns the input value into a tag, blocking duplicates /\n    empties / over-limit. Tag remove buttons move via roving (left/right keys), and\n    Backspace on an empty input deletes the previous tag. The library handles tag\n    create/remove, hidden-field sync, focus handoff, and live announcements. %>\n<div class=\"tags-input\" data-controller=\"stimeo--tags-input\"\n     data-stimeo--tags-input-delimiter-value=\",\"\n     data-stimeo--tags-input-name-value=\"frameworks[]\">\n  <ul\n    class=\"tags-input__tags\"\n    role=\"list\"\n    aria-label=\"<%= t(\"components.tags_input.demo.tags_label\") %>\"\n    data-stimeo--tags-input-target=\"tags\"></ul>\n\n  <input\n    type=\"text\"\n    class=\"tags-input__input\"\n    aria-label=\"<%= t(\"components.tags_input.demo.input_label\") %>\"\n    aria-describedby=\"tags-input-help\"\n    data-stimeo--tags-input-target=\"input\"\n    data-action=\"keydown->stimeo--tags-input#onKeydown\" />\n\n  <span id=\"tags-input-help\" class=\"tags-input__help\">\n    <%= t(\"components.tags_input.demo.help\") %>\n  </span>\n\n  <span\n    role=\"status\"\n    aria-live=\"polite\"\n    class=\"tags-input__status visually-hidden\"\n    data-stimeo--tags-input-target=\"status\"></span>\n\n  <%# The library creates and syncs the submit hidden inputs as name=\"frameworks[]\". %>\n  <div hidden data-stimeo--tags-input-target=\"fields\"></div>\n\n  <template data-stimeo--tags-input-target=\"tagTemplate\">\n    <li class=\"tags-input__tag\" role=\"listitem\" data-stimeo--tags-input-target=\"tag\">\n      <span data-tags-input-slot=\"label\"></span>\n      <%# Removal is handled by a delegated listener on the tags 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=\"tags-input__remove\"\n        tabindex=\"-1\">×</button>\n    </li>\n  </template>\n</div>\n"
+      "source": "<%# Markup for the tags-input demo.\n    Enter or a comma (delimiter) turns the input value into a tag, blocking duplicates /\n    empties / over-limit. Tag remove buttons move via roving (left/right keys), and\n    Backspace on an empty input deletes the previous tag. The library handles tag\n    create/remove, hidden-field sync, focus handoff, and shared announcements. %>\n<% announce_added = t(\"components.tags_input.demo.announce_added\") %>\n<% announce_removed = t(\"components.tags_input.demo.announce_removed\") %>\n<% remove_label = t(\"components.tags_input.demo.remove_label\") %>\n<div class=\"tags-input\" data-controller=\"stimeo--tags-input\"\n     data-stimeo--tags-input-delimiter-value=\",\"\n     data-stimeo--tags-input-name-value=\"frameworks[]\"\n     data-stimeo--tags-input-announce-text-value=\"<%= announce_added %>\"\n     data-stimeo--tags-input-announce-removed-text-value=\"<%= announce_removed %>\">\n  <ul\n    class=\"tags-input__tags\"\n    role=\"list\"\n    aria-label=\"<%= t(\"components.tags_input.demo.tags_label\") %>\"\n    data-stimeo--tags-input-target=\"tags\"></ul>\n\n  <input\n    type=\"text\"\n    class=\"tags-input__input\"\n    aria-label=\"<%= t(\"components.tags_input.demo.input_label\") %>\"\n    aria-describedby=\"tags-input-help\"\n    data-stimeo--tags-input-target=\"input\"\n    data-action=\"keydown->stimeo--tags-input#onKeydown\" />\n\n  <span id=\"tags-input-help\" class=\"tags-input__help\">\n    <%= t(\"components.tags_input.demo.help\") %>\n  </span>\n\n  <%# The library creates and syncs the submit hidden inputs as name=\"frameworks[]\". %>\n  <div hidden data-stimeo--tags-input-target=\"fields\"></div>\n\n  <template data-stimeo--tags-input-target=\"tagTemplate\">\n    <li class=\"tags-input__tag\" role=\"listitem\" data-stimeo--tags-input-target=\"tag\">\n      <span data-stimeo--tags-input-target=\"label\"></span>\n      <%# Removal is handled by a delegated listener on the tags 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=\"tags-input__remove\"\n        tabindex=\"-1\"\n        aria-label=\"<%= remove_label %>\"\n        data-stimeo--tags-input-target=\"remove\">×</button>\n    </li>\n  </template>\n\n  <%# Tag announcements go to the shared announcer that lives in the page. %>\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--textarea-autosize": {
       "file": "examples/textarea_autosize/_demo.html.erb",
@@ -423,7 +423,7 @@
     },
     "stimeo--toggle-group": {
       "file": "examples/toggle_group/_demo.html.erb",
-      "source": "<%# Markup for the toggle-group (APG Button toggle + Toolbar roving) demo.\n    Pressed state is aria-pressed; the single tab stop is roving tabindex. Arrows only\n    move focus; toggling is Space/Enter and click. Multiple selection (multiple). The look\n    switches on [aria-pressed=\"true\"]. %>\n<div class=\"toggle-group-demo\" role=\"group\"\n     aria-label=\"<%= t('components.toggle_group.demo.label') %>\"\n     data-controller=\"stimeo--toggle-group\">\n  <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"0\"\n          aria-label=\"<%= t('components.toggle_group.demo.bold') %>\" data-value=\"bold\"\n          data-stimeo--toggle-group-target=\"item\"\n          data-action=\"click->stimeo--toggle-group#toggle\n                       keydown->stimeo--toggle-group#onKeydown\">\n    <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"></path>\n      <path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"></path>\n    </svg>\n  </button>\n  <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n          aria-label=\"<%= t('components.toggle_group.demo.italic') %>\" data-value=\"italic\"\n          data-stimeo--toggle-group-target=\"item\"\n          data-action=\"click->stimeo--toggle-group#toggle\n                       keydown->stimeo--toggle-group#onKeydown\">\n    <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"></line>\n      <line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"></line>\n      <line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"></line>\n    </svg>\n  </button>\n  <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n          aria-label=\"<%= t('components.toggle_group.demo.underline') %>\" data-value=\"underline\"\n          data-stimeo--toggle-group-target=\"item\"\n          data-action=\"click->stimeo--toggle-group#toggle\n                       keydown->stimeo--toggle-group#onKeydown\">\n    <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"M6 3v7a6 6 0 0 0 12 0V3\"></path>\n      <line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"></line>\n    </svg>\n  </button>\n</div>\n"
+      "source": "<%# Markup for the toggle-group demo: multiple selection, single selection, and\n    unavailable items. The group delegates click and keydown, so the items carry\n    no data-action of their own. %>\n<div class=\"toggle-group-demo-suite\">\n  <section class=\"toggle-group-demo__example\">\n    <h3 class=\"toggle-group-demo__heading\" id=\"toggle-group-multiple-heading\">\n      <%= t(\"components.toggle_group.demo.multiple_heading\") %>\n    </h3>\n    <div class=\"toggle-group-demo\" role=\"group\"\n         aria-labelledby=\"toggle-group-multiple-heading\"\n         data-controller=\"stimeo--toggle-group\">\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"0\"\n              aria-label=\"<%= t('components.toggle_group.demo.bold') %>\" data-value=\"bold\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M6 4h8a4 4 0 0 1 0 8H6z\"></path>\n          <path d=\"M6 12h9a4 4 0 0 1 0 8H6z\"></path>\n        </svg>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n              aria-label=\"<%= t('components.toggle_group.demo.italic') %>\" data-value=\"italic\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <line x1=\"19\" y1=\"4\" x2=\"10\" y2=\"4\"></line>\n          <line x1=\"14\" y1=\"20\" x2=\"5\" y2=\"20\"></line>\n          <line x1=\"15\" y1=\"4\" x2=\"9\" y2=\"20\"></line>\n        </svg>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n              aria-label=\"<%= t('components.toggle_group.demo.underline') %>\" data-value=\"underline\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M6 3v7a6 6 0 0 0 12 0V3\"></path>\n          <line x1=\"4\" y1=\"21\" x2=\"20\" y2=\"21\"></line>\n        </svg>\n      </button>\n    </div>\n  </section>\n\n  <section class=\"toggle-group-demo__example\">\n    <h3 class=\"toggle-group-demo__heading\" id=\"toggle-group-single-heading\">\n      <%= t(\"components.toggle_group.demo.single_heading\") %>\n    </h3>\n    <div class=\"toggle-group-demo\" role=\"group\"\n         aria-labelledby=\"toggle-group-single-heading\"\n         data-controller=\"stimeo--toggle-group\"\n         data-stimeo--toggle-group-mode-value=\"single\">\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"true\" tabindex=\"0\"\n              aria-label=\"<%= t('components.toggle_group.demo.align_left') %>\" data-value=\"left\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" aria-hidden=\"true\">\n          <path d=\"M4 6h16M4 10h11M4 14h16M4 18h9\"></path>\n        </svg>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n              aria-label=\"<%= t('components.toggle_group.demo.align_center') %>\" data-value=\"center\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" aria-hidden=\"true\">\n          <path d=\"M4 6h16M6 10h12M4 14h16M7 18h10\"></path>\n        </svg>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item\" aria-pressed=\"false\" tabindex=\"-1\"\n              aria-label=\"<%= t('components.toggle_group.demo.align_right') %>\" data-value=\"right\"\n              data-stimeo--toggle-group-target=\"item\">\n        <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" aria-hidden=\"true\">\n          <path d=\"M4 6h16M9 10h11M4 14h16M11 18h9\"></path>\n        </svg>\n      </button>\n    </div>\n  </section>\n\n  <section class=\"toggle-group-demo__example\">\n    <h3 class=\"toggle-group-demo__heading\" id=\"toggle-group-disabled-heading\">\n      <%= t(\"components.toggle_group.demo.disabled_heading\") %>\n    </h3>\n    <div class=\"toggle-group-demo\" role=\"group\"\n         aria-labelledby=\"toggle-group-disabled-heading\"\n         data-controller=\"stimeo--toggle-group\">\n      <button type=\"button\" class=\"toggle-group-demo__item toggle-group-demo__item--wide\"\n              aria-pressed=\"false\" tabindex=\"0\" data-value=\"available\"\n              data-stimeo--toggle-group-target=\"item\">\n        <%= t(\"components.toggle_group.demo.available\") %>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item toggle-group-demo__item--wide\"\n              aria-pressed=\"false\" tabindex=\"-1\" data-value=\"native-disabled\" disabled\n              data-stimeo--toggle-group-target=\"item\">\n        <%= t(\"components.toggle_group.demo.native_disabled\") %>\n      </button>\n      <button type=\"button\" class=\"toggle-group-demo__item toggle-group-demo__item--wide\"\n              aria-pressed=\"false\" tabindex=\"-1\" data-value=\"aria-disabled\" aria-disabled=\"true\"\n              data-stimeo--toggle-group-target=\"item\">\n        <%= t(\"components.toggle_group.demo.aria_disabled\") %>\n      </button>\n    </div>\n  </section>\n</div>\n"
     },
     "stimeo--toolbar": {
       "file": "examples/toolbar/_demo.html.erb",

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 11,
-  "packageVersion": "0.5.0",
+  "packageVersion": "0.6.0",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -122,9 +122,7 @@
       "forbiddenAria": []
     },
     "stimeo--aspect-ratio": {
-      "targets": [
-        "content"
-      ],
+      "targets": [],
       "values": [
         "ratio"
       ],
@@ -192,9 +190,7 @@
       "events": [
         "error"
       ],
-      "requiredTargets": [
-        "image"
-      ],
+      "requiredTargets": [],
       "conditionalTargets": [],
       "a11y": [],
       "keyboard": [],
@@ -349,7 +345,8 @@
       "events": [
         "change",
         "pause",
-        "play"
+        "play",
+        "reconcile"
       ],
       "requiredTargets": [
         "slide",
@@ -475,11 +472,10 @@
         "onParentChange"
       ],
       "events": [
-        "change"
-      ],
-      "requiredTargets": [
-        "parent"
+        "change",
+        "reconcile"
       ],
+      "requiredTargets": [],
       "conditionalTargets": [],
       "a11y": [],
       "keyboard": [],
@@ -488,7 +484,14 @@
       "compositions": [],
       "companions": [],
       "targetDeclarations": [],
-      "cardinality": [],
+      "cardinality": [
+        {
+          "within": "",
+          "target": "parent",
+          "max": 1,
+          "suggestion": "Keep at most one \"parent\" target in a checkbox group — omit it for a child-only aggregate, or use one select-all checkbox for the children."
+        }
+      ],
       "forbiddenAria": []
     },
     "stimeo--clipboard": {
@@ -575,7 +578,8 @@
         "onPointerDown"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [
         "slider"
@@ -1250,7 +1254,8 @@
       ],
       "values": [
         "min",
-        "max"
+        "max",
+        "disabledDates"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -1263,7 +1268,8 @@
         "selectDate"
       ],
       "events": [
-        "change"
+        "change",
+        "monthchange"
       ],
       "requiredTargets": [
         "grid",
@@ -2480,13 +2486,16 @@
         "tags",
         "tag",
         "tagTemplate",
-        "status",
+        "label",
+        "remove",
         "fields"
       ],
       "values": [
         "max",
         "name",
-        "form"
+        "form",
+        "announceText",
+        "announceRemovedText"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -2499,14 +2508,26 @@
       ],
       "events": [
         "change",
-        "filter"
+        "filter",
+        "reconcile"
       ],
       "requiredTargets": [
         "input",
         "list",
         "tags"
       ],
-      "conditionalTargets": [],
+      "conditionalTargets": [
+        {
+          "whenPresent": "tagTemplate",
+          "require": [
+            "tag",
+            "label",
+            "remove"
+          ],
+          "requireInside": true,
+          "suggestion": "Complete the chip template: inside it, it needs a \"tag\" root, a \"label\" element for the option text, and a \"remove\" button. Parts declared outside the template never reach the clone, so no selection can commit."
+        }
+      ],
       "a11y": [
         {
           "target": "input",
@@ -2580,6 +2601,13 @@
             "option"
           ],
           "suggestion": "Add role=\"option\" to each option target."
+        },
+        {
+          "target": "remove",
+          "attrs": [
+            "aria-label"
+          ],
+          "suggestion": "Add a localized aria-label to the remove target (for example, aria-label=\"Remove {label}\")."
         }
       ],
       "keyboard": [],
@@ -2735,7 +2763,8 @@
         "onKeydown"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [
         "input"
@@ -3228,7 +3257,8 @@
         "select"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [
         "radio"
@@ -3270,12 +3300,32 @@
         }
       ],
       "keyboard": [],
-      "hosts": [],
+      "hosts": [
+        {
+          "target": "radio",
+          "mode": "non-interactive-or-button",
+          "buttonTypes": [
+            "button"
+          ],
+          "suggestion": "Use <button type=\"button\">, or place the \"radio\" target on a non-interactive host such as <div role=\"radio\">."
+        }
+      ],
       "managedAria": [],
       "compositions": [],
       "companions": [],
       "targetDeclarations": [],
-      "cardinality": [],
+      "cardinality": [
+        {
+          "within": "",
+          "target": "radio",
+          "attr": "aria-checked",
+          "values": [
+            "true"
+          ],
+          "max": 1,
+          "suggestion": "Leave aria-checked=\"true\" on at most one radio and set the others to \"false\" — connect keeps the first checked radio in DOM order."
+        }
+      ],
       "forbiddenAria": []
     },
     "stimeo--range-slider": {
@@ -3413,7 +3463,6 @@
       ],
       "values": [
         "value",
-        "max",
         "clearable",
         "readonly"
       ],
@@ -3426,7 +3475,8 @@
         "select"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [
         "symbol"
@@ -4388,14 +4438,17 @@
         "tags",
         "tag",
         "tagTemplate",
-        "status",
+        "label",
+        "remove",
         "fields"
       ],
       "values": [
         "delimiter",
         "max",
         "allowDuplicates",
-        "name"
+        "name",
+        "announceText",
+        "announceRemovedText"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -4404,14 +4457,35 @@
       ],
       "events": [
         "change",
+        "reconcile",
         "reject"
       ],
       "requiredTargets": [
         "input",
-        "tags"
+        "tags",
+        "tagTemplate"
+      ],
+      "conditionalTargets": [
+        {
+          "whenPresent": "tagTemplate",
+          "require": [
+            "tag",
+            "label",
+            "remove"
+          ],
+          "requireInside": true,
+          "suggestion": "Complete the chip template: inside it, it needs a \"tag\" root, a \"label\" element for the entered text, and a \"remove\" button. Parts declared outside the template never reach the clone, so no tag can commit."
+        }
+      ],
+      "a11y": [
+        {
+          "target": "remove",
+          "attrs": [
+            "aria-label"
+          ],
+          "suggestion": "Add a localized aria-label to the remove target (for example, aria-label=\"Remove {label}\")."
+        }
       ],
-      "conditionalTargets": [],
-      "a11y": [],
       "keyboard": [],
       "hosts": [],
       "managedAria": [],
@@ -4488,17 +4562,26 @@
         "seconds",
         "wrap"
       ],
-      "valueConstraints": [],
+      "valueConstraints": [
+        {
+          "value": "step",
+          "type": "number",
+          "finite": true,
+          "greaterThan": 0,
+          "suggestion": "Set step to a positive integer.",
+          "integer": true
+        }
+      ],
       "valueRelations": [],
       "actions": [
         "onKeydown"
       ],
       "events": [
-        "change"
+        "change",
+        "reconcile"
       ],
       "requiredTargets": [
-        "segment",
-        "field"
+        "segment"
       ],
       "conditionalTargets": [],
       "a11y": [
@@ -4593,9 +4676,58 @@
         "item"
       ],
       "conditionalTargets": [],
-      "a11y": [],
+      "a11y": [
+        {
+          "target": "",
+          "attrs": [
+            "role"
+          ],
+          "values": [
+            "group"
+          ],
+          "suggestion": "Add role=\"group\" to the controller element."
+        },
+        {
+          "target": "item",
+          "attrs": [
+            "role"
+          ],
+          "values": [
+            "button"
+          ],
+          "whenElement": {
+            "exceptTags": [
+              "button"
+            ]
+          },
+          "suggestion": "Add role=\"button\" to each non-button item target."
+        },
+        {
+          "target": "",
+          "attrs": [
+            "aria-labelledby",
+            "aria-label"
+          ],
+          "whenElement": {
+            "exceptTags": [
+              "fieldset"
+            ]
+          },
+          "severity": "warning",
+          "suggestion": "Name the toggle group via aria-labelledby or aria-label."
+        }
+      ],
       "keyboard": [],
-      "hosts": [],
+      "hosts": [
+        {
+          "target": "item",
+          "mode": "non-interactive-or-button",
+          "buttonTypes": [
+            "button"
+          ],
+          "suggestion": "Use <button type=\"button\">, or place the \"item\" target on a non-interactive host such as <div role=\"button\">."
+        }
+      ],
       "managedAria": [],
       "compositions": [],
       "companions": [],

package/dist/positioning/index.d.ts

@@ -6,8 +6,8 @@ import { Controller, Application } from '@hotwired/stimulus';
  * Headless **anchored positioning**: keeps a `floating` element placed against an
  * `anchor`, flipping/shifting it away from viewport edges as the page scrolls or
  * resizes. It is the declarative surface of the opt-in {@link attachPositioning}
- * engine (`@floating-ui/dom`-based) — Radix's anchored popper / floating-ui's
- * `autoUpdate`, exposed as a controller. No dedicated APG pattern; it is the
+ * engine (`@floating-ui/dom`-based), exposing its `autoUpdate` behavior as a
+ * controller. No dedicated APG pattern; it is the
  * placement primitive the popup patterns (Tooltip / Menu / Popover …) build on.
  *
  * Markup contract (identifier: `stimeo--anchored`):