stimeo-ui 0.3.0 → 0.4.0

package/dist/inspector/examples.json

@@ -135,7 +135,7 @@
     },
     "stimeo--empty-state": {
       "file": "examples/empty_state/_demo.html.erb",
-      "source": "<%# Empty-state demo: add/remove items and the empty placeholder toggles itself. The\n    controller observes the list with a MutationObserver, toggles hidden on the\n    list / empty targets at the 0 <-> 1+ boundary, and reflects data-empty / data-count.\n    demo.js adds/removes <li> (standing in for Turbo Stream rows). This demo only styles\n    it; the empty placeholder's copy is owned here. %>\n<div\n  class=\"empty-state-demo\"\n  data-controller=\"stimeo--empty-state\"\n  data-stimeo--empty-state-announce-value=\"true\">\n  <div class=\"empty-state-demo__bar\">\n    <button\n      type=\"button\"\n      class=\"demo-trigger\"\n      data-empty-state-add\n      data-item-label=\"<%= t(\"components.empty_state.demo.item\") %>\">\n      <%= t(\"components.empty_state.demo.add\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\" data-empty-state-clear>\n      <%= t(\"components.empty_state.demo.clear\") %>\n    </button>\n  </div>\n  <ul class=\"empty-state-demo__list\" data-stimeo--empty-state-target=\"list\">\n    <li><%= t(\"components.empty_state.demo.item\") %> 1</li>\n    <li><%= t(\"components.empty_state.demo.item\") %> 2</li>\n  </ul>\n  <p class=\"empty-state-demo__empty\" data-stimeo--empty-state-target=\"empty\" hidden>\n    <%= t(\"components.empty_state.demo.empty\") %>\n  </p>\n</div>\n"
+      "source": "<%# Empty-state demo: add/remove items and the empty placeholder toggles itself. The\n    controller observes the list with a MutationObserver, toggles hidden on the\n    list / empty targets at the 0 <-> 1+ boundary, and reflects data-empty / data-count.\n    demo.js adds/removes <li> (standing in for Turbo Stream rows). This demo only styles\n    it; the empty placeholder's copy is owned here. %>\n<div\n  class=\"empty-state-demo\"\n  data-controller=\"stimeo--empty-state\"\n  data-stimeo--empty-state-announce-text-value=\"<%=\n    t(\"components.empty_state.demo.announce_empty\") %>\"\n  data-stimeo--empty-state-announce-filled-text-value=\"<%=\n    t(\"components.empty_state.demo.announce_filled\") %>\">\n  <div class=\"empty-state-demo__bar\">\n    <button\n      type=\"button\"\n      class=\"demo-trigger\"\n      data-empty-state-add\n      data-item-label=\"<%= t(\"components.empty_state.demo.item\") %>\">\n      <%= t(\"components.empty_state.demo.add\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\" data-empty-state-clear>\n      <%= t(\"components.empty_state.demo.clear\") %>\n    </button>\n  </div>\n  <ul class=\"empty-state-demo__list\" data-stimeo--empty-state-target=\"list\">\n    <li><%= t(\"components.empty_state.demo.item\") %> 1</li>\n    <li><%= t(\"components.empty_state.demo.item\") %> 2</li>\n  </ul>\n  <p class=\"empty-state-demo__empty\" data-stimeo--empty-state-target=\"empty\" hidden>\n    <%= t(\"components.empty_state.demo.empty\") %>\n  </p>\n</div>\n"
     },
     "stimeo--file-dropzone": {
       "file": "examples/file_dropzone/_demo.html.erb",
@@ -311,7 +311,7 @@
     },
     "stimeo--reading-progress": {
       "file": "examples/reading_progress/_demo.html.erb",
-      "source": "<%# reading-progress: the article publishes its progress as a CSS custom property\n    on itself AND on :root; the bar here consumes it with pure CSS (no consumer\n    JS). Scroll the page to move the bar. %>\n<div class=\"reading-progress-demo\">\n  <p class=\"reading-progress-demo__hint\"><%= t(\"components.reading_progress.demo.hint\") %></p>\n  <div class=\"reading-progress-demo__bar\" aria-hidden=\"true\"></div>\n  <article class=\"reading-progress-demo__article\" data-controller=\"stimeo--reading-progress\">\n    <% 14.times do |i| %>\n      <p><%= t(\"components.reading_progress.demo.paragraph\", index: i + 1) %></p>\n    <% end %>\n  </article>\n</div>\n"
+      "source": "<%# reading-progress: the article publishes its progress as a CSS custom property\n    on itself AND on :root; the bar here consumes it with pure CSS (no consumer\n    JS). Scroll the page to move the bar. %>\n<div class=\"reading-progress-demo\">\n  <p class=\"reading-progress-demo__hint\"><%= t(\"components.reading_progress.demo.hint\") %></p>\n  <div class=\"reading-progress-demo__bar\" aria-hidden=\"true\"></div>\n  <article class=\"reading-progress-demo__article\" data-controller=\"stimeo--reading-progress\">\n    <% 28.times do |i| %>\n      <p><%= t(\"components.reading_progress.demo.paragraph\", index: i + 1) %></p>\n    <% end %>\n  </article>\n</div>\n"
     },
     "stimeo--relative-time": {
       "file": "examples/relative_time/_demo.html.erb",
@@ -351,7 +351,7 @@
     },
     "stimeo--sidebar": {
       "file": "examples/sidebar/_demo.html.erb",
-      "source": "<%# Markup for the sidebar (collapsible sidebar) demo.\n    This demo focuses on the INLINE rail: the toggle collapses / expands it and the\n    preference persists in localStorage across reloads. (The same sidebar can also\n    switch to a modal off-canvas panel below a breakpoint — that document-level modal\n    mode is described in the text and is the same off-canvas pattern the Drawer demo\n    shows; it is not staged here because a page-level modal inside a catalog card reads\n    as taking over the page.) breakpoint=0 keeps this demo always inline. The library\n    syncs aria-expanded, data-mode, and data-state; the rail width / animation are\n    demo.css's. role=\"dialog\" is intentionally not applied — the panel stays a nav. %>\n<div\n  class=\"sidebar-demo\"\n  data-controller=\"stimeo--sidebar\"\n  data-action=\"turbo:before-cache@document->stimeo--sidebar#beforeCache\"\n  data-stimeo--sidebar-breakpoint-value=\"0\"\n  data-stimeo--sidebar-key-value=\"catalog-demo\">\n  <div class=\"sidebar-demo__bar\">\n    <button\n      type=\"button\"\n      class=\"sidebar-demo__toggle\"\n      data-stimeo--sidebar-target=\"trigger\"\n      data-action=\"click->stimeo--sidebar#toggle\"\n      aria-expanded=\"true\"\n      aria-controls=\"sidebar-demo-panel\">\n      <%= t(\"components.sidebar.demo.toggle\") %>\n    </button>\n    <span class=\"sidebar-demo__brand\"><%= t(\"components.sidebar.demo.brand\") %></span>\n  </div>\n\n  <div class=\"sidebar-demo__body\">\n    <nav\n      id=\"sidebar-demo-panel\"\n      class=\"sidebar-demo__panel\"\n      data-stimeo--sidebar-target=\"panel\"\n      aria-label=\"<%= t('components.sidebar.demo.nav_label') %>\"\n      data-mode=\"inline\"\n      data-state=\"expanded\">\n      <% t(\"components.sidebar.demo.items\").each do |label| %>\n        <a class=\"sidebar-demo__link\" href=\"#\"><%= label %></a>\n      <% end %>\n    </nav>\n\n    <main class=\"sidebar-demo__content\">\n      <p><%= t(\"components.sidebar.demo.hint\") %></p>\n    </main>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the sidebar (collapsible sidebar) demo.\n    This demo focuses on the INLINE rail: the toggle collapses / expands it and the\n    preference persists in localStorage across reloads. (The same sidebar can also\n    switch to a modal off-canvas panel below a breakpoint — that document-level modal\n    mode is described in the text and is the same off-canvas pattern the Drawer demo\n    shows; it is not staged here because a page-level modal inside a catalog card reads\n    as taking over the page.) breakpoint=0 keeps this demo always inline. The library\n    syncs aria-expanded, data-mode, and data-state; the rail width / animation are\n    demo.css's. role=\"dialog\" is intentionally not applied — the panel stays a nav. %>\n<div\n  class=\"sidebar-demo\"\n  data-controller=\"stimeo--sidebar\"\n  data-stimeo--sidebar-breakpoint-value=\"0\"\n  data-stimeo--sidebar-key-value=\"catalog-demo\">\n  <div class=\"sidebar-demo__bar\">\n    <button\n      type=\"button\"\n      class=\"sidebar-demo__toggle\"\n      data-stimeo--sidebar-target=\"trigger\"\n      data-action=\"click->stimeo--sidebar#toggle\"\n      aria-expanded=\"true\"\n      aria-controls=\"sidebar-demo-panel\">\n      <%= t(\"components.sidebar.demo.toggle\") %>\n    </button>\n    <span class=\"sidebar-demo__brand\"><%= t(\"components.sidebar.demo.brand\") %></span>\n  </div>\n\n  <div class=\"sidebar-demo__body\">\n    <nav\n      id=\"sidebar-demo-panel\"\n      class=\"sidebar-demo__panel\"\n      data-stimeo--sidebar-target=\"panel\"\n      aria-label=\"<%= t('components.sidebar.demo.nav_label') %>\"\n      data-mode=\"inline\"\n      data-state=\"expanded\">\n      <% t(\"components.sidebar.demo.items\").each do |label| %>\n        <a class=\"sidebar-demo__link\" href=\"#\"><%= label %></a>\n      <% end %>\n    </nav>\n\n    <main class=\"sidebar-demo__content\">\n      <p><%= t(\"components.sidebar.demo.hint\") %></p>\n    </main>\n  </div>\n</div>\n"
     },
     "stimeo--skeleton": {
       "file": "examples/skeleton/_demo.html.erb",
@@ -375,7 +375,7 @@
     },
     "stimeo--step-indicator": {
       "file": "examples/step_indicator/_demo.html.erb",
-      "source": "<%# Markup for the step-indicator (read-only progress) demo.\n    The library holds the current step number, sets data-state on each li, sets\n    aria-current=\"step\" on the current li, and updates the progress CSS variable\n    (--stimeo-step-indicator-ratio). The steps themselves aren't interactive, so the\n    current step is updated via the external step:set event (fired by demo.js from the\n    prev/next buttons). %>\n<div class=\"step-indicator-demo\">\n  <ol\n    class=\"step-indicator\"\n    data-controller=\"stimeo--step-indicator\"\n    aria-label=\"<%= t(\"components.step_indicator.demo.label\") %>\"\n    data-stimeo--step-indicator-current-value=\"1\"\n    data-action=\"step:set->stimeo--step-indicator#setCurrent\">\n    <% %w[cart shipping payment confirm].each_with_index do |step, index| %>\n      <li\n        class=\"step-indicator__step\"\n        data-stimeo--step-indicator-target=\"step\"\n        <%= \"data-state=\\\"complete\\\"\".html_safe if index < 1 %>\n        <%= \"data-state=\\\"current\\\" aria-current=\\\"step\\\"\".html_safe if index == 1 %>\n        <%= \"data-state=\\\"upcoming\\\"\".html_safe if index > 1 %>>\n        <span class=\"step-indicator__dot\"></span>\n        <span class=\"step-indicator__label\"><%= t(\n          \"components.step_indicator.demo.steps.#{step}\"\n        ) %></span>\n      </li>\n    <% end %>\n  </ol>\n\n  <div class=\"step-indicator__controls\">\n    <button type=\"button\" class=\"demo-trigger\" data-step-indicator-prev>\n      <%= t(\"components.step_indicator.demo.back\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\" data-step-indicator-next>\n      <%= t(\"components.step_indicator.demo.advance\") %>\n    </button>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the step-indicator (read-only progress) demo.\n    The library holds the current step number, sets data-state on each li, sets\n    aria-current=\"step\" on the current li, and updates the progress CSS variable\n    (--stimeo-step-indicator-ratio). The steps themselves aren't interactive, so the\n    current step is updated via the external step:set event (fired by demo.js from the\n    prev/next buttons). %>\n<div class=\"step-indicator-demo\">\n  <%# --steps lets the CSS put the track between the first and last dot centres:\n      the library's ratio is \"how far along the range\", and the range runs from\n      centre to centre, not edge to edge. %>\n  <ol\n    class=\"step-indicator\"\n    style=\"--steps: 4\"\n    data-controller=\"stimeo--step-indicator\"\n    aria-label=\"<%= t(\"components.step_indicator.demo.label\") %>\"\n    data-stimeo--step-indicator-current-value=\"1\"\n    data-action=\"step:set->stimeo--step-indicator#setCurrent\">\n    <% %w[cart shipping payment confirm].each_with_index do |step, index| %>\n      <li\n        class=\"step-indicator__step\"\n        data-stimeo--step-indicator-target=\"step\"\n        <%= \"data-state=\\\"complete\\\"\".html_safe if index < 1 %>\n        <%= \"data-state=\\\"current\\\" aria-current=\\\"step\\\"\".html_safe if index == 1 %>\n        <%= \"data-state=\\\"upcoming\\\"\".html_safe if index > 1 %>>\n        <span class=\"step-indicator__dot\"></span>\n        <span class=\"step-indicator__label\"><%= t(\n          \"components.step_indicator.demo.steps.#{step}\"\n        ) %></span>\n      </li>\n    <% end %>\n  </ol>\n\n  <div class=\"step-indicator__controls\">\n    <button type=\"button\" class=\"demo-trigger\" data-step-indicator-prev>\n      <%= t(\"components.step_indicator.demo.back\") %>\n    </button>\n    <button type=\"button\" class=\"demo-trigger\" data-step-indicator-next>\n      <%= t(\"components.step_indicator.demo.advance\") %>\n    </button>\n  </div>\n</div>\n"
     },
     "stimeo--stepper": {
       "file": "examples/stepper/_demo.html.erb",
@@ -383,7 +383,7 @@
     },
     "stimeo--stick-to-bottom": {
       "file": "examples/stick_to_bottom/_demo.html.erb",
-      "source": "<%# Stick-to-bottom demo: the scrollable log follows new messages while you're at the\n    bottom, but holds and shows the \"new messages\" jump button if you've scrolled up. This\n    catalog has no Action Cable / Turbo Stream, so the Add button appends a <li> — exactly\n    the mutation a Turbo Stream broadcast would make — and the controller reacts. The jump\n    button lives inside the log (a descendant, wired with a plain data-action) and CSS\n    reveals it only while data-has-new. demo.js starts the log scrolled to the bottom. The\n    library only follows/flags and reflects data-pinned / data-has-new; demo.css owns the look.\n\n    The log scrolls but its only control — the jump button — is hidden until there is\n    something to jump to, so most of the time a keyboard user cannot reach it at all\n    (WCAG 2.1.1). Rather than hand-write a tab stop, compose stimeo--scroll-area over it:\n    that controller exists for exactly this and gives the viewport tabindex=\"0\" only while\n    it holds no rendered focusable content, so the tab stop appears and disappears in step\n    with the jump button instead of doubling up with it. It goes on a wrapper because\n    stick-to-bottom must sit on the scrolling element itself, and it takes the log as its\n    viewport target. role=\"region\" comes free with the label below. %>\n<div class=\"stb-demo\">\n  <div class=\"stb-demo__log-wrap\" data-controller=\"stimeo--scroll-area\">\n    <div\n      class=\"stb-demo__log\"\n      data-controller=\"stimeo--stick-to-bottom\"\n      data-stimeo--stick-to-bottom-behavior-value=\"smooth\"\n      data-stimeo--scroll-area-target=\"viewport\"\n      aria-label=\"<%= t(\"components.stick_to_bottom.demo.viewport_label\") %>\">\n      <ul class=\"stb-demo__messages\" data-stimeo--stick-to-bottom-target=\"content\">\n        <% (1..8).each do |i| %>\n          <li><%= t(\"components.stick_to_bottom.demo.message\") %> <%= i %></li>\n        <% end %>\n      </ul>\n      <button\n        type=\"button\"\n        class=\"stb-demo__jump\"\n        data-action=\"click->stimeo--stick-to-bottom#scrollToBottom\">\n        <%= t(\"components.stick_to_bottom.demo.jump\") %>\n      </button>\n    </div>\n  </div>\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    data-stb-demo-add\n    data-message-label=\"<%= t(\"components.stick_to_bottom.demo.message\") %>\">\n    <%= t(\"components.stick_to_bottom.demo.add\") %>\n  </button>\n</div>\n"
+      "source": "<%# Stick-to-bottom demo: the scrollable log follows new messages while you're at the\n    bottom, but holds and shows the \"new messages\" jump button if you've scrolled up. This\n    catalog has no Action Cable / Turbo Stream, so the Add button appends a <li> — exactly\n    the mutation a Turbo Stream broadcast would make — and the controller reacts. The jump\n    button lives inside the log (a descendant, wired with a plain data-action) and CSS\n    reveals it only while data-has-new. pin-on-connect starts the log at the bottom so the\n    first message is followed rather than flagged — a fresh scroll container renders at the\n    top, and the controller does this on every connect, which a once-per-document page event\n    cannot. The library only follows/flags and reflects data-pinned / data-has-new; demo.css\n    owns the look.\n\n    The log scrolls but its only control — the jump button — is hidden until there is\n    something to jump to, so most of the time a keyboard user cannot reach it at all\n    (WCAG 2.1.1). Rather than hand-write a tab stop, compose stimeo--scroll-area over it:\n    that controller exists for exactly this and gives the viewport tabindex=\"0\" only while\n    it holds no rendered focusable content, so the tab stop appears and disappears in step\n    with the jump button instead of doubling up with it. It goes on a wrapper because\n    stick-to-bottom must sit on the scrolling element itself, and it takes the log as its\n    viewport target. role=\"region\" comes free with the label below. %>\n<div class=\"stb-demo\">\n  <div class=\"stb-demo__log-wrap\" data-controller=\"stimeo--scroll-area\">\n    <div\n      class=\"stb-demo__log\"\n      data-controller=\"stimeo--stick-to-bottom\"\n      data-stimeo--stick-to-bottom-behavior-value=\"smooth\"\n      data-stimeo--stick-to-bottom-pin-on-connect-value=\"true\"\n      data-stimeo--scroll-area-target=\"viewport\"\n      aria-label=\"<%= t(\"components.stick_to_bottom.demo.viewport_label\") %>\">\n      <ul class=\"stb-demo__messages\" data-stimeo--stick-to-bottom-target=\"content\">\n        <% (1..8).each do |i| %>\n          <li><%= t(\"components.stick_to_bottom.demo.message\") %> <%= i %></li>\n        <% end %>\n      </ul>\n      <button\n        type=\"button\"\n        class=\"stb-demo__jump\"\n        data-action=\"click->stimeo--stick-to-bottom#scrollToBottom\">\n        <%= t(\"components.stick_to_bottom.demo.jump\") %>\n      </button>\n    </div>\n  </div>\n  <button\n    type=\"button\"\n    class=\"demo-trigger\"\n    data-stb-demo-add\n    data-message-label=\"<%= t(\"components.stick_to_bottom.demo.message\") %>\">\n    <%= t(\"components.stick_to_bottom.demo.add\") %>\n  </button>\n</div>\n"
     },
     "stimeo--sticky-observer": {
       "file": "examples/sticky_observer/_demo.html.erb",

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 8,
-  "packageVersion": "0.3.0",
+  "packageVersion": "0.4.0",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -1036,7 +1036,8 @@
         "interval",
         "direction",
         "autostart",
-        "completeLabel"
+        "completeLabel",
+        "announceText"
       ],
       "actions": [
         "pause",
@@ -1499,7 +1500,8 @@
       ],
       "values": [
         "itemSelector",
-        "announce"
+        "announceText",
+        "announceFilledText"
       ],
       "actions": [],
       "events": [
@@ -1747,6 +1749,8 @@
         "overlay"
       ],
       "values": [
+        "announceText",
+        "announceReadyText",
         "minDuration",
         "restoreFocus"
       ],
@@ -2267,6 +2271,7 @@
         "bar"
       ],
       "values": [
+        "announceText",
         "value",
         "min",
         "max",
@@ -2514,6 +2519,8 @@
         "online"
       ],
       "values": [
+        "announceText",
+        "announceOnlineText",
         "onlineAutoHide"
       ],
       "actions": [],
@@ -2950,7 +2957,8 @@
         "min",
         "max",
         "indeterminate",
-        "valueText"
+        "valueText",
+        "announceText"
       ],
       "actions": [
         "setValue"
@@ -3484,7 +3492,6 @@
         "collapsed"
       ],
       "actions": [
-        "beforeCache",
         "close",
         "open",
         "toggle"
@@ -3509,6 +3516,7 @@
         "content"
       ],
       "values": [
+        "announceReadyText",
         "minDuration"
       ],
       "actions": [
@@ -3748,8 +3756,11 @@
         "message"
       ],
       "values": [
+        "announceText",
+        "announceReadyText",
         "delay",
-        "minDuration"
+        "minDuration",
+        "timeout"
       ],
       "actions": [
         "start",
@@ -3757,7 +3768,8 @@
       ],
       "events": [
         "hide",
-        "show"
+        "show",
+        "timeout"
       ],
       "requiredTargets": [],
       "conditionalTargets": [],
@@ -3854,7 +3866,8 @@
       ],
       "values": [
         "threshold",
-        "behavior"
+        "behavior",
+        "pinOnConnect"
       ],
       "actions": [
         "scrollToBottom"

package/package.json

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