stimeo-ui 0.2.0 → 0.2.1

package/dist/inspector/examples.json

@@ -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-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-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"
     },
     "stimeo--skeleton": {
       "file": "examples/skeleton/_demo.html.erb",
@@ -387,7 +387,7 @@
     },
     "stimeo--sticky-observer": {
       "file": "examples/sticky_observer/_demo.html.erb",
-      "source": "<%# Markup for the sticky-observer (stuck-state detection) demo.\n    The library watches a sentinel's intersection with IntersectionObserver and syncs\n    data-stuck=\"true\" once the sticky element actually sticks. position: sticky and the\n    shadow rendering are owned by demo.css. rootSelector specifies the scroll parent\n    (this demo frame). %>\n<div class=\"sticky-demo\" data-controller=\"stimeo--sticky-observer\"\n     data-stimeo--sticky-observer-root-selector-value=\".sticky-demo__scroll\">\n  <div class=\"sticky-demo__scroll\">\n    <%# Place the sentinel right before the sticky element. A 1px non-zero height keeps\n        intersection detection stable. %>\n    <div class=\"sticky-demo__sentinel\" aria-hidden=\"true\"\n         data-stimeo--sticky-observer-target=\"sentinel\"></div>\n    <header class=\"sticky-demo__header\" data-stimeo--sticky-observer-target=\"element\">\n      <%= t(\"components.sticky_observer.demo.header\") %>\n    </header>\n    <div class=\"sticky-demo__body\">\n      <% 8.times do |i| %>\n        <p><%= t(\"components.sticky_observer.demo.paragraph\", number: i + 1) %></p>\n      <% end %>\n    </div>\n  </div>\n</div>\n"
+      "source": "<%# Markup for the sticky-observer (stuck-state detection) demo.\n    The library watches a sentinel's intersection with IntersectionObserver and syncs\n    data-stuck=\"true\" once the sticky element actually sticks. position: sticky and the\n    shadow rendering are owned by demo.css. rootSelector specifies the scroll parent\n    (this demo frame). %>\n<div class=\"sticky-demo\" data-controller=\"stimeo--sticky-observer\"\n     data-stimeo--sticky-observer-root-selector-value=\".sticky-demo__scroll\">\n  <%# The scroll box is a labelled, focusable region so it can be scrolled with the\n      keyboard alone (arrows / PageDown) in every browser, not only the ones that\n      make scrollers focusable by themselves. %>\n  <div class=\"sticky-demo__scroll\" role=\"region\" tabindex=\"0\"\n       aria-label=\"<%= t('components.sticky_observer.demo.viewport_label') %>\">\n    <%# Place the sentinel right before the sticky element. A 1px non-zero height keeps\n        intersection detection stable. %>\n    <div class=\"sticky-demo__sentinel\" aria-hidden=\"true\"\n         data-stimeo--sticky-observer-target=\"sentinel\"></div>\n    <header class=\"sticky-demo__header\" data-stimeo--sticky-observer-target=\"element\">\n      <%= t(\"components.sticky_observer.demo.header\") %>\n    </header>\n    <div class=\"sticky-demo__body\">\n      <% 8.times do |i| %>\n        <p><%= t(\"components.sticky_observer.demo.paragraph\", number: i + 1) %></p>\n      <% end %>\n    </div>\n  </div>\n</div>\n"
     },
     "stimeo--submit-once": {
       "file": "examples/submit_once/_demo.html.erb",

package/dist/inspector/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 5,
-  "packageVersion": "0.2.0",
+  "packageVersion": "0.2.1",
   "controllers": {
     "stimeo--accordion": {
       "targets": [
@@ -2784,12 +2784,15 @@
         "collapsed"
       ],
       "actions": [
+        "beforeCache",
         "close",
         "open",
         "toggle"
       ],
       "events": [],
-      "requiredTargets": [],
+      "requiredTargets": [
+        "panel"
+      ],
       "a11y": [],
       "keyboard": [],
       "managedAria": [],
@@ -3199,7 +3202,8 @@
       "events": [],
       "requiredTargets": [
         "tab",
-        "panel"
+        "panel",
+        "list"
       ],
       "a11y": [
         {
@@ -3231,6 +3235,14 @@
             "tablist"
           ],
           "suggestion": "Add role=\"tablist\" to the list target."
+        },
+        {
+          "target": "list",
+          "attrs": [
+            "aria-labelledby",
+            "aria-label"
+          ],
+          "suggestion": "Name the tablist via aria-labelledby or aria-label."
         }
       ],
       "keyboard": [],

package/package.json

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