stimeo-ui 0.17.0 → 0.18.1

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 / 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 (derived from the autoplay Value, whether a slide\n          is left to rotate to, and the reduced-motion preference) and the hidden of the\n          two glyph halves: ❚❚ shows while autoplay runs, ▶ while it is stopped. The\n          icons are decorative; the accessible name comes from the aria-label above and\n          stays the same in both states. %>\n      <span aria-hidden=\"true\" data-stimeo--carousel-target=\"offLabel\">▶</span>\n      <span aria-hidden=\"true\" hidden data-stimeo--carousel-target=\"onLabel\">❚❚</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"
+      "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 (derived from the autoplay Value, whether a slide\n          is left to rotate to, and the reduced-motion preference) and the hidden of the\n          two glyph halves: ❚❚ shows while autoplay runs, ▶ while it is stopped. The\n          icons are decorative; the accessible name comes from the aria-label above and\n          stays the same in both states. %>\n      <span aria-hidden=\"true\" data-stimeo--carousel-target=\"offLabel\">▶</span>\n      <span aria-hidden=\"true\" hidden data-stimeo--carousel-target=\"onLabel\">❚❚</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\" data-stimeo--carousel-target=\"pickerList\"\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    hover and focus suspensions are understood as intentional (WCAG 2.2.2).\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",
@@ -67,7 +67,7 @@
     },
     "stimeo--combobox": {
       "file": "examples/combobox/_demo.html.erb",
-      "source": "<%# Markup for the combobox (APG Combobox / list autocomplete) demo.\n    stimeo--combobox provides list filtering on input, Arrow/Enter/Esc, and\n    aria-activedescendant. Focus stays on the input and the active option is shown via\n    aria-selected. On selection, data-value (or the text, if absent) is placed in the input. %>\n<div class=\"combobox\" data-controller=\"stimeo--combobox\">\n  <label id=\"fruit-label\" class=\"combobox__label\" for=\"fruit-input\"><%= t(\n    \"components.combobox.demo.label\"\n  ) %></label>\n  <input\n    id=\"fruit-input\"\n    type=\"text\"\n    class=\"combobox__input\"\n    role=\"combobox\"\n    aria-expanded=\"false\"\n    aria-autocomplete=\"list\"\n    aria-controls=\"fruit-list\"\n    autocomplete=\"off\"\n    data-stimeo--combobox-target=\"input\"\n    data-action=\"input->stimeo--combobox#filter\n                 keydown->stimeo--combobox#onKeydown\n                 focus->stimeo--combobox#open\n                 click->stimeo--combobox#open\">\n\n  <ul\n    id=\"fruit-list\"\n    class=\"combobox__list\"\n    role=\"listbox\"\n    aria-labelledby=\"fruit-label\"\n    data-stimeo--combobox-target=\"list\"\n    hidden>\n    <li role=\"option\" id=\"fruit-apple\" class=\"combobox__option\" data-value=\"Apple\"\n        data-stimeo--combobox-target=\"option\"\n        data-action=\"click->stimeo--combobox#select\">Apple</li>\n    <li role=\"option\" id=\"fruit-apricot\" class=\"combobox__option\" data-value=\"Apricot\"\n        data-stimeo--combobox-target=\"option\"\n        data-action=\"click->stimeo--combobox#select\">Apricot</li>\n    <li role=\"option\" id=\"fruit-banana\" class=\"combobox__option\" data-value=\"Banana\"\n        data-stimeo--combobox-target=\"option\"\n        data-action=\"click->stimeo--combobox#select\">Banana</li>\n    <li role=\"option\" id=\"fruit-cherry\" class=\"combobox__option\" data-value=\"Cherry\"\n        data-stimeo--combobox-target=\"option\"\n        data-action=\"click->stimeo--combobox#select\">Cherry</li>\n  </ul>\n\n  <%# The no-results message is a region of the empty state: the library shows it while the\n      open listbox has no match and hides it otherwise, so it is authored hidden. Copy via\n      i18n. %>\n  <div\n    class=\"combobox__empty\"\n    data-stimeo--combobox-target=\"empty\"\n    hidden><%= t(\"components.combobox.demo.empty\") %></div>\n</div>\n"
+      "source": "<%# Markup for the combobox (APG Combobox / list autocomplete) demo.\n    stimeo--combobox provides list filtering on input, Arrow/Enter/Esc, and\n    aria-activedescendant. Focus stays on the input and the active option is shown via\n    aria-selected. On selection, data-value (or the text, if absent) is placed in the input. %>\n<div class=\"combobox\" data-controller=\"stimeo--combobox\">\n  <label id=\"fruit-label\" class=\"combobox__label\" for=\"fruit-input\"><%= t(\n    \"components.combobox.demo.label\"\n  ) %></label>\n  <input\n    id=\"fruit-input\"\n    type=\"text\"\n    class=\"combobox__input\"\n    role=\"combobox\"\n    aria-expanded=\"false\"\n    aria-autocomplete=\"list\"\n    aria-controls=\"fruit-list\"\n    autocomplete=\"off\"\n    data-stimeo--combobox-target=\"input\"\n    data-action=\"input->stimeo--combobox#filter\n                 keydown->stimeo--combobox#onKeydown\n                 focus->stimeo--combobox#open\n                 click->stimeo--combobox#open\">\n\n  <ul\n    id=\"fruit-list\"\n    class=\"combobox__list\"\n    role=\"listbox\"\n    aria-labelledby=\"fruit-label\"\n    data-stimeo--combobox-target=\"list\"\n    hidden>\n    <% %w[apple apricot banana cherry].each do |fruit| %>\n      <% label = t(\"components.combobox.demo.fruits.#{fruit}\") %>\n      <li role=\"option\" id=\"fruit-<%= fruit %>\" class=\"combobox__option\" data-value=\"<%= label %>\"\n          data-stimeo--combobox-target=\"option\"\n          data-action=\"click->stimeo--combobox#select\"><%= label %></li>\n    <% end %>\n  </ul>\n\n  <%# The no-results message is a region of the empty state: the library shows it while the\n      open listbox has no match and hides it otherwise, so it is authored hidden. Copy via\n      i18n. %>\n  <div\n    class=\"combobox__empty\"\n    data-stimeo--combobox-target=\"empty\"\n    hidden><%= t(\"components.combobox.demo.empty\") %></div>\n</div>\n"
     },
     "stimeo--command-palette": {
       "file": "examples/command_palette/_demo.html.erb",
@@ -83,7 +83,7 @@
     },
     "stimeo--context-menu": {
       "file": "examples/context_menu/_demo.html.erb",
-      "source": "<%# Markup for the context_menu demo.\n    A right-click on the region (or the ContextMenu key / Shift+F10) opens a\n    role=\"menu\" at the pointer position. The interaction model is the same as a Menu\n    Button. The click coordinate is reflected on the menu as\n    --stimeo--context-menu-x / -y, and the Playground CSS uses it for top/left\n    placement (works even without the positioning module). %>\n<div class=\"context-menu\" data-controller=\"stimeo--context-menu\">\n  <div\n    class=\"context-menu__region\"\n    data-stimeo--context-menu-target=\"region\"\n    tabindex=\"0\"\n    aria-haspopup=\"menu\"\n    aria-controls=\"context-menu-list\"\n    data-action=\"\n      contextmenu->stimeo--context-menu#open\n      keydown->stimeo--context-menu#onRegionKeydown\">\n    <%= t(\"components.context_menu.demo.region\") %>\n  </div>\n\n  <ul\n    class=\"context-menu__list\"\n    id=\"context-menu-list\"\n    role=\"menu\"\n    aria-label=\"<%= t(\"components.context_menu.demo.label\") %>\"\n    data-stimeo--context-menu-target=\"menu\"\n    hidden>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.copy\") %>\n      </button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.paste\") %>\n      </button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.delete\") %>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
+      "source": "<%# Markup for the context_menu demo.\n    A right-click on the region (or the ContextMenu key / Shift+F10) opens a\n    role=\"menu\" at the pointer position. The menu itself follows the APG Menu\n    pattern. The region's role and name are yours: here a named group, which\n    advertises its opening key with aria-keyshortcuts. The click coordinate is\n    reflected on the menu as --stimeo--context-menu-x / -y, and the Playground\n    CSS uses it for top/left placement (works even without the positioning\n    module). %>\n<div class=\"context-menu\" data-controller=\"stimeo--context-menu\">\n  <div\n    class=\"context-menu__region\"\n    data-stimeo--context-menu-target=\"region\"\n    tabindex=\"0\"\n    role=\"group\"\n    aria-label=\"<%= t(\"components.context_menu.demo.region_label\") %>\"\n    aria-keyshortcuts=\"Shift+F10\"\n    aria-controls=\"context-menu-list\"\n    data-action=\"\n      contextmenu->stimeo--context-menu#open\n      keydown->stimeo--context-menu#onRegionKeydown\">\n    <%= t(\"components.context_menu.demo.region\") %>\n  </div>\n\n  <ul\n    class=\"context-menu__list\"\n    id=\"context-menu-list\"\n    role=\"menu\"\n    aria-label=\"<%= t(\"components.context_menu.demo.label\") %>\"\n    data-stimeo--context-menu-target=\"menu\"\n    hidden>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.copy\") %>\n      </button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.paste\") %>\n      </button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" class=\"demo-menuitem\" role=\"menuitem\" tabindex=\"-1\"\n              data-stimeo--context-menu-target=\"item\"\n              data-action=\"\n                click->stimeo--context-menu#activate\n                keydown->stimeo--context-menu#onItemKeydown\">\n        <%= t(\"components.context_menu.demo.delete\") %>\n      </button>\n    </li>\n  </ul>\n</div>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
     },
     "stimeo--count-up": {
       "file": "examples/count_up/_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\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\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.field\") %></span>\n  <span class=\"demo-readout__value\" data-readout\n        data-empty-text=\"<%= t(\"catalog.readout.empty\") %>\">—</span>\n</p>\n"
+      "source": "<%# Markup for the date-range-picker (range-selection calendar) demo.\n    stimeo--date-range-picker reuses stimeo--calendar's month-grid navigation model and\n    handles two-point start/end selection, a provisional range preview mid-selection,\n    marking in-range cells, auto-swapping when start > end, applying presets, and grid\n    keyboard movement (roving). Range ends are shown with aria-selected and the inside\n    with data-in-range; 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\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.field\") %></span>\n  <span class=\"demo-readout__value\" data-readout\n        data-empty-text=\"<%= t(\"catalog.readout.empty\") %>\">—</span>\n</p>\n"
     },
     "stimeo--dialog": {
       "file": "examples/dialog/_demo.html.erb",
@@ -127,7 +127,7 @@
     },
     "stimeo--dropdown": {
       "file": "examples/dropdown/_demo.html.erb",
-      "source": "<%# Markup for the dropdown demo.\n    The single source used for both the live render and the copy-paste code.\n    Connect to stimeo--dropdown via data-controller / data-*-target / data-action.\n    The behavior is the library's; the look (classes) is the Playground's CSS. %>\n<div class=\"dropdown\" data-controller=\"stimeo--dropdown\">\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    aria-expanded=\"false\"\n    data-stimeo--dropdown-target=\"trigger\"\n    data-action=\"click->stimeo--dropdown#toggle\">\n    <%= t(\"components.dropdown.demo.trigger\") %>\n  </button>\n\n  <%# The toggled menu. Starts hidden (closed).\n      Each link uses click->stimeo--dropdown#close to close the menu on selection.\n      (The links are inside the controller element, so an outside click won't close\n      it — wire it explicitly.) %>\n  <ul class=\"dropdown__menu\" data-stimeo--dropdown-target=\"menu\" hidden>\n    <li><a class=\"demo-menuitem\" href=\"#profile\" data-action=\"click->stimeo--dropdown#close\"><%= t(\n      \"components.dropdown.demo.profile\"\n    ) %></a></li>\n    <li><a class=\"demo-menuitem\" href=\"#settings\" data-action=\"click->stimeo--dropdown#close\"><%= t(\n      \"components.dropdown.demo.settings\"\n    ) %></a></li>\n    <li><a class=\"demo-menuitem\" href=\"#sign-out\" data-action=\"click->stimeo--dropdown#close\"><%= t(\n      \"components.dropdown.demo.sign_out\"\n    ) %></a></li>\n  </ul>\n</div>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
+      "source": "<%# Markup for the dropdown demo.\n    The single source used for both the live render and the copy-paste code.\n    Connect to stimeo--dropdown via data-controller / data-*-target / data-action.\n    The behavior is the library's; the look (classes) is the Playground's CSS. %>\n<div class=\"dropdown\" data-controller=\"stimeo--dropdown\">\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    aria-expanded=\"false\"\n    data-stimeo--dropdown-target=\"trigger\"\n    data-action=\"click->stimeo--dropdown#toggle\">\n    <%= t(\"components.dropdown.demo.trigger\") %>\n  </button>\n\n  <%# The toggled menu. Starts hidden (closed).\n      Each placeholder link closes the menu and prevents navigation so the event\n      readout stays visible. Real destination links can omit :prevent.\n      (The links are inside the controller element, so an outside click won't close\n      it — wire it explicitly.) %>\n  <ul class=\"dropdown__menu\" data-stimeo--dropdown-target=\"menu\" hidden>\n    <li><a class=\"demo-menuitem\" href=\"#profile\"\n      data-action=\"click->stimeo--dropdown#close:prevent\"><%= t(\n      \"components.dropdown.demo.profile\"\n    ) %></a></li>\n    <li><a class=\"demo-menuitem\" href=\"#settings\"\n      data-action=\"click->stimeo--dropdown#close:prevent\"><%= t(\n      \"components.dropdown.demo.settings\"\n    ) %></a></li>\n    <li><a class=\"demo-menuitem\" href=\"#sign-out\"\n      data-action=\"click->stimeo--dropdown#close:prevent\"><%= t(\n      \"components.dropdown.demo.sign_out\"\n    ) %></a></li>\n  </ul>\n</div>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
     },
     "stimeo--editable": {
       "file": "examples/editable/_demo.html.erb",
@@ -151,7 +151,7 @@
     },
     "stimeo--focus": {
       "file": "examples/focus/_demo.html.erb",
-      "source": "<%# Focus-scope demo: the Activate button sits outside the scope, so it invokes the\n    controller's activate action through the playground's exposed Stimulus app\n    (window.Stimulus) in demo.js. Once active, Tab cycles within the box, focus lands on\n    the initial target, and Escape or the Release button (a descendant, wired with a plain\n    data-action) ends it and restores focus. inert is left off so the soft boundary does\n    not isolate the rest of the catalog page. The library only manages focus and reflects\n    data-focus-trapped; demo.css owns the look. %>\n<div class=\"focus-demo\">\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    data-focus-demo-activate\n    aria-pressed=\"false\"\n    data-activate-label=\"<%= t('components.focus.demo.activate') %>\"\n    data-deactivate-label=\"<%= t('components.focus.demo.deactivate') %>\">\n    <%= t(\"components.focus.demo.activate\") %>\n  </button>\n\n  <div class=\"focus-demo__scope\" data-controller=\"stimeo--focus\">\n    <p class=\"focus-demo__hint\"><%= t(\"components.focus.demo.hint\") %></p>\n    <label class=\"focus-demo__field\">\n      <span><%= t(\"components.focus.demo.field\") %></span>\n      <input type=\"text\" class=\"demo-input\" data-stimeo--focus-target=\"initial\" />\n    </label>\n    <div class=\"focus-demo__bar\">\n      <button type=\"button\" class=\"demo-trigger\"><%= t(\"components.focus.demo.inner\") %></button>\n      <button type=\"button\" class=\"demo-trigger\" data-action=\"click->stimeo--focus#deactivate\">\n        <%= t(\"components.focus.demo.release\") %>\n      </button>\n    </div>\n  </div>\n</div>\n"
+      "source": "<%# stimeo--focus demo: the Activate button sits outside the scope, so it invokes the\n    controller's activate action through the playground's exposed Stimulus app\n    (window.Stimulus) in demo.js. Once active, Tab cycles within the box, focus lands on\n    the initial target, and Escape or the Release button (a descendant, wired with a plain\n    data-action) ends it and restores focus. inert is left off so the soft boundary does\n    not isolate the rest of the catalog page. The library only manages focus and reflects\n    data-focus-trapped; demo.css owns the look. %>\n<div class=\"focus-demo\">\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    data-focus-demo-activate\n    aria-pressed=\"false\"\n    data-activate-label=\"<%= t('components.focus.demo.activate') %>\"\n    data-deactivate-label=\"<%= t('components.focus.demo.deactivate') %>\">\n    <%= t(\"components.focus.demo.activate\") %>\n  </button>\n\n  <div class=\"focus-demo__scope\" data-controller=\"stimeo--focus\">\n    <p class=\"focus-demo__hint\"><%= t(\"components.focus.demo.hint\") %></p>\n    <label class=\"focus-demo__field\">\n      <span><%= t(\"components.focus.demo.field\") %></span>\n      <input type=\"text\" class=\"demo-input\" data-stimeo--focus-target=\"initial\" />\n    </label>\n    <div class=\"focus-demo__bar\">\n      <button type=\"button\" class=\"demo-trigger\"><%= t(\"components.focus.demo.inner\") %></button>\n      <button type=\"button\" class=\"demo-trigger\" data-action=\"click->stimeo--focus#deactivate\">\n        <%= t(\"components.focus.demo.release\") %>\n      </button>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--form-field": {
       "file": "examples/form_field/_demo.html.erb",
@@ -223,7 +223,7 @@
     },
     "stimeo--navigation-menu": {
       "file": "examples/navigation_menu/_demo.html.erb",
-      "source": "<%# Markup for the navigation-menu demo.\n    Two arrangements are shown.\n\n    1. Click-only (the default): a global nav where each top item opens/closes a\n       sub-panel (a set of links). The contents are links and don't use role=\"menu\"\n       (APG Disclosure navigation). The library handles syncing aria-expanded,\n       single-open behavior, closing on Escape / outside click / focus leaving, and\n       moving between top items with the left/right keys.\n    2. Hover (opt-in): openOnHover plus a hoverArea wrapper — the APG \"Disclosure\n       Navigation with Top-Level Links\" arrangement, where each <li> holds a real\n       link, a small disclosure button, and the panel. Hovering anywhere over the\n       <li> opens that item's panel; every keyboard path stays identical.\n\n    Panel placement and styling are the consumer's CSS (demo.css). %>\n<p class=\"nav-menu__caption\"><%= t(\"components.navigation_menu.demo.click_caption\") %></p>\n<nav class=\"nav-menu\" data-controller=\"stimeo--navigation-menu\"\n     aria-label=\"<%= t(\"components.navigation_menu.demo.label\") %>\">\n  <ul class=\"nav-menu__list\">\n    <li class=\"nav-menu__item\">\n      <button\n        type=\"button\"\n        class=\"demo-baritem\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-products\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <%= t(\"components.navigation_menu.demo.products.label\") %>\n      </button>\n      <div id=\"nav-menu-products\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#analytics\"><%= t(\n          \"components.navigation_menu.demo.products.links.analytics\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#automation\"><%= t(\n          \"components.navigation_menu.demo.products.links.automation\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#reports\"><%= t(\n          \"components.navigation_menu.demo.products.links.reports\"\n        ) %></a>\n      </div>\n    </li>\n    <li class=\"nav-menu__item\">\n      <button\n        type=\"button\"\n        class=\"demo-baritem\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-company\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <%= t(\"components.navigation_menu.demo.company.label\") %>\n      </button>\n      <div id=\"nav-menu-company\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#about\"><%= t(\n          \"components.navigation_menu.demo.company.links.about\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#careers\"><%= t(\n          \"components.navigation_menu.demo.company.links.careers\"\n        ) %></a>\n      </div>\n    </li>\n  </ul>\n</nav>\n\n<p class=\"nav-menu__caption\"><%= t(\"components.navigation_menu.demo.hover_caption\") %></p>\n<%# openOnHover is opt-in; hoverArea widens the hover region to the whole <li>, so\n    hovering the top-level link (not just the disclosure button) opens the panel.\n    The button keeps its own accessible name so keyboard and SR users can tell the\n    link and its disclosure apart. %>\n<nav class=\"nav-menu\" data-controller=\"stimeo--navigation-menu\"\n     data-stimeo--navigation-menu-open-on-hover-value=\"true\"\n     aria-label=\"<%= t(\"components.navigation_menu.demo.hover.label\") %>\">\n  <ul class=\"nav-menu__list\">\n    <li class=\"nav-menu__item\" data-stimeo--navigation-menu-target=\"hoverArea\">\n      <a class=\"demo-baritem nav-menu__link\" href=\"#solutions\">\n        <%= t(\"components.navigation_menu.demo.hover.solutions.label\") %>\n      </a>\n      <button\n        type=\"button\"\n        class=\"demo-baritem nav-menu__disclosure\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-solutions\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <span aria-hidden=\"true\">▾</span>\n        <span class=\"visually-hidden\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.toggle\"\n        ) %></span>\n      </button>\n      <div id=\"nav-menu-solutions\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#retail\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.links.retail\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#finance\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.links.finance\"\n        ) %></a>\n      </div>\n    </li>\n    <li class=\"nav-menu__item\" data-stimeo--navigation-menu-target=\"hoverArea\">\n      <a class=\"demo-baritem nav-menu__link\" href=\"#resources\">\n        <%= t(\"components.navigation_menu.demo.hover.resources.label\") %>\n      </a>\n      <button\n        type=\"button\"\n        class=\"demo-baritem nav-menu__disclosure\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-resources\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <span aria-hidden=\"true\">▾</span>\n        <span class=\"visually-hidden\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.toggle\"\n        ) %></span>\n      </button>\n      <div id=\"nav-menu-resources\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#guides\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.links.guides\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#blog\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.links.blog\"\n        ) %></a>\n      </div>\n    </li>\n  </ul>\n</nav>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
+      "source": "<%# Markup for the navigation-menu demo.\n    Two arrangements are shown.\n\n    1. Click-only (the default): a global nav where each top item opens/closes a\n       sub-panel (a set of links). The contents are links and don't use role=\"menu\"\n       (APG Disclosure navigation). The library handles syncing aria-expanded,\n       single-open behavior, closing on Escape / outside click / focus leaving, and\n       moving between top items with the left/right keys.\n    2. Hover (opt-in): openOnHover plus a hoverArea wrapper — the APG \"Disclosure\n       Navigation with Top-Level Links\" arrangement, where each <li> holds a real\n       link, a small disclosure button, and the panel. Hovering anywhere over the\n       <li> opens that item's panel; every keyboard path stays identical.\n\n    Panel placement and styling are the consumer's CSS (demo.css). %>\n<p class=\"nav-menu__caption\"><%= t(\"components.navigation_menu.demo.click_caption\") %></p>\n<nav class=\"nav-menu\" data-controller=\"stimeo--navigation-menu\"\n     aria-label=\"<%= t(\"components.navigation_menu.demo.label\") %>\">\n  <ul class=\"nav-menu__list\" data-stimeo--navigation-menu-target=\"list\">\n    <li class=\"nav-menu__item\">\n      <button\n        type=\"button\"\n        class=\"demo-baritem\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-products\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <%= t(\"components.navigation_menu.demo.products.label\") %>\n      </button>\n      <div id=\"nav-menu-products\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#analytics\"><%= t(\n          \"components.navigation_menu.demo.products.links.analytics\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#automation\"><%= t(\n          \"components.navigation_menu.demo.products.links.automation\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#reports\"><%= t(\n          \"components.navigation_menu.demo.products.links.reports\"\n        ) %></a>\n      </div>\n    </li>\n    <li class=\"nav-menu__item\">\n      <button\n        type=\"button\"\n        class=\"demo-baritem\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-company\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <%= t(\"components.navigation_menu.demo.company.label\") %>\n      </button>\n      <div id=\"nav-menu-company\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#about\"><%= t(\n          \"components.navigation_menu.demo.company.links.about\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#careers\"><%= t(\n          \"components.navigation_menu.demo.company.links.careers\"\n        ) %></a>\n      </div>\n    </li>\n  </ul>\n</nav>\n\n<p class=\"nav-menu__caption\"><%= t(\"components.navigation_menu.demo.hover_caption\") %></p>\n<%# openOnHover is opt-in; hoverArea widens the hover region to the whole <li>, so\n    hovering the top-level link (not just the disclosure button) opens the panel.\n    The button keeps its own accessible name so keyboard and SR users can tell the\n    link and its disclosure apart. %>\n<nav class=\"nav-menu\" data-controller=\"stimeo--navigation-menu\"\n     data-stimeo--navigation-menu-open-on-hover-value=\"true\"\n     aria-label=\"<%= t(\"components.navigation_menu.demo.hover.label\") %>\">\n  <ul class=\"nav-menu__list\" data-stimeo--navigation-menu-target=\"list\">\n    <li class=\"nav-menu__item\" data-stimeo--navigation-menu-target=\"hoverArea\">\n      <a class=\"demo-baritem nav-menu__link\" href=\"#solutions\">\n        <%= t(\"components.navigation_menu.demo.hover.solutions.label\") %>\n      </a>\n      <button\n        type=\"button\"\n        class=\"demo-baritem nav-menu__disclosure\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-solutions\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <span aria-hidden=\"true\">▾</span>\n        <span class=\"visually-hidden\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.toggle\"\n        ) %></span>\n      </button>\n      <div id=\"nav-menu-solutions\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#retail\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.links.retail\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#finance\"><%= t(\n          \"components.navigation_menu.demo.hover.solutions.links.finance\"\n        ) %></a>\n      </div>\n    </li>\n    <li class=\"nav-menu__item\" data-stimeo--navigation-menu-target=\"hoverArea\">\n      <a class=\"demo-baritem nav-menu__link\" href=\"#resources\">\n        <%= t(\"components.navigation_menu.demo.hover.resources.label\") %>\n      </a>\n      <button\n        type=\"button\"\n        class=\"demo-baritem nav-menu__disclosure\"\n        aria-expanded=\"false\"\n        aria-controls=\"nav-menu-resources\"\n        data-stimeo--navigation-menu-target=\"trigger\"\n        data-action=\"click->stimeo--navigation-menu#toggle\n                     keydown->stimeo--navigation-menu#onTriggerKeydown\">\n        <span aria-hidden=\"true\">▾</span>\n        <span class=\"visually-hidden\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.toggle\"\n        ) %></span>\n      </button>\n      <div id=\"nav-menu-resources\" class=\"nav-menu__panel\"\n           data-stimeo--navigation-menu-target=\"panel\" hidden>\n        <a class=\"demo-menuitem\" href=\"#guides\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.links.guides\"\n        ) %></a>\n        <a class=\"demo-menuitem\" href=\"#blog\"><%= t(\n          \"components.navigation_menu.demo.hover.resources.links.blog\"\n        ) %></a>\n      </div>\n    </li>\n  </ul>\n</nav>\n\n<%# Readout: what the component just reported. Purely visual — the component\n    already announces what a screen reader needs, so this line is aria-hidden to\n    keep it from being read twice. The value is a code fragment (API identifiers\n    and values), so only the label is translated. %>\n<p class=\"demo-readout\" aria-hidden=\"true\">\n  <span><%= t(\"catalog.readout.events\") %></span>\n  <span class=\"demo-readout__value\" data-readout>—</span>\n</p>\n"
     },
     "stimeo--nested-form": {
       "file": "examples/nested_form/_demo.html.erb",
@@ -251,11 +251,11 @@
     },
     "stimeo--overflow-menu": {
       "file": "examples/overflow_menu/_demo.html.erb",
-      "source": "<%# Overflow-menu demo: drag the width slider to shrink the toolbar — the controller\n    measures the items and banks the lowest-priority ones into the More menu (delegated\n    to stimeo--menu), moving them back as space returns. The items need no data-action of\n    their own: Menu handles clicks and keys from its own element, so an item becomes\n    operable the moment it lands in the menu. Only the More trigger is bound. The library\n    moves items and sets data-overflowing / data-overflow-count; demo.css owns the look. %>\n<div class=\"overflow-demo\">\n  <label class=\"demo-width-control\">\n    <span><%= t(\"components.overflow_menu.demo.width\") %></span>\n    <input type=\"range\" min=\"220\" max=\"640\" value=\"640\" data-overflow-demo-width>\n  </label>\n\n  <div\n    class=\"overflow-demo__bar\"\n    data-controller=\"stimeo--overflow-menu\"\n    <%# A group, not a toolbar: these buttons stay in the normal Tab order. The\n        single-tab-stop roving an APG Toolbar implies belongs to stimeo--toolbar,\n        which this controller does not provide. %>\n    role=\"group\"\n    aria-label=\"<%= t(\"components.overflow_menu.name\") %>\">\n    <div class=\"overflow-demo__items\" data-stimeo--overflow-menu-target=\"items\">\n      <% %w[save edit share archive delete].each_with_index do |id, i| %>\n        <button\n          type=\"button\"\n          class=\"demo-menuitem overflow-demo__item\"\n          <%= \"data-priority=\\\"#{i + 1}\\\"\".html_safe if i < 3 %>>\n          <%= t(\"components.overflow_menu.demo.#{id}\") %>\n        </button>\n      <% end %>\n    </div>\n\n    <div\n      class=\"overflow-demo__more\"\n      data-controller=\"stimeo--menu\"\n      data-stimeo--overflow-menu-target=\"more\"\n      hidden>\n      <button\n        id=\"overflow-menu-trigger\"\n        type=\"button\"\n        class=\"demo-trigger overflow-demo__trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"false\"\n        data-stimeo--menu-target=\"trigger\"\n        data-action=\"click->stimeo--menu#toggle keydown->stimeo--menu#onTriggerKeydown\">\n        <%= t(\"components.overflow_menu.demo.more\") %>\n      </button>\n      <%# A div, not a ul: the controller appends the items themselves, and a ul may only\n          hold li children. One container shape keeps the markup contract unambiguous. %>\n      <div class=\"overflow-demo__menu\" role=\"menu\" aria-labelledby=\"overflow-menu-trigger\"\n           data-stimeo--menu-target=\"menu\" hidden></div>\n    </div>\n  </div>\n</div>\n"
+      "source": "<%# Overflow-menu demo: drag the width slider to shrink the bar — the controller\n    measures the items and banks the lowest-priority ones into the More menu (delegated\n    to stimeo--menu), moving them back as space returns. The items need no data-action of\n    their own: stimeo--menu handles clicks and keys from its own element, so an item becomes\n    operable the moment it lands in the menu. Only the More trigger is bound. The library\n    moves items and sets data-overflowing / data-overflow-count; demo.css owns the look. %>\n<div class=\"overflow-demo\">\n  <label class=\"demo-width-control\">\n    <span><%= t(\"components.overflow_menu.demo.width\") %></span>\n    <input type=\"range\" min=\"220\" max=\"640\" value=\"640\" data-overflow-demo-width>\n  </label>\n\n  <div\n    class=\"overflow-demo__bar\"\n    data-controller=\"stimeo--overflow-menu\"\n    <%# A group, not a toolbar: these buttons stay in the normal Tab order. The\n        single-tab-stop roving an APG Toolbar implies belongs to stimeo--toolbar,\n        which this controller does not provide. %>\n    role=\"group\"\n    aria-label=\"<%= t(\"components.overflow_menu.name\") %>\">\n    <div class=\"overflow-demo__items\" data-stimeo--overflow-menu-target=\"items\">\n      <% %w[save edit share archive delete].each_with_index do |id, i| %>\n        <button\n          type=\"button\"\n          class=\"demo-menuitem overflow-demo__item\"\n          <%= \"data-priority=\\\"#{i + 1}\\\"\".html_safe if i < 3 %>>\n          <%= t(\"components.overflow_menu.demo.#{id}\") %>\n        </button>\n      <% end %>\n    </div>\n\n    <div\n      class=\"overflow-demo__more\"\n      data-controller=\"stimeo--menu\"\n      data-stimeo--overflow-menu-target=\"more\"\n      hidden>\n      <button\n        id=\"overflow-menu-trigger\"\n        type=\"button\"\n        class=\"demo-trigger overflow-demo__trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=\"false\"\n        data-stimeo--menu-target=\"trigger\"\n        data-action=\"click->stimeo--menu#toggle keydown->stimeo--menu#onTriggerKeydown\">\n        <%= t(\"components.overflow_menu.demo.more\") %>\n      </button>\n      <%# A div, not a ul: the controller appends the items themselves, and a ul may only\n          hold li children. One container shape keeps the markup contract unambiguous. %>\n      <div class=\"overflow-demo__menu\" role=\"menu\" aria-labelledby=\"overflow-menu-trigger\"\n           data-stimeo--menu-target=\"menu\" hidden></div>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--pagination": {
       "file": "examples/pagination/_demo.html.erb",
-      "source": "<%# Markup for the pagination demo.\n    Built on nav + aria-label and aria-current=\"page\", the library handles current-page\n    management, boundary control of the prev/next buttons, and firing the change event.\n    Data fetching and URL rewriting are the consumer's (here demo.js just updates the\n    results area). %>\n<nav\n  class=\"pagination\"\n  data-controller=\"stimeo--pagination\"\n  aria-label=\"<%= t(\"components.pagination.demo.label\") %>\"\n  data-stimeo--pagination-page-value=\"1\"\n  data-stimeo--pagination-total-value=\"5\">\n  <button\n    type=\"button\"\n    class=\"pagination__button\"\n    data-stimeo--pagination-target=\"prev\"\n    data-action=\"click->stimeo--pagination#prev\">\n    <%= t(\"components.pagination.demo.prev\") %>\n  </button>\n  <% (1..5).each do |page| %>\n    <button\n      type=\"button\"\n      class=\"pagination__button pagination__page\"\n      data-page=\"<%= page %>\"\n      <%= \"aria-current=\\\"page\\\"\".html_safe if page == 1 %>\n      data-stimeo--pagination-target=\"page\"\n      data-action=\"click->stimeo--pagination#select\"><%= page %></button>\n  <% end %>\n  <button\n    type=\"button\"\n    class=\"pagination__button\"\n    data-stimeo--pagination-target=\"next\"\n    data-action=\"click->stimeo--pagination#next\">\n    <%= t(\"components.pagination.demo.next\") %>\n  </button>\n</nav>\n\n<p\n  class=\"pagination__status\"\n  data-pagination-status\n  data-template=\"<%= t(\"components.pagination.demo.status_template\") %>\"\n  aria-live=\"polite\">\n  <%= t(\"components.pagination.demo.status_template\", page: 1, total: 5) %>\n</p>\n"
+      "source": "<%# Markup for the pagination demo.\n    Built on nav + aria-label and aria-current=\"page\", the library handles current-page\n    management, boundary control of the prev/next buttons, and firing the change event.\n    Data fetching and URL rewriting are the consumer's (here demo.js just updates the\n    results area). %>\n<nav\n  class=\"pagination\"\n  data-controller=\"stimeo--pagination\"\n  aria-label=\"<%= t(\"components.pagination.demo.label\") %>\"\n  data-stimeo--pagination-page-value=\"1\"\n  data-stimeo--pagination-total-value=\"5\">\n  <button\n    type=\"button\"\n    class=\"pagination__button\"\n    data-stimeo--pagination-target=\"prev\"\n    data-action=\"click->stimeo--pagination#prev\">\n    <%= t(\"components.pagination.demo.prev\") %>\n  </button>\n  <% (1..5).each do |page| %>\n    <button\n      type=\"button\"\n      class=\"pagination__button pagination__page\"\n      data-page=\"<%= page %>\"\n      <%= \"aria-current=\\\"page\\\"\".html_safe if page == 1 %>\n      data-stimeo--pagination-target=\"page\"\n      data-action=\"click->stimeo--pagination#select\"><%= page %></button>\n  <% end %>\n  <button\n    type=\"button\"\n    class=\"pagination__button\"\n    data-stimeo--pagination-target=\"next\"\n    data-action=\"click->stimeo--pagination#next\">\n    <%= t(\"components.pagination.demo.next\") %>\n  </button>\n</nav>\n\n<p\n  class=\"pagination__status\"\n  data-pagination-status\n  data-template=\"<%= t(\"components.pagination.demo.status_template\") %>\"\n  aria-live=\"polite\">\n  <%= t(\"components.pagination.demo.initial_status\", page: 1, total: 5) %>\n</p>\n"
     },
     "stimeo--password-reveal": {
       "file": "examples/password_reveal/_demo.html.erb",
@@ -271,7 +271,7 @@
     },
     "stimeo--pointer-drag": {
       "file": "examples/pointer_drag/_demo.html.erb",
-      "source": "<%# pointer-drag: the primitive normalizes the drag lifecycle (threshold, axis\n    lock, pointer capture, touch-action, cancel) and adds a keyboard alternative.\n    With the opt-in follow value it also moves the card itself — translate on\n    move, committed on drop, restored on cancel — so the consumer JS below only\n    mirrors the signal into the status line. The card can travel out of the\n    dashed area, which the area clips; the reset action brings it back, since\n    follow's committed offset is internal state a consumer cannot clear. The\n    button sits outside the controller element, so its click reaches the action\n    as a custom event the element's own data-action maps. %>\n<div class=\"pointer-drag-demo\">\n  <p class=\"pointer-drag-demo__hint\"><%= t(\"components.pointer_drag.demo.hint\") %></p>\n  <div class=\"pointer-drag-demo__area\">\n    <button type=\"button\" class=\"pointer-drag-demo__card\" id=\"pointer-drag-card\"\n            data-controller=\"stimeo--pointer-drag\"\n            data-stimeo--pointer-drag-follow-value=\"true\"\n            data-action=\"demo:reset->stimeo--pointer-drag#reset\">\n      <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"\n           aria-hidden=\"true\">\n        <circle cx=\"9\" cy=\"6\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"6\" r=\"1.5\"></circle>\n        <circle cx=\"9\" cy=\"12\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"12\" r=\"1.5\"></circle>\n        <circle cx=\"9\" cy=\"18\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"18\" r=\"1.5\"></circle>\n      </svg>\n      <%= t(\"components.pointer_drag.demo.card_label\") %>\n    </button>\n  </div>\n  <p class=\"pointer-drag-demo__actions\">\n    <button type=\"button\" class=\"demo-trigger\" data-pointer-drag-reset>\n      <%= t(\"components.pointer_drag.demo.reset_label\") %>\n    </button>\n  </p>\n  <p class=\"pointer-drag-demo__status\" data-pointer-drag-status aria-live=\"polite\"\n     data-moved-template=\"<%= t(\"components.pointer_drag.demo.moved_template\") %>\"\n     data-idle-text=\"<%= t(\"components.pointer_drag.demo.idle_text\") %>\"></p>\n</div>\n"
+      "source": "<%# pointer-drag: the primitive normalizes the drag lifecycle (threshold, axis\n    lock, pointer capture, touch-action, cancel) and adds a keyboard alternative.\n    With the opt-in follow value it also moves the card itself — translate on\n    move, committed on drop, restored on cancel — so the consumer JS below only\n    mirrors the signal into the status line. The card can travel out of the\n    dashed area, which the area clips; the reset action brings it back, ending\n    any drag in flight and clearing the inline translate follow moved it with.\n    With follow on, a translate the page writes itself in the <x>px <y>px form\n    works too, since the next drag reads its start back from the inline\n    translate. The button sits outside the controller element, so its click\n    reaches the action as a custom event the element's own data-action maps. %>\n<div class=\"pointer-drag-demo\">\n  <p class=\"pointer-drag-demo__hint\"><%= t(\"components.pointer_drag.demo.hint\") %></p>\n  <div class=\"pointer-drag-demo__area\">\n    <button type=\"button\" class=\"pointer-drag-demo__card\" id=\"pointer-drag-card\"\n            data-controller=\"stimeo--pointer-drag\"\n            data-stimeo--pointer-drag-follow-value=\"true\"\n            data-action=\"demo:reset->stimeo--pointer-drag#reset\">\n      <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"currentColor\" stroke=\"none\"\n           aria-hidden=\"true\">\n        <circle cx=\"9\" cy=\"6\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"6\" r=\"1.5\"></circle>\n        <circle cx=\"9\" cy=\"12\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"12\" r=\"1.5\"></circle>\n        <circle cx=\"9\" cy=\"18\" r=\"1.5\"></circle><circle cx=\"15\" cy=\"18\" r=\"1.5\"></circle>\n      </svg>\n      <%= t(\"components.pointer_drag.demo.card_label\") %>\n    </button>\n  </div>\n  <p class=\"pointer-drag-demo__actions\">\n    <button type=\"button\" class=\"demo-trigger\" data-pointer-drag-reset>\n      <%= t(\"components.pointer_drag.demo.reset_label\") %>\n    </button>\n  </p>\n  <p class=\"pointer-drag-demo__status\" data-pointer-drag-status aria-live=\"polite\"\n     data-moved-template=\"<%= t(\"components.pointer_drag.demo.moved_template\") %>\"\n     data-idle-text=\"<%= t(\"components.pointer_drag.demo.idle_text\") %>\"></p>\n</div>\n"
     },
     "stimeo--popover": {
       "file": "examples/popover/_demo.html.erb",
@@ -283,7 +283,7 @@
     },
     "stimeo--presence": {
       "file": "examples/presence/_demo.html.erb",
-      "source": "<%# presence: a who's-here roster with zero server state. Each client beacons\n    { id, name } through PresenceChannel on a heartbeat; every client expires\n    silent peers locally and re-announces itself to newcomers, so the roster\n    converges in one round trip. Your own beacons are ignored (echo\n    suppression), so open this page in a second tab to see a peer appear — then\n    close it or navigate it away for the leave notice (sent best-effort on\n    disconnect and pagehide); a lost notice is caught by the timeout expiry. The id/name\n    pair is randomized per render, which is fine for a demo; a real app renders\n    current_user.id / current_user.name. The count templates (data-zero/-one/\n    -other) keep the text localizable; %{count} is substituted by the\n    controller. Heartbeat/timeout are shortened so leaving is quick to observe. %>\n<% token = SecureRandom.hex(4) %>\n<% guest = t(\"components.presence.demo.guest_name\", token: token.first(4)) %>\n<div class=\"presence-demo\"\n     data-controller=\"stimeo--presence\"\n     data-stimeo--presence-channel-value=\"PresenceChannel\"\n     data-stimeo--presence-params-value='{\"room\":\"<%= PresenceChannel::ROOM %>\"}'\n     data-stimeo--presence-id-value=\"<%= token %>\"\n     data-stimeo--presence-name-value=\"<%= guest %>\"\n     data-stimeo--presence-heartbeat-value=\"5000\"\n     data-stimeo--presence-timeout-value=\"12000\">\n  <p class=\"presence-demo__hint\"><%= t(\"components.presence.demo.hint\") %></p>\n  <p class=\"presence-demo__you\"><%= t(\"components.presence.demo.you_are\", name: guest) %></p>\n  <p class=\"presence-demo__count\"\n     data-stimeo--presence-target=\"count\"\n     data-zero=\"<%= t(\"components.presence.demo.count_zero\") %>\"\n     data-one=\"<%= t(\"components.presence.demo.count_one\") %>\"\n     data-other=\"<%= t(\"components.presence.demo.count_other\") %>\"></p>\n  <ul class=\"presence-demo__list\"\n      aria-label=\"<%= t(\"components.presence.demo.list_label\") %>\"\n      data-stimeo--presence-target=\"list\"></ul>\n  <template data-stimeo--presence-target=\"template\">\n    <li class=\"presence-demo__peer\">\n      <span class=\"presence-demo__dot\" aria-hidden=\"true\"></span>\n      <span data-presence-name></span>\n    </li>\n  </template>\n</div>\n"
+      "source": "<%# presence: a who's-here roster with zero server state. Each client beacons\n    { id, name } through PresenceChannel on a heartbeat; every client expires\n    silent peers locally and re-announces itself to newcomers, so the roster\n    converges in one round trip. Your own beacons are ignored (echo\n    suppression), so open this page in a second tab to see a peer appear — then\n    close it or navigate it away for the leave notice (sent best-effort on\n    disconnect and pagehide); a lost notice is caught by the timeout expiry. The id/name\n    pair is randomized per render, which is fine for a demo; a real app renders\n    current_user.id / current_user.name. The count templates (data-zero/-one/\n    -other) keep the text localizable; {count} is substituted by the\n    controller. Heartbeat/timeout are shortened so leaving is quick to observe. %>\n<% token = SecureRandom.hex(4) %>\n<% guest = t(\"components.presence.demo.guest_name\", token: token.first(4)) %>\n<div class=\"presence-demo\"\n     data-controller=\"stimeo--presence\"\n     data-stimeo--presence-channel-value=\"PresenceChannel\"\n     data-stimeo--presence-params-value='{\"room\":\"<%= PresenceChannel::ROOM %>\"}'\n     data-stimeo--presence-id-value=\"<%= token %>\"\n     data-stimeo--presence-name-value=\"<%= guest %>\"\n     data-stimeo--presence-heartbeat-value=\"5000\"\n     data-stimeo--presence-timeout-value=\"12000\">\n  <p class=\"presence-demo__hint\"><%= t(\"components.presence.demo.hint\") %></p>\n  <p class=\"presence-demo__you\"><%= t(\"components.presence.demo.you_are\", name: guest) %></p>\n  <p class=\"presence-demo__count\"\n     data-stimeo--presence-target=\"count\"\n     data-zero=\"<%= t(\"components.presence.demo.count_zero\") %>\"\n     data-one=\"<%= t(\"components.presence.demo.count_one\") %>\"\n     data-other=\"<%= t(\"components.presence.demo.count_other\") %>\"></p>\n  <ul class=\"presence-demo__list\"\n      aria-label=\"<%= t(\"components.presence.demo.list_label\") %>\"\n      data-stimeo--presence-target=\"list\"></ul>\n  <template data-stimeo--presence-target=\"template\">\n    <li class=\"presence-demo__peer\">\n      <span class=\"presence-demo__dot\" aria-hidden=\"true\"></span>\n      <span data-presence-name></span>\n    </li>\n  </template>\n</div>\n"
     },
     "stimeo--preview-guard": {
       "file": "examples/preview_guard/_demo.html.erb",
@@ -415,7 +415,7 @@
     },
     "stimeo--time-picker": {
       "file": "examples/time_picker/_demo.html.erb",
-      "source": "<%# Markup for the time-picker (time selection) demo.\n    stimeo--time-picker treats each segment (hour / minute / AM·PM) as an APG Spinbutton,\n    handling arrow-key increment/decrement, edge wrap and carry (minute→hour), left/right\n    segment movement, and direct numeric entry, and reflects the composed 24-hour value\n    (HH:MM) into a hidden input. Each segment is an independent tab stop. %>\n<div\n  class=\"time-picker\"\n  data-controller=\"stimeo--time-picker\"\n  data-stimeo--time-picker-hour-cycle-value=\"12\"\n  data-stimeo--time-picker-step-value=\"5\"\n  role=\"group\"\n  aria-label=\"<%= t(\"components.time_picker.demo.group_label\") %>\">\n  <span class=\"time-picker__segment\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.hours\") %>\"\n        tabindex=\"0\" aria-valuenow=\"9\" aria-valuemin=\"1\" aria-valuemax=\"12\" aria-valuetext=\"09\"\n        data-segment=\"hour\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\">09</span>\n  <span class=\"time-picker__colon\" aria-hidden=\"true\">:</span>\n  <span class=\"time-picker__segment\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.minutes\") %>\"\n        tabindex=\"0\" aria-valuenow=\"30\" aria-valuemin=\"0\" aria-valuemax=\"59\" aria-valuetext=\"30\"\n        data-segment=\"minute\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\">30</span>\n  <span class=\"time-picker__segment time-picker__segment--meridiem\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.meridiem\") %>\"\n        tabindex=\"0\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"1\" aria-valuetext=\"AM\"\n        data-segment=\"meridiem\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\">AM</span>\n\n  <input type=\"hidden\" name=\"time\" data-stimeo--time-picker-target=\"field\" />\n</div>\n"
+      "source": "<%# Markup for the time-picker (time selection) demo.\n    stimeo--time-picker treats each segment (hour / minute / AM·PM) as an APG Spinbutton,\n    handling arrow-key increment/decrement, edge wrap and carry (minute→hour), left/right\n    segment movement, and direct numeric entry, and reflects the composed 24-hour value\n    (HH:MM) into a hidden input. Each segment is an independent tab stop. %>\n<% zero_based_hour = I18n.locale == :ja %>\n<div\n  class=\"time-picker\"\n  data-controller=\"stimeo--time-picker\"\n  data-stimeo--time-picker-hour-cycle-value=\"12\"\n  data-stimeo--time-picker-hour12-zero-based-value=\"<%= zero_based_hour %>\"\n  data-stimeo--time-picker-step-value=\"5\"\n  data-stimeo--time-picker-am-label-value=\"<%= t(\"components.time_picker.demo.am\") %>\"\n  data-stimeo--time-picker-pm-label-value=\"<%= t(\"components.time_picker.demo.pm\") %>\"\n  role=\"group\"\n  aria-label=\"<%= t(\"components.time_picker.demo.group_label\") %>\">\n  <span class=\"time-picker__segment\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.hours\") %>\"\n        tabindex=\"0\" aria-valuenow=\"9\" aria-valuetext=\"09\"\n        aria-valuemin=\"<%= zero_based_hour ? 0 : 1 %>\"\n        aria-valuemax=\"<%= zero_based_hour ? 11 : 12 %>\"\n        data-segment=\"hour\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\">09</span>\n  <span class=\"time-picker__colon\" aria-hidden=\"true\">:</span>\n  <span class=\"time-picker__segment\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.minutes\") %>\"\n        tabindex=\"0\" aria-valuenow=\"30\" aria-valuemin=\"0\" aria-valuemax=\"59\" aria-valuetext=\"30\"\n        data-segment=\"minute\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\">30</span>\n  <span class=\"time-picker__segment time-picker__segment--meridiem\" role=\"spinbutton\"\n        aria-label=\"<%= t(\"components.time_picker.demo.meridiem\") %>\"\n        tabindex=\"0\" aria-valuenow=\"0\" aria-valuemin=\"0\" aria-valuemax=\"1\"\n        aria-valuetext=\"<%= t(\"components.time_picker.demo.am\") %>\"\n        data-segment=\"meridiem\" data-stimeo--time-picker-target=\"segment\"\n        data-action=\"keydown->stimeo--time-picker#onKeydown\"><%= t(\n          \"components.time_picker.demo.am\"\n        ) %></span>\n\n  <input type=\"hidden\" name=\"time\" data-stimeo--time-picker-target=\"field\" />\n</div>\n"
     },
     "stimeo--toast": {
       "file": "examples/toast/_demo.html.erb",
@@ -443,7 +443,7 @@
     },
     "stimeo--typing-indicator": {
       "file": "examples/typing_indicator/_demo.html.erb",
-      "source": "<%# typing-indicator: the state lives on the server stream, not in client memory.\n    Typing in the composer broadcasts a throttled signal through TypingChannel;\n    every OTHER client shows \"X is typing…\" in the visible status slot and clears\n    it automatically after silence. Own echoes are suppressed by design, so open\n    this page in a second tab to see the indicator. The guest name is randomized\n    per render so each tab is a distinct \"user\" (a real app passes\n    current_user.name). The data-one/data-many templates keep the announcement\n    localizable; %{name}/%{names} are substituted by the controller. The status slot is\n    plain visible copy — assistive tech is reached through the page's shared announcer\n    instead, so the announce-one/announce-many values carry the spoken wording ({name}\n    syntax, not %{}). Leaving them off shows the indicator without announcing it. %>\n<% guest = t(\"components.typing_indicator.demo.guest_name\", token: SecureRandom.hex(2)) %>\n<% announce_one = t(\"components.typing_indicator.demo.announce_one\") %>\n<% announce_many = t(\"components.typing_indicator.demo.announce_many\") %>\n<div class=\"typing-demo\"\n     data-controller=\"stimeo--typing-indicator\"\n     data-stimeo--typing-indicator-channel-value=\"TypingChannel\"\n     data-stimeo--typing-indicator-params-value='{\"room\":\"<%= TypingChannel::ROOM %>\"}'\n     data-stimeo--typing-indicator-name-value=\"<%= guest %>\"\n     data-stimeo--typing-indicator-timeout-value=\"3000\"\n     data-stimeo--typing-indicator-throttle-value=\"1000\"\n     data-stimeo--typing-indicator-announce-one-text-value=\"<%= announce_one %>\"\n     data-stimeo--typing-indicator-announce-many-text-value=\"<%= announce_many %>\">\n  <p class=\"typing-demo__hint\"><%= t(\"components.typing_indicator.demo.hint\") %></p>\n  <p class=\"typing-demo__you\"><%= t(\"components.typing_indicator.demo.you_are\", name: guest) %></p>\n  <label class=\"typing-demo__label\" for=\"typing-demo-input\">\n    <%= t(\"components.typing_indicator.demo.input_label\") %>\n  </label>\n  <textarea id=\"typing-demo-input\" class=\"demo-input typing-demo__input\" rows=\"3\"\n            data-stimeo--typing-indicator-target=\"input\"></textarea>\n  <p class=\"typing-demo__status\"\n     data-stimeo--typing-indicator-target=\"status\"\n     data-one=\"<%= t(\"components.typing_indicator.demo.one\") %>\"\n     data-many=\"<%= t(\"components.typing_indicator.demo.many\") %>\"></p>\n</div>\n"
+      "source": "<%# typing-indicator: the state lives on the server stream, not in client memory.\n    Typing in the composer broadcasts a throttled signal through TypingChannel;\n    every OTHER client shows \"X is typing…\" in the visible status slot and clears\n    it automatically after silence. Own echoes are suppressed by design, so open\n    this page in a second tab to see the indicator. The guest name is randomized\n    per render so each tab is a distinct \"user\" (a real app passes\n    current_user.name). The data-one/data-many templates keep the visible copy\n    localizable; {name}/{names} are substituted by the controller. The status slot is\n    plain visible copy — assistive tech is reached through the page's shared announcer\n    instead, so the announce-one/announce-many values carry the spoken wording with\n    the same {name}/{names} syntax. Leaving them off shows the indicator without announcing it. %>\n<% guest = t(\"components.typing_indicator.demo.guest_name\", token: SecureRandom.hex(2)) %>\n<% announce_one = t(\"components.typing_indicator.demo.announce_one\") %>\n<% announce_many = t(\"components.typing_indicator.demo.announce_many\") %>\n<div class=\"typing-demo\"\n     data-controller=\"stimeo--typing-indicator\"\n     data-stimeo--typing-indicator-channel-value=\"TypingChannel\"\n     data-stimeo--typing-indicator-params-value='{\"room\":\"<%= TypingChannel::ROOM %>\"}'\n     data-stimeo--typing-indicator-name-value=\"<%= guest %>\"\n     data-stimeo--typing-indicator-timeout-value=\"3000\"\n     data-stimeo--typing-indicator-throttle-value=\"1000\"\n     data-stimeo--typing-indicator-announce-one-text-value=\"<%= announce_one %>\"\n     data-stimeo--typing-indicator-announce-many-text-value=\"<%= announce_many %>\">\n  <p class=\"typing-demo__hint\"><%= t(\"components.typing_indicator.demo.hint\") %></p>\n  <p class=\"typing-demo__you\"><%= t(\"components.typing_indicator.demo.you_are\", name: guest) %></p>\n  <label class=\"typing-demo__label\" for=\"typing-demo-input\">\n    <%= t(\"components.typing_indicator.demo.input_label\") %>\n  </label>\n  <textarea id=\"typing-demo-input\" class=\"demo-input typing-demo__input\" rows=\"3\"\n            data-stimeo--typing-indicator-target=\"input\"></textarea>\n  <p class=\"typing-demo__status\"\n     data-stimeo--typing-indicator-target=\"status\"\n     data-one=\"<%= t(\"components.typing_indicator.demo.one\") %>\"\n     data-many=\"<%= t(\"components.typing_indicator.demo.many\") %>\"></p>\n</div>\n"
     }
   }
 }

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
-  "schemaVersion": 15,
-  "packageVersion": "0.17.0",
+  "schemaVersion": 17,
+  "packageVersion": "0.18.1",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -443,6 +443,7 @@
         "prev",
         "next",
         "picker",
+        "pickerList",
         "playToggle",
         "onLabel",
         "offLabel"
@@ -1551,7 +1552,16 @@
       "compositions": [],
       "companions": [],
       "targetDeclarations": [],
-      "cardinality": [],
+      "cardinality": [
+        {
+          "within": "",
+          "target": "display",
+          "max": 1,
+          "severity": "warning",
+          "excludeTemplateContents": true,
+          "suggestion": "Keep one \"display\" input per \"stimeo--currency-input\" controller; only the first display is read, so input in the others never reaches the submitted value."
+        }
+      ],
       "forbiddenAria": []
     },
     "stimeo--data-grid": {
@@ -3391,7 +3401,8 @@
       "targets": [
         "trigger",
         "panel",
-        "hoverArea"
+        "hoverArea",
+        "list"
       ],
       "values": [
         "openOnHover",
@@ -6199,9 +6210,12 @@
       ],
       "values": [
         "hourCycle",
+        "hour12ZeroBased",
         "step",
         "seconds",
-        "wrap"
+        "wrap",
+        "amLabel",
+        "pmLabel"
       ],
       "valueConstraints": [
         {

package/dist/positioning/index.d.ts

@@ -7,8 +7,8 @@ import { Controller, Application } from '@hotwired/stimulus';
  * `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), exposing its `autoUpdate` behavior as a
- * controller. No dedicated APG pattern; it is the
- * placement primitive the popup patterns (Tooltip / Menu / Popover …) build on.
+ * controller. No dedicated APG pattern; it is a placement primitive a consumer pairs
+ * with a popup such as `stimeo--tooltip`, `stimeo--menu` or `stimeo--popover`.
  *
  * Markup contract (identifier: `stimeo--anchored`):
  *   <div data-controller="stimeo--anchored"
@@ -18,9 +18,9 @@ import { Controller, Application } from '@hotwired/stimulus';
  *     <div data-stimeo--anchored-target="floating" role="…">…</div>
  *   </div>
  *
- * `active` drives tracking (start/stop) and fires on connect, mirroring Focus
- * Scope's `trapValueChanged`; set it `false` while the floating element is hidden
- * so no measurement runs. The other Values map to {@link PositioningOptions} and
+ * `active` drives tracking (start/stop) and fires on connect, mirroring
+ * `stimeo--focus`'s `trapValueChanged`; set it `false` while the floating element is
+ * hidden so no measurement runs. The other Values map to {@link PositioningOptions} and
  * re-apply live while tracking. A declaration the engine cannot use — a
  * `placement` outside its set, a non-finite `offset` or `padding` — falls back to
  * that Value's default, so a typo never reaches the coordinates or the hook. Only
@@ -36,8 +36,8 @@ import { Controller, Application } from '@hotwired/stimulus';
  *
  * @remarks
  * Behavior only. It does **not** open/close, manage focus, or render an overlay
- * (pair with Dialog / Popover and {@link "../controllers/focus_controller"}), and
- * it does **not** move DOM (pair with Portal). It lives in the opt-in
+ * (pair with `stimeo--dialog` / `stimeo--popover` and `stimeo--focus`), and it does
+ * **not** move DOM (pair with `stimeo--portal`). It lives in the opt-in
  * `stimeo-ui/positioning` subpath so the core `import "stimeo-ui"` stays
  * zero-dependency; only consumers who register it pull in `@floating-ui/dom`. The
  * `autoUpdate` cleanup is released on `disconnect()` (Turbo navigation included)
@@ -247,4 +247,5 @@ declare const positioningControllers: {
  */
 declare function registerPositioning(application: Application): void;
 
-export { AnchoredController, type PositionResult, type PositioningOptions, attachPositioning, position, positioningControllers, registerPositioning };
+export { AnchoredController, attachPositioning, position, positioningControllers, registerPositioning };
+export type { PositionResult, PositioningOptions };

package/dist/positioning/index.js

@@ -28,6 +28,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -58,6 +61,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();