stimeo-ui 0.11.0 → 0.13.0

package/dist/inspector/examples.json

@@ -195,7 +195,7 @@
     },
     "stimeo--live-counter": {
       "file": "examples/live_counter/_demo.html.erb",
-      "source": "<%# live-counter: the count's single source of truth is the DOM text\n    (server-rendered below from the channel's demo counter) plus the\n    LikesChannel stream. Clicking Like bumps the number optimistically and\n    performs increment; the server adds it to its counter and broadcasts the\n    absolute { count }, so every subscribed tab converges — open a second tab\n    and click in either. The trigger target keeps the button disabled while an\n    increment would be dropped (before the subscription confirms, during an\n    outage, after a rejection). The client id is randomized per render purely\n    for the demo (a real app passes current_user.id). The room comes from the\n    channel's allowlisted constant so the subscription params and the\n    server-rendered initial value below can never drift (a real app passes its\n    record id, e.g. post.id). %>\n<% room = LikesChannel::ROOM %>\n<div class=\"live-counter-demo\"\n     data-controller=\"stimeo--live-counter\"\n     data-stimeo--live-counter-channel-value=\"LikesChannel\"\n     data-stimeo--live-counter-params-value='{\"room\":\"<%= room %>\"}'\n     data-stimeo--live-counter-id-value=\"<%= SecureRandom.hex(4) %>\">\n  <p class=\"live-counter-demo__hint\"><%= t(\"components.live_counter.demo.hint\") %></p>\n  <div class=\"live-counter-demo__row\">\n    <button type=\"button\" class=\"demo-trigger live-counter-demo__button\"\n            data-stimeo--live-counter-target=\"trigger\"\n            data-action=\"stimeo--live-counter#increment\">\n      <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2\n                 -1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z\"/>\n      </svg>\n      <%= t(\"components.live_counter.demo.like\") %>\n    </button>\n    <p class=\"live-counter-demo__count\">\n      <%# Server-rendered initial value: reading the channel's in-memory demo\n          counter keeps the DOM truth aligned with the server (a real app\n          renders the persisted count, e.g. post.likes_count). %>\n      <span class=\"live-counter-demo__value\" data-stimeo--live-counter-target=\"value\"><%=\n        LikesChannel.count(room) %></span>\n      <span class=\"live-counter-demo__unit\"><%= t(\"components.live_counter.demo.unit\") %></span>\n    </p>\n  </div>\n</div>\n"
+      "source": "<%# live-counter: the count's single source of truth is the DOM text\n    (server-rendered below from the channel's demo counter) plus the\n    LikesChannel stream. Clicking Like bumps the number optimistically and\n    performs increment; the server adds it to its counter and broadcasts the\n    absolute { count }, so every subscribed tab converges — open a second tab\n    and click in either. The trigger target keeps the button disabled while an\n    increment would be dropped (before the subscription confirms, during an\n    outage, after a rejection). The client id is randomized per render, which\n    identifies this tab rather than this user — a real app passes any per-client\n    string (SecureRandom.uuid). Sharing one id across tabs still converges, since\n    an echo only cancels one guess of its own size, but a per-tab id keeps every\n    echo paired with the tab that guessed it. It is printed below so two tabs\n    side by side can be told apart; an app has no reason to show it. The room comes from the\n    channel's allowlisted constant so the subscription params and the\n    server-rendered initial value below can never drift (a real app passes its\n    record id, e.g. post.id). %>\n<% room = LikesChannel::ROOM %>\n<% tab = SecureRandom.hex(4) %>\n<div class=\"live-counter-demo\"\n     data-controller=\"stimeo--live-counter\"\n     data-stimeo--live-counter-channel-value=\"LikesChannel\"\n     data-stimeo--live-counter-params-value='{\"room\":\"<%= room %>\"}'\n     data-stimeo--live-counter-id-value=\"<%= tab %>\">\n  <p class=\"live-counter-demo__hint\"><%= t(\"components.live_counter.demo.hint\") %></p>\n  <p class=\"live-counter-demo__you\"><%=\n    t(\"components.live_counter.demo.this_tab\", token: tab) %></p>\n  <div class=\"live-counter-demo__row\">\n    <button type=\"button\" class=\"demo-trigger live-counter-demo__button\"\n            data-stimeo--live-counter-target=\"trigger\"\n            data-action=\"stimeo--live-counter#increment\">\n      <svg class=\"demo-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\n           stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n        <path d=\"M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2\n                 -1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z\"/>\n      </svg>\n      <%= t(\"components.live_counter.demo.like\") %>\n    </button>\n    <p class=\"live-counter-demo__count\">\n      <%# Server-rendered initial value: reading the channel's in-memory demo\n          counter keeps the DOM truth aligned with the server (a real app\n          renders the persisted count, e.g. post.likes_count). %>\n      <span class=\"live-counter-demo__value\" data-stimeo--live-counter-target=\"value\"><%=\n        LikesChannel.count(room) %></span>\n      <span class=\"live-counter-demo__unit\"><%= t(\"components.live_counter.demo.unit\") %></span>\n    </p>\n  </div>\n</div>\n"
     },
     "stimeo--local-time": {
       "file": "examples/local_time/_demo.html.erb",
@@ -367,7 +367,7 @@
     },
     "stimeo--sortable": {
       "file": "examples/sortable/_demo.html.erb",
-      "source": "<%# sortable: markup-level composition — pointer-drag on each item emits the drag\n    signal (with its keyboard alternative), roving keeps the handles one Tab stop,\n    and sortable interprets the signal: it live-reorders the DOM, announces each\n    step through the status live region (localized via the data-* templates), and\n    dispatches reorder on a drop that changed the position. demo.js only mirrors\n    that reorder event into the \"saved\" line — the pattern a real app uses to POST\n    the new position. %>\n<div class=\"sortable-demo\">\n  <p class=\"sortable-demo__hint\"><%= t(\"components.sortable.demo.hint\") %></p>\n  <div data-controller=\"stimeo--sortable\">\n    <ul class=\"sortable-demo__list\" data-stimeo--sortable-target=\"list\"\n        data-controller=\"stimeo--roving\"\n        data-stimeo--roving-orientation-value=\"vertical\"\n        aria-label=\"<%= t('components.sortable.demo.list_label') %>\">\n      <% t(\"components.sortable.demo.items\").each do |label| %>\n        <li class=\"sortable-demo__item\" data-stimeo--sortable-target=\"item\"\n            data-stimeo--sortable-name=\"<%= label %>\"\n            data-controller=\"stimeo--pointer-drag\"\n            data-stimeo--pointer-drag-axis-value=\"y\">\n          <button type=\"button\" class=\"sortable-demo__handle\"\n                  aria-label=\"<%= t('components.sortable.demo.handle_label', name: label) %>\"\n                  data-stimeo--pointer-drag-target=\"handle\"\n                  data-stimeo--roving-target=\"item\">\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          </button>\n          <span class=\"sortable-demo__label\"><%= label %></span>\n        </li>\n      <% end %>\n    </ul>\n    <p class=\"sortable-demo__status\" role=\"status\"\n       data-stimeo--sortable-target=\"status\"\n       data-grabbed=\"<%= t(\"components.sortable.demo.announce.grabbed\") %>\"\n       data-moved=\"<%= t(\"components.sortable.demo.announce.moved\") %>\"\n       data-dropped=\"<%= t(\"components.sortable.demo.announce.dropped\") %>\"\n       data-canceled=\"<%= t(\"components.sortable.demo.announce.canceled\") %>\"></p>\n  </div>\n  <p class=\"sortable-demo__saved\" data-sortable-saved aria-live=\"polite\"\n     data-saved-template=\"<%= t(\"components.sortable.demo.saved_template\") %>\"></p>\n</div>\n"
+      "source": "<%# sortable: markup-level composition — pointer-drag on each item emits the drag\n    signal (with its keyboard alternative), roving keeps the handles one Tab stop,\n    and sortable interprets the signal: it live-reorders the DOM, hands each step\n    to the page's shared announcer (wording from the announce-* values), and\n    dispatches reorder on a drop that changed the position. demo.js mirrors that\n    reorder event into the \"saved\" line — the pattern a real app uses to POST the\n    new position — and echoes what the announcer heard into a muted line. %>\n<div class=\"sortable-demo\">\n  <p class=\"sortable-demo__hint\"><%= t(\"components.sortable.demo.hint\") %></p>\n  <% announce = t(\"components.sortable.demo.announce\") %>\n  <div data-controller=\"stimeo--sortable\"\n       data-stimeo--sortable-announce-grabbed-text-value=\"<%= announce[:grabbed] %>\"\n       data-stimeo--sortable-announce-moved-text-value=\"<%= announce[:moved] %>\"\n       data-stimeo--sortable-announce-dropped-text-value=\"<%= announce[:dropped] %>\"\n       data-stimeo--sortable-announce-canceled-text-value=\"<%= announce[:canceled] %>\">\n    <ul class=\"sortable-demo__list\" data-stimeo--sortable-target=\"list\"\n        data-controller=\"stimeo--roving\"\n        data-stimeo--roving-orientation-value=\"vertical\"\n        aria-label=\"<%= t('components.sortable.demo.list_label') %>\">\n      <% t(\"components.sortable.demo.items\").each do |label| %>\n        <li class=\"sortable-demo__item\" data-stimeo--sortable-target=\"item\"\n            data-stimeo--sortable-name=\"<%= label %>\"\n            data-controller=\"stimeo--pointer-drag\"\n            data-stimeo--pointer-drag-axis-value=\"y\">\n          <button type=\"button\" class=\"sortable-demo__handle\"\n                  aria-label=\"<%= t('components.sortable.demo.handle_label', name: label) %>\"\n                  data-stimeo--pointer-drag-target=\"handle\"\n                  data-stimeo--roving-target=\"item\">\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          </button>\n          <span class=\"sortable-demo__label\"><%= label %></span>\n        </li>\n      <% end %>\n    </ul>\n  </div>\n  <p class=\"sortable-demo__status\" data-sortable-heard aria-hidden=\"true\"></p>\n  <p class=\"sortable-demo__saved\" data-sortable-saved aria-live=\"polite\"\n     data-saved-template=\"<%= t(\"components.sortable.demo.saved_template\") %>\"></p>\n</div>\n"
     },
     "stimeo--spinner": {
       "file": "examples/spinner/_demo.html.erb",

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 12,
-  "packageVersion": "0.11.0",
+  "packageVersion": "0.13.0",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -4433,11 +4433,14 @@
     "stimeo--sortable": {
       "targets": [
         "list",
-        "item",
-        "status"
+        "item"
       ],
       "values": [
-        "orientation"
+        "orientation",
+        "announceGrabbedText",
+        "announceMovedText",
+        "announceDroppedText",
+        "announceCanceledText"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -4451,30 +4454,7 @@
       "conditionalTargets": [],
       "requiredActions": [],
       "actionCompletion": [],
-      "a11y": [
-        {
-          "target": "status",
-          "attrs": [
-            "role"
-          ],
-          "values": [
-            "status",
-            "alert"
-          ],
-          "or": [
-            {
-              "attrs": [
-                "aria-live"
-              ],
-              "values": [
-                "polite",
-                "assertive"
-              ]
-            }
-          ],
-          "suggestion": "Add role=\"status\" (or aria-live=\"polite\") to the status target."
-        }
-      ],
+      "a11y": [],
       "keyboard": [],
       "hosts": [],
       "managedAria": [],
@@ -5578,7 +5558,8 @@
       "values": [
         "channel",
         "params",
-        "id"
+        "id",
+        "announceText"
       ],
       "valueConstraints": [],
       "valueRelations": [],
@@ -5614,7 +5595,9 @@
         "id",
         "name",
         "heartbeat",
-        "timeout"
+        "timeout",
+        "announceJoinText",
+        "announceLeaveText"
       ],
       "valueConstraints": [],
       "valueRelations": [],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stimeo-ui",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Headless Stimulus UI framework for Ruby on Rails — behavior-only, accessible components driven by HTML attributes.",
   "type": "module",
   "license": "MIT",