stimeo-ui 0.1.0-beta.2 → 0.2.0

package/dist/inspector/examples.json

@@ -71,7 +71,7 @@
     },
     "stimeo--command-palette": {
       "file": "examples/command_palette/_demo.html.erb",
-      "source": "<%# Markup for the command_palette demo.\n    The single source used for both the live render and the copy-paste code.\n    stimeo--command-palette provides the global shortcut (Cmd+K) / arrow navigation /\n    focus trap. The controller registers the global keydown itself in connect(), so no\n    keydown wiring is needed here. %>\n<div\n  class=\"command-palette-demo\"\n  data-controller=\"stimeo--command-palette\">\n  \n  <button\n    type=\"button\"\n    class=\"command-palette-demo__trigger\"\n    data-action=\"click->stimeo--command-palette#open\">\n    <%= t(\"components.command_palette.demo.open_button\") %>\n  </button>\n  <p class=\"command-palette-demo__help\">\n    <%= t(\"components.command_palette.demo.help_text_html\") %>\n  </p>\n\n  <%# Overlay backdrop. Closes only on a click on the backdrop itself\n      (closeOnBackdrop ignores inner clicks). %>\n  <div\n    class=\"command-palette\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"<%= t(\"components.command_palette.demo.popular_title\") %>\"\n    data-stimeo--command-palette-target=\"dialog\"\n    data-action=\"click->stimeo--command-palette#closeOnBackdrop\"\n    hidden>\n    \n    <%# The palette body container. %>\n    <div class=\"command-palette__panel\">\n      <%# Control area (Combobox structure). role/aria-* go on the real input\n          (the controller syncs them). %>\n      <div class=\"command-palette__search-wrapper\">\n        \n        <svg class=\"command-palette__search-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n        </svg>\n\n        <input\n          type=\"text\"\n          placeholder=\"<%= t(\"components.command_palette.demo.placeholder\") %>\"\n          class=\"command-palette__input\"\n          data-stimeo--command-palette-target=\"input\"\n          data-action=\"input->stimeo--command-palette#filter\n                       keydown->stimeo--command-palette#onKeydown\"\n          role=\"combobox\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"playground-command-list\"\n          aria-autocomplete=\"list\" />\n\n        <button\n          type=\"button\"\n          class=\"command-palette__close-btn\"\n          data-action=\"click->stimeo--command-palette#close\"\n          aria-label=\"<%= t(\"components.command_palette.demo.close_label\") %>\">\n          <kbd class=\"command-palette-demo__kbd font-normal text-xs\">ESC</kbd>\n        </button>\n      </div>\n\n      <%# Listbox display area. %>\n      <ul\n        id=\"playground-command-list\"\n        role=\"listbox\"\n        aria-label=\"<%= t(\"components.command_palette.demo.popular_title\") %>\"\n        class=\"command-palette__listbox\"\n        data-stimeo--command-palette-target=\"list\">\n        \n        <%# Section heading (data-disabled=\"true\" makes it non-selectable). %>\n        <li role=\"option\" data-stimeo--command-palette-target=\"option\"\n            data-disabled=\"true\" class=\"command-palette__group-title\">\n          <%= t(\"components.command_palette.demo.popular_title\") %>\n        </li>\n\n        <li\n          id=\"cmd-profile\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.profile_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.profile_label\"\n          ) %></span>\n          <span class=\"command-palette__option-shortcut\">Go P</span>\n        </li>\n\n        <li\n          id=\"cmd-settings\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.settings_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n            <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65\n                     1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0\n                     0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65\n                     1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0\n                     4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0\n                     0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1\n                     1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0\n                     0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0\n                     0-1.51 1z\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.settings_label\"\n          ) %></span>\n          <span class=\"command-palette__option-shortcut\">Go S</span>\n        </li>\n\n        <li role=\"option\" data-stimeo--command-palette-target=\"option\"\n            data-disabled=\"true\" class=\"command-palette__group-title\">\n          <%= t(\"components.command_palette.demo.admin_title\") %>\n        </li>\n\n        <li\n          id=\"cmd-theme-dark\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.dark_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.dark_label\"\n          ) %></span>\n        </li>\n\n        <li\n          id=\"cmd-theme-light\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.light_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"/>\n            <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"/>\n            <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"/>\n            <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"/>\n            <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"/>\n            <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n            <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"/>\n            <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.light_label\"\n          ) %></span>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the command_palette demo.\n    The single source used for both the live render and the copy-paste code.\n    stimeo--command-palette provides the global shortcut (Cmd+K) / arrow navigation /\n    focus trap. The controller registers the global keydown itself in connect(), so no\n    keydown wiring is needed here. %>\n<div\n  class=\"command-palette-demo\"\n  data-controller=\"stimeo--command-palette\">\n  \n  <button\n    type=\"button\"\n    class=\"command-palette-demo__trigger\"\n    data-action=\"click->stimeo--command-palette#open\">\n    <%= t(\"components.command_palette.demo.open_button\") %>\n  </button>\n  <p class=\"command-palette-demo__help\">\n    <%= t(\"components.command_palette.demo.help_text_html\") %>\n  </p>\n\n  <%# Overlay backdrop. Closes only on a click on the backdrop itself\n      (closeOnBackdrop ignores inner clicks). %>\n  <div\n    class=\"command-palette\"\n    role=\"dialog\"\n    aria-modal=\"true\"\n    aria-label=\"<%= t(\"components.command_palette.demo.popular_title\") %>\"\n    data-stimeo--command-palette-target=\"dialog\"\n    data-action=\"click->stimeo--command-palette#closeOnBackdrop\"\n    hidden>\n    \n    <%# The palette body container. %>\n    <div class=\"command-palette__panel\">\n      <%# Control area (Combobox structure). role/aria-* go on the real input\n          (the controller syncs them). %>\n      <div class=\"command-palette__search-wrapper\">\n        \n        <svg class=\"command-palette__search-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n             stroke=\"currentColor\" stroke-width=\"2\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"/>\n        </svg>\n\n        <input\n          type=\"text\"\n          placeholder=\"<%= t(\"components.command_palette.demo.placeholder\") %>\"\n          class=\"command-palette__input\"\n          data-stimeo--command-palette-target=\"input\"\n          data-action=\"input->stimeo--command-palette#filter\n                       keydown->stimeo--command-palette#onKeydown\"\n          role=\"combobox\"\n          aria-expanded=\"false\"\n          aria-haspopup=\"listbox\"\n          aria-controls=\"playground-command-list\"\n          aria-autocomplete=\"list\" />\n\n        <button\n          type=\"button\"\n          class=\"command-palette__close-btn\"\n          data-action=\"click->stimeo--command-palette#close\"\n          aria-label=\"<%= t(\"components.command_palette.demo.close_label\") %>\">\n          <kbd class=\"command-palette-demo__kbd font-normal text-xs\">ESC</kbd>\n        </button>\n      </div>\n\n      <%# Listbox display area. %>\n      <ul\n        id=\"playground-command-list\"\n        role=\"listbox\"\n        aria-label=\"<%= t(\"components.command_palette.demo.popular_title\") %>\"\n        class=\"command-palette__listbox\"\n        data-stimeo--command-palette-target=\"list\">\n        \n        <%# Section heading (data-disabled=\"true\" makes it non-selectable). %>\n        <li id=\"cmd-popular-heading\" role=\"option\"\n            data-stimeo--command-palette-target=\"option\"\n            data-disabled=\"true\" class=\"command-palette__group-title\">\n          <%= t(\"components.command_palette.demo.popular_title\") %>\n        </li>\n\n        <li\n          id=\"cmd-profile\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.profile_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"/>\n            <circle cx=\"12\" cy=\"7\" r=\"4\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.profile_label\"\n          ) %></span>\n          <span class=\"command-palette__option-shortcut\">Go P</span>\n        </li>\n\n        <li\n          id=\"cmd-settings\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.settings_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"3\"/>\n            <path d=\"M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65\n                     1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0\n                     0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65\n                     1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0\n                     4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0\n                     0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1\n                     1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0\n                     0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0\n                     0-1.51 1z\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.settings_label\"\n          ) %></span>\n          <span class=\"command-palette__option-shortcut\">Go S</span>\n        </li>\n\n        <li id=\"cmd-admin-heading\" role=\"option\"\n            data-stimeo--command-palette-target=\"option\"\n            data-disabled=\"true\" class=\"command-palette__group-title\">\n          <%= t(\"components.command_palette.demo.admin_title\") %>\n        </li>\n\n        <li\n          id=\"cmd-theme-dark\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.dark_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <path d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.dark_label\"\n          ) %></span>\n        </li>\n\n        <li\n          id=\"cmd-theme-light\"\n          role=\"option\"\n          data-stimeo--command-palette-target=\"option\"\n          data-action=\"click->stimeo--command-palette#selectByClick\"\n          data-alert=\"<%= t(\"components.command_palette.demo.light_alert\") %>\"\n          class=\"command-palette__option\">\n          <svg class=\"command-palette__option-icon\" viewBox=\"0 0 24 24\" fill=\"none\"\n               stroke=\"currentColor\" stroke-width=\"2\">\n            <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n            <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\"/>\n            <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\"/>\n            <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\"/>\n            <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\"/>\n            <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\"/>\n            <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n            <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\"/>\n            <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\"/>\n          </svg>\n          <span class=\"command-palette__option-text\"><%= t(\n            \"components.command_palette.demo.light_label\"\n          ) %></span>\n        </li>\n      </ul>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--conditional-fields": {
       "file": "examples/conditional_fields/_demo.html.erb",
@@ -171,7 +171,7 @@
     },
     "stimeo--hover-card": {
       "file": "examples/hover_card/_demo.html.erb",
-      "source": "<%# Markup for the hover_card demo.\n    Hover/focus on the link opens a rich supplementary card after a delay. The card\n    has no role=\"dialog\" (it's purely supplementary), and its contents are assumed to\n    be reachable from the trigger's target too. The open/close delay, the hoverable\n    bridge, and Escape-to-dismiss are the library's. %>\n<span class=\"hover-card\" data-controller=\"stimeo--hover-card\">\n  <a\n    class=\"hover-card__trigger\"\n    href=\"#jane\"\n    data-stimeo--hover-card-target=\"trigger\"\n    aria-expanded=\"false\"\n    aria-controls=\"hover-card-panel\"\n    data-action=\"\n      mouseenter->stimeo--hover-card#open\n      mouseleave->stimeo--hover-card#close\n      focusin->stimeo--hover-card#open\n      focusout->stimeo--hover-card#close\n      keydown->stimeo--hover-card#onKeydown\">\n    <%= t(\"components.hover_card.demo.trigger\") %>\n  </a>\n\n  <%# The card has no role=\"dialog\" (supplementary display, not an interrupting dialog). %>\n  <div\n    class=\"hover-card__panel\"\n    id=\"hover-card-panel\"\n    data-stimeo--hover-card-target=\"card\"\n    data-action=\"\n      mouseenter->stimeo--hover-card#open\n      mouseleave->stimeo--hover-card#close\"\n    hidden>\n    <p class=\"hover-card__name\"><%= t(\"components.hover_card.demo.name\") %></p>\n    <p class=\"hover-card__role\"><%= t(\"components.hover_card.demo.role\") %></p>\n    <a class=\"hover-card__link\" href=\"#follow\"><%= t(\"components.hover_card.demo.follow\") %></a>\n  </div>\n</span>\n"
+      "source": "<%# Markup for the hover_card demo.\n    Hover/focus on the link opens a rich supplementary card after a delay. The card\n    has no role=\"dialog\" (it's purely supplementary), and its contents are assumed to\n    be reachable from the trigger's target too. The open/close delay, the hoverable\n    bridge, and Escape-to-dismiss are the library's. %>\n<span class=\"hover-card\" data-controller=\"stimeo--hover-card\">\n  <a\n    class=\"hover-card__trigger\"\n    href=\"#jane\"\n    data-stimeo--hover-card-target=\"trigger\"\n    aria-expanded=\"false\"\n    aria-controls=\"hover-card-panel\"\n    data-action=\"\n      mouseenter->stimeo--hover-card#open\n      mouseleave->stimeo--hover-card#close\n      focusin->stimeo--hover-card#open\n      focusout->stimeo--hover-card#close\">\n    <%= t(\"components.hover_card.demo.trigger\") %>\n  </a>\n\n  <%# The card has no role=\"dialog\" (supplementary display, not an interrupting dialog). %>\n  <div\n    class=\"hover-card__panel\"\n    id=\"hover-card-panel\"\n    data-stimeo--hover-card-target=\"card\"\n    data-action=\"\n      mouseenter->stimeo--hover-card#open\n      mouseleave->stimeo--hover-card#close\n      focusin->stimeo--hover-card#open\n      focusout->stimeo--hover-card#close\"\n    hidden>\n    <p class=\"hover-card__name\"><%= t(\"components.hover_card.demo.name\") %></p>\n    <p class=\"hover-card__role\"><%= t(\"components.hover_card.demo.role\") %></p>\n    <a class=\"hover-card__link\" href=\"#follow\"><%= t(\"components.hover_card.demo.follow\") %></a>\n  </div>\n</span>\n"
     },
     "stimeo--idle": {
       "file": "examples/idle/_demo.html.erb",
@@ -207,7 +207,7 @@
     },
     "stimeo--menu": {
       "file": "examples/menu/_demo.html.erb",
-      "source": "<%# Markup for the menu (APG Menu Button) demo.\n    stimeo--menu is a full role=\"menu\"/\"menuitem\" menu providing arrow-key roving\n    focus, Esc, and outside click (distinct from the disclosure dropdown).\n    Positioning (static placement) is the Playground's CSS. %>\n<div class=\"menu\" data-controller=\"stimeo--menu\">\n  <button\n    type=\"button\"\n    class=\"menu__trigger\"\n    aria-haspopup=\"menu\"\n    aria-expanded=\"false\"\n    aria-controls=\"menu-list\"\n    data-stimeo--menu-target=\"trigger\"\n    data-action=\"click->stimeo--menu#toggle keydown->stimeo--menu#onTriggerKeydown\">\n    <%= t(\"components.menu.demo.trigger\") %>\n  </button>\n\n  <%# role=\"menu\". Each item is a role=\"menuitem\" button (tabindex=-1). %>\n  <ul id=\"menu-list\" class=\"menu__list\" role=\"menu\" data-stimeo--menu-target=\"menu\" hidden>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.edit\"\n              ) %></button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.duplicate\"\n              ) %></button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.delete\"\n              ) %></button>\n    </li>\n  </ul>\n</div>\n"
+      "source": "<%# Markup for the menu (APG Menu Button) demo.\n    stimeo--menu is a full role=\"menu\"/\"menuitem\" menu providing arrow-key roving\n    focus, Esc, and outside click (distinct from the disclosure dropdown).\n    Positioning (static placement) is the Playground's CSS. %>\n<div class=\"menu\" data-controller=\"stimeo--menu\">\n  <button\n    id=\"menu-trigger\"\n    type=\"button\"\n    class=\"menu__trigger\"\n    aria-haspopup=\"menu\"\n    aria-expanded=\"false\"\n    aria-controls=\"menu-list\"\n    data-stimeo--menu-target=\"trigger\"\n    data-action=\"click->stimeo--menu#toggle keydown->stimeo--menu#onTriggerKeydown\">\n    <%= t(\"components.menu.demo.trigger\") %>\n  </button>\n\n  <%# The trigger labels the menu; each item is a role=\"menuitem\" button (tabindex=-1). %>\n  <ul id=\"menu-list\" class=\"menu__list\" role=\"menu\" aria-labelledby=\"menu-trigger\"\n      data-stimeo--menu-target=\"menu\" hidden>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.edit\"\n              ) %></button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.duplicate\"\n              ) %></button>\n    </li>\n    <li role=\"none\">\n      <button type=\"button\" role=\"menuitem\" class=\"menu__item\" tabindex=\"-1\"\n              data-stimeo--menu-target=\"item\"\n              data-action=\"click->stimeo--menu#activate\n                           keydown->stimeo--menu#onItemKeydown\"><%= t(\n                \"components.menu.demo.delete\"\n              ) %></button>\n    </li>\n  </ul>\n</div>\n"
     },
     "stimeo--menubar": {
       "file": "examples/menubar/_demo.html.erb",
@@ -251,7 +251,7 @@
     },
     "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. Items carry the Menu item\n    data-action up front; it stays inert in the bar (no stimeo--menu ancestor there) and\n    activates once an item is banked into the More menu. The library moves items and sets\n    data-overflowing / data-overflow-count; demo.css owns the look. %>\n<div class=\"overflow-demo\">\n  <label class=\"overflow-demo__width\">\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    role=\"toolbar\"\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=\"overflow-demo__item\"\n          <%= \"data-priority=\\\"#{i + 1}\\\"\".html_safe if i < 3 %>\n          data-action=\"click->stimeo--menu#activate keydown->stimeo--menu#onItemKeydown\">\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        type=\"button\"\n        class=\"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      <ul class=\"overflow-demo__menu\" role=\"menu\" data-stimeo--menu-target=\"menu\" hidden></ul>\n    </div>\n  </div>\n</div>\n"
+      "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. Items carry the Menu item\n    data-action up front; it stays inert in the bar (no stimeo--menu ancestor there) and\n    activates once an item is banked into the More menu. The library moves items and sets\n    data-overflowing / data-overflow-count; demo.css owns the look. %>\n<div class=\"overflow-demo\">\n  <label class=\"overflow-demo__width\">\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    role=\"toolbar\"\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=\"overflow-demo__item\"\n          <%= \"data-priority=\\\"#{i + 1}\\\"\".html_safe if i < 3 %>\n          data-action=\"click->stimeo--menu#activate keydown->stimeo--menu#onItemKeydown\">\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=\"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      <ul class=\"overflow-demo__menu\" role=\"menu\" aria-labelledby=\"overflow-menu-trigger\"\n          data-stimeo--menu-target=\"menu\" hidden></ul>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--pagination": {
       "file": "examples/pagination/_demo.html.erb",
@@ -419,7 +419,7 @@
     },
     "stimeo--toast": {
       "file": "examples/toast/_demo.html.erb",
-      "source": "<%# Markup for the toast demo.\n    The single source used for both the live render and the copy-paste code.\n    stimeo--toast provides max-count management, WAI-ARIA live region support, and\n    pausing the auto-dismiss timer on hover or keyboard focus.\n\n    Showing a toast is done with attributes alone (no hand-written JS):\n    put data-action=\"click->stimeo--toast#show\" plus\n    data-stimeo--toast-body-param / data-stimeo--toast-type-param on the trigger button.\n    For advanced cases where you want to trigger it remotely from JS, the controller\n    element keeps show->stimeo--toast#show, so CustomEvent('show', { detail }) works too. %>\n<div\n  class=\"toast-demo\"\n  data-controller=\"stimeo--toast\"\n  data-stimeo--toast-duration-value=\"5000\"\n  data-stimeo--toast-max-value=\"3\"\n  data-action=\"show->stimeo--toast#show\">\n\n  <div class=\"toast-demo__triggers\">\n    <button\n      type=\"button\"\n      class=\"toast-demo__btn toast-demo__btn--status\"\n      data-action=\"click->stimeo--toast#show\"\n      data-stimeo--toast-body-param=\"<%= t(\"components.toast.demo.status_body\") %>\"\n      data-stimeo--toast-type-param=\"status\">\n      <%= t(\"components.toast.demo.show_status\") %>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"toast-demo__btn toast-demo__btn--alert\"\n      data-action=\"click->stimeo--toast#show\"\n      data-stimeo--toast-body-param=\"<%= t(\"components.toast.demo.alert_body\") %>\"\n      data-stimeo--toast-type-param=\"alert\">\n      <%= t(\"components.toast.demo.show_alert\") %>\n    </button>\n  </div>\n\n  <%# The live region is a descendant of the controller. The controller element only\n      needs to contain the trigger and the list/template; role=\"region\" goes on this\n      inner container. %>\n  <div\n    id=\"playground-toast\"\n    role=\"region\"\n    aria-label=\"<%= t(\"components.toast.demo.dismiss_label\") %>\"\n    class=\"toast-container\">\n    \n    <%# The element where notifications are placed. %>\n    <ol class=\"toast-list\" data-stimeo--toast-target=\"list\"></ol>\n\n    <%# Template used to create new toasts. %>\n    <template data-stimeo--toast-target=\"template\">\n      <li\n        role=\"status\"\n        class=\"toast-item\"\n        data-stimeo--toast-target=\"item\"\n        data-action=\"mouseenter->stimeo--toast#pause\n                     mouseleave->stimeo--toast#resume\n                     focusin->stimeo--toast#pause\n                     focusout->stimeo--toast#resume\n                     keydown->stimeo--toast#onKeydown\"\n        tabindex=\"0\">\n        <div class=\"toast-item__content\">\n          <span data-toast-slot=\"body\" class=\"toast-item__body\"></span>\n          <button\n            type=\"button\"\n            class=\"toast-item__dismiss\"\n            data-action=\"click->stimeo--toast#dismiss\"\n            aria-label=\"<%= t(\"components.toast.demo.dismiss_label\") %>\">\n            <svg\n              class=\"toast-item__icon\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      </li>\n    </template>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the toast demo.\n    The single source used for both the live render and the copy-paste code.\n    stimeo--toast provides max-count management, WAI-ARIA live region support, and\n    pausing the auto-dismiss timer on hover or keyboard focus.\n\n    Showing a toast is done with attributes alone (no hand-written JS):\n    put data-action=\"click->stimeo--toast#show\" plus\n    data-stimeo--toast-body-param / data-stimeo--toast-type-param on the trigger button.\n    For advanced cases where you want to trigger it remotely from JS, the controller\n    element keeps show->stimeo--toast#show, so CustomEvent('show', { detail }) works too. %>\n<div\n  class=\"toast-demo\"\n  data-controller=\"stimeo--toast\"\n  data-stimeo--toast-duration-value=\"5000\"\n  data-stimeo--toast-max-value=\"3\"\n  data-action=\"show->stimeo--toast#show\">\n\n  <div class=\"toast-demo__triggers\">\n    <button\n      type=\"button\"\n      class=\"toast-demo__btn toast-demo__btn--status\"\n      data-action=\"click->stimeo--toast#show\"\n      data-stimeo--toast-body-param=\"<%= t(\"components.toast.demo.status_body\") %>\"\n      data-stimeo--toast-type-param=\"status\">\n      <%= t(\"components.toast.demo.show_status\") %>\n    </button>\n\n    <button\n      type=\"button\"\n      class=\"toast-demo__btn toast-demo__btn--alert\"\n      data-action=\"click->stimeo--toast#show\"\n      data-stimeo--toast-body-param=\"<%= t(\"components.toast.demo.alert_body\") %>\"\n      data-stimeo--toast-type-param=\"alert\">\n      <%= t(\"components.toast.demo.show_alert\") %>\n    </button>\n  </div>\n\n  <%# The live region is a descendant of the controller. The controller element only\n      needs to contain the trigger and the list/template; role=\"region\" goes on this\n      inner container. %>\n  <div\n    id=\"playground-toast\"\n    role=\"region\"\n    aria-label=\"<%= t(\"components.toast.demo.region_label\") %>\"\n    class=\"toast-container\">\n    \n    <%# The element where notifications are placed. %>\n    <ol class=\"toast-list\" data-stimeo--toast-target=\"list\"></ol>\n\n    <%# Template used to create new toasts. %>\n    <template data-stimeo--toast-target=\"template\">\n      <li\n        class=\"toast-item\"\n        data-stimeo--toast-target=\"item\"\n        tabindex=\"0\">\n        <div class=\"toast-item__content\">\n          <span role=\"status\" data-toast-slot=\"body\" class=\"toast-item__body\"></span>\n          <button\n            type=\"button\"\n            class=\"toast-item__dismiss\"\n            data-toast-dismiss\n            aria-label=\"<%= t(\"components.toast.demo.dismiss_label\") %>\">\n            <svg\n              class=\"toast-item__icon\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\">\n              <path d=\"M18 6L6 18M6 6l12 12\"/>\n            </svg>\n          </button>\n        </div>\n      </li>\n    </template>\n  </div>\n</div>\n"
     },
     "stimeo--toggle-group": {
       "file": "examples/toggle_group/_demo.html.erb",
@@ -431,7 +431,7 @@
     },
     "stimeo--tooltip": {
       "file": "examples/tooltip/_demo.html.erb",
-      "source": "<%# Markup for the tooltip demo.\n    Hover/focus on the trigger shows the supplementary description. The content is\n    role=\"tooltip\", referenced from the trigger via aria-describedby. The show/hide delay\n    and the hoverable bridge between trigger and tooltip are the library's. Placement is\n    the consumer's CSS. %>\n<span class=\"tooltip\" data-controller=\"stimeo--tooltip\"\n      data-stimeo--tooltip-show-delay-value=\"150\"\n      data-stimeo--tooltip-hide-delay-value=\"200\">\n  <button\n    class=\"demo-trigger\"\n    type=\"button\"\n    data-stimeo--tooltip-target=\"trigger\"\n    aria-describedby=\"tooltip-content\"\n    data-action=\"\n      mouseenter->stimeo--tooltip#show\n      mouseleave->stimeo--tooltip#hide\n      focusin->stimeo--tooltip#show\n      focusout->stimeo--tooltip#hide\n      keydown->stimeo--tooltip#onKeydown\">\n    <%= t(\"components.tooltip.demo.trigger\") %>\n  </button>\n  <span\n    class=\"tooltip__content\"\n    id=\"tooltip-content\"\n    role=\"tooltip\"\n    data-stimeo--tooltip-target=\"content\"\n    data-action=\"\n      mouseenter->stimeo--tooltip#show\n      mouseleave->stimeo--tooltip#hide\"\n    hidden>\n    <%= t(\"components.tooltip.demo.body\") %>\n  </span>\n</span>\n"
+      "source": "<%# Markup for the tooltip demo.\n    Hover/focus on the trigger shows the supplementary description. The content is\n    role=\"tooltip\", referenced from the trigger via aria-describedby. The show/hide delay\n    and the hoverable bridge between trigger and tooltip are the library's. Placement is\n    the consumer's CSS. %>\n<span class=\"tooltip\" data-controller=\"stimeo--tooltip\"\n      data-stimeo--tooltip-show-delay-value=\"150\"\n      data-stimeo--tooltip-hide-delay-value=\"200\">\n  <button\n    class=\"demo-trigger\"\n    type=\"button\"\n    data-stimeo--tooltip-target=\"trigger\"\n    aria-describedby=\"tooltip-content\"\n    data-action=\"\n      mouseenter->stimeo--tooltip#show\n      mouseleave->stimeo--tooltip#hide\n      focusin->stimeo--tooltip#show\n      focusout->stimeo--tooltip#hide\">\n    <%= t(\"components.tooltip.demo.trigger\") %>\n  </button>\n  <span\n    class=\"tooltip__content\"\n    id=\"tooltip-content\"\n    role=\"tooltip\"\n    data-stimeo--tooltip-target=\"content\"\n    data-action=\"\n      mouseenter->stimeo--tooltip#show\n      mouseleave->stimeo--tooltip#hide\"\n    hidden>\n    <%= t(\"components.tooltip.demo.body\") %>\n  </span>\n</span>\n"
     },
     "stimeo--transition": {
       "file": "examples/transition/_demo.html.erb",

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 5,
-  "packageVersion": "0.1.0-beta.2",
+  "packageVersion": "0.2.0",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -638,6 +638,13 @@
             "option"
           ],
           "suggestion": "Add role=\"option\" to each option target."
+        },
+        {
+          "target": "option",
+          "attrs": [
+            "id"
+          ],
+          "suggestion": "Add a unique id to each option target so aria-activedescendant can reference it."
         }
       ],
       "keyboard": [],
@@ -1430,7 +1437,6 @@
       ],
       "actions": [
         "close",
-        "onKeydown",
         "open"
       ],
       "events": [],
@@ -1679,6 +1685,14 @@
           ],
           "suggestion": "Add role=\"menu\" to the menu target."
         },
+        {
+          "target": "menu",
+          "attrs": [
+            "aria-labelledby",
+            "aria-label"
+          ],
+          "suggestion": "Name the menu via aria-labelledby (the trigger's id) or aria-label."
+        },
         {
           "target": "item",
           "attrs": [
@@ -3439,7 +3453,6 @@
       ],
       "actions": [
         "hide",
-        "onKeydown",
         "show"
       ],
       "events": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stimeo-ui",
-  "version": "0.1.0-beta.2",
+  "version": "0.2.0",
   "description": "Headless Stimulus UI framework for Ruby on Rails — behavior-only, accessible components driven by HTML attributes.",
   "type": "module",
   "license": "MIT",
@@ -61,8 +61,6 @@
   "scripts": {
     "build": "tsup && bun scripts/postbuild.ts",
     "dev": "tsup --watch --onSuccess \"bun scripts/postbuild.ts\"",
-    "a11y:matrix": "bun scripts/a11y-matrix.ts",
-    "a11y:matrix:check": "bun scripts/a11y-matrix.ts --check",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
@@ -86,20 +84,20 @@
     }
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.3",
-    "@floating-ui/dom": "1.7.6",
+    "@biomejs/biome": "2.5.5",
+    "@floating-ui/dom": "1.8.0",
     "@rails/actioncable": "8.1.300",
     "@types/rails__actioncable": "8.0.3",
     "@guidepup/virtual-screen-reader": "0.32.1",
     "@hotwired/stimulus": "3.2.2",
     "@hotwired/turbo": "8.0.23",
-    "@types/node": "24.13.2",
-    "@vitest/coverage-istanbul": "4.1.9",
+    "@types/node": "24.13.3",
+    "@vitest/coverage-istanbul": "4.1.10",
     "axe-core": "4.12.1",
-    "happy-dom": "20.10.6",
+    "happy-dom": "20.11.0",
     "tsup": "8.5.1",
     "typescript": "6.0.3",
-    "vitest": "4.1.9",
+    "vitest": "4.1.10",
     "vitest-axe": "0.1.0"
   },
   "overrides": {