stimeo-ui 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +163 -0
- package/dist/cable/index.d.ts +16 -16
- package/dist/cable/index.js.map +1 -1
- package/dist/controllers/accordion_controller.d.ts +3 -2
- package/dist/controllers/accordion_controller.js +10 -0
- package/dist/controllers/accordion_controller.js.map +1 -1
- package/dist/controllers/alert_dialog_controller.d.ts +64 -0
- package/dist/controllers/alert_dialog_controller.js +318 -0
- package/dist/controllers/alert_dialog_controller.js.map +1 -0
- package/dist/controllers/breadcrumb_controller.d.ts +97 -10
- package/dist/controllers/breadcrumb_controller.js +225 -13
- package/dist/controllers/breadcrumb_controller.js.map +1 -1
- package/dist/controllers/calendar_controller.d.ts +11 -1
- package/dist/controllers/calendar_controller.js +89 -22
- package/dist/controllers/calendar_controller.js.map +1 -1
- package/dist/controllers/carousel_controller.d.ts +115 -0
- package/dist/controllers/carousel_controller.js +313 -0
- package/dist/controllers/carousel_controller.js.map +1 -0
- package/dist/controllers/clipboard_controller.d.ts +72 -0
- package/dist/controllers/clipboard_controller.js +144 -0
- package/dist/controllers/clipboard_controller.js.map +1 -0
- package/dist/controllers/collapsible_controller.d.ts +70 -0
- package/dist/controllers/collapsible_controller.js +327 -0
- package/dist/controllers/collapsible_controller.js.map +1 -0
- package/dist/controllers/color_picker_controller.d.ts +87 -0
- package/dist/controllers/color_picker_controller.js +252 -0
- package/dist/controllers/color_picker_controller.js.map +1 -0
- package/dist/controllers/combobox_controller.d.ts +14 -1
- package/dist/controllers/combobox_controller.js +162 -23
- package/dist/controllers/combobox_controller.js.map +1 -1
- package/dist/controllers/command_palette_controller.d.ts +2 -0
- package/dist/controllers/command_palette_controller.js +194 -17
- package/dist/controllers/command_palette_controller.js.map +1 -1
- package/dist/controllers/confirm_controller.js.map +1 -1
- package/dist/controllers/context_menu_controller.d.ts +7 -6
- package/dist/controllers/context_menu_controller.js +32 -10
- package/dist/controllers/context_menu_controller.js.map +1 -1
- package/dist/controllers/count_up_controller.js +8 -1
- package/dist/controllers/count_up_controller.js.map +1 -1
- package/dist/controllers/currency_input_controller.d.ts +72 -0
- package/dist/controllers/currency_input_controller.js +147 -0
- package/dist/controllers/currency_input_controller.js.map +1 -0
- package/dist/controllers/data_grid_controller.d.ts +89 -0
- package/dist/controllers/data_grid_controller.js +246 -0
- package/dist/controllers/data_grid_controller.js.map +1 -0
- package/dist/controllers/date_range_picker_controller.d.ts +88 -0
- package/dist/controllers/date_range_picker_controller.js +441 -0
- package/dist/controllers/date_range_picker_controller.js.map +1 -0
- package/dist/controllers/dialog_controller.js.map +1 -1
- package/dist/controllers/dismissible_controller.d.ts +57 -0
- package/dist/controllers/dismissible_controller.js +117 -0
- package/dist/controllers/dismissible_controller.js.map +1 -0
- package/dist/controllers/drawer_controller.d.ts +96 -0
- package/dist/controllers/drawer_controller.js +630 -0
- package/dist/controllers/drawer_controller.js.map +1 -0
- package/dist/controllers/dropdown_controller.d.ts +1 -2
- package/dist/controllers/dropdown_controller.js.map +1 -1
- package/dist/controllers/editable_controller.d.ts +73 -0
- package/dist/controllers/editable_controller.js +169 -0
- package/dist/controllers/editable_controller.js.map +1 -0
- package/dist/controllers/file_dropzone_controller.d.ts +92 -0
- package/dist/controllers/file_dropzone_controller.js +165 -0
- package/dist/controllers/file_dropzone_controller.js.map +1 -0
- package/dist/controllers/filter_controller.d.ts +60 -0
- package/dist/controllers/filter_controller.js +86 -0
- package/dist/controllers/filter_controller.js.map +1 -0
- package/dist/controllers/flash_controller.js +36 -5
- package/dist/controllers/flash_controller.js.map +1 -1
- package/dist/controllers/focus_controller.d.ts +1 -1
- package/dist/controllers/focus_controller.js.map +1 -1
- package/dist/controllers/form_field_controller.js.map +1 -1
- package/dist/controllers/form_validation_controller.js +1 -1
- package/dist/controllers/form_validation_controller.js.map +1 -1
- package/dist/controllers/highlight_controller.js +6 -4
- package/dist/controllers/highlight_controller.js.map +1 -1
- package/dist/controllers/hover_card_controller.d.ts +1 -1
- package/dist/controllers/hover_card_controller.js.map +1 -1
- package/dist/controllers/intersection_controller.js +67 -19
- package/dist/controllers/intersection_controller.js.map +1 -1
- package/dist/controllers/lazy_frame_controller.js +54 -11
- package/dist/controllers/lazy_frame_controller.js.map +1 -1
- package/dist/controllers/listbox_controller.d.ts +9 -2
- package/dist/controllers/listbox_controller.js +257 -53
- package/dist/controllers/listbox_controller.js.map +1 -1
- package/dist/controllers/local_time_controller.js +2 -2
- package/dist/controllers/local_time_controller.js.map +1 -1
- package/dist/controllers/masonry_controller.d.ts +54 -0
- package/dist/controllers/masonry_controller.js +142 -0
- package/dist/controllers/masonry_controller.js.map +1 -0
- package/dist/controllers/menu_controller.d.ts +29 -11
- package/dist/controllers/menu_controller.js +104 -17
- package/dist/controllers/menu_controller.js.map +1 -1
- package/dist/controllers/menubar_controller.d.ts +142 -0
- package/dist/controllers/menubar_controller.js +785 -0
- package/dist/controllers/menubar_controller.js.map +1 -0
- package/dist/controllers/meter_controller.js.map +1 -1
- package/dist/controllers/multi_select_controller.d.ts +141 -0
- package/dist/controllers/multi_select_controller.js +755 -0
- package/dist/controllers/multi_select_controller.js.map +1 -0
- package/dist/controllers/navigation_menu_controller.d.ts +146 -0
- package/dist/controllers/navigation_menu_controller.js +511 -0
- package/dist/controllers/navigation_menu_controller.js.map +1 -0
- package/dist/controllers/nested_form_controller.d.ts +4 -5
- package/dist/controllers/nested_form_controller.js.map +1 -1
- package/dist/controllers/number_input_controller.d.ts +1 -1
- package/dist/controllers/number_input_controller.js +7 -0
- package/dist/controllers/number_input_controller.js.map +1 -1
- package/dist/controllers/otp_controller.js +18 -1
- package/dist/controllers/otp_controller.js.map +1 -1
- package/dist/controllers/overflow_indicator_controller.d.ts +15 -6
- package/dist/controllers/overflow_indicator_controller.js +246 -27
- package/dist/controllers/overflow_indicator_controller.js.map +1 -1
- package/dist/controllers/overflow_menu_controller.d.ts +78 -19
- package/dist/controllers/overflow_menu_controller.js +381 -57
- package/dist/controllers/overflow_menu_controller.js.map +1 -1
- package/dist/controllers/pagination_controller.d.ts +36 -5
- package/dist/controllers/pagination_controller.js +163 -32
- package/dist/controllers/pagination_controller.js.map +1 -1
- package/dist/controllers/password_reveal_controller.d.ts +49 -0
- package/dist/controllers/password_reveal_controller.js +117 -0
- package/dist/controllers/password_reveal_controller.js.map +1 -0
- package/dist/controllers/persist_controller.js +6 -6
- package/dist/controllers/persist_controller.js.map +1 -1
- package/dist/controllers/pointer_drag_controller.d.ts +2 -3
- package/dist/controllers/pointer_drag_controller.js +9 -1
- package/dist/controllers/pointer_drag_controller.js.map +1 -1
- package/dist/controllers/popover_controller.d.ts +1 -2
- package/dist/controllers/popover_controller.js +2 -2
- package/dist/controllers/popover_controller.js.map +1 -1
- package/dist/controllers/portal_controller.d.ts +4 -4
- package/dist/controllers/portal_controller.js.map +1 -1
- package/dist/controllers/progress_controller.js.map +1 -1
- package/dist/controllers/radio_group_controller.js +22 -3
- package/dist/controllers/radio_group_controller.js.map +1 -1
- package/dist/controllers/range_slider_controller.d.ts +97 -0
- package/dist/controllers/range_slider_controller.js +192 -0
- package/dist/controllers/range_slider_controller.js.map +1 -0
- package/dist/controllers/rating_controller.js +16 -2
- package/dist/controllers/rating_controller.js.map +1 -1
- package/dist/controllers/read_more_controller.d.ts +52 -0
- package/dist/controllers/read_more_controller.js +238 -0
- package/dist/controllers/read_more_controller.js.map +1 -0
- package/dist/controllers/reading_progress_controller.js.map +1 -1
- package/dist/controllers/resizable_controller.d.ts +3 -1
- package/dist/controllers/resizable_controller.js +65 -1
- package/dist/controllers/resizable_controller.js.map +1 -1
- package/dist/controllers/roving_controller.js +17 -2
- package/dist/controllers/roving_controller.js.map +1 -1
- package/dist/controllers/scroll_area_controller.js +101 -14
- package/dist/controllers/scroll_area_controller.js.map +1 -1
- package/dist/controllers/scroll_restore_controller.d.ts +54 -0
- package/dist/controllers/scroll_restore_controller.js +93 -0
- package/dist/controllers/scroll_restore_controller.js.map +1 -0
- package/dist/controllers/scroll_visibility_controller.d.ts +6 -3
- package/dist/controllers/scroll_visibility_controller.js +40 -6
- package/dist/controllers/scroll_visibility_controller.js.map +1 -1
- package/dist/controllers/scrollspy_controller.d.ts +64 -15
- package/dist/controllers/scrollspy_controller.js +369 -74
- package/dist/controllers/scrollspy_controller.js.map +1 -1
- package/dist/controllers/separator_controller.d.ts +69 -0
- package/dist/controllers/separator_controller.js +96 -0
- package/dist/controllers/separator_controller.js.map +1 -0
- package/dist/controllers/sidebar_controller.d.ts +107 -0
- package/dist/controllers/sidebar_controller.js +761 -0
- package/dist/controllers/sidebar_controller.js.map +1 -0
- package/dist/controllers/skeleton_controller.js +1 -1
- package/dist/controllers/skeleton_controller.js.map +1 -1
- package/dist/controllers/slider_controller.d.ts +11 -1
- package/dist/controllers/slider_controller.js +32 -6
- package/dist/controllers/slider_controller.js.map +1 -1
- package/dist/controllers/sortable_controller.d.ts +3 -1
- package/dist/controllers/sortable_controller.js +34 -3
- package/dist/controllers/sortable_controller.js.map +1 -1
- package/dist/controllers/spinner_controller.js +1 -1
- package/dist/controllers/spinner_controller.js.map +1 -1
- package/dist/controllers/stepper_controller.d.ts +4 -0
- package/dist/controllers/stepper_controller.js +28 -12
- package/dist/controllers/stepper_controller.js.map +1 -1
- package/dist/controllers/stick_to_bottom_controller.d.ts +5 -6
- package/dist/controllers/stick_to_bottom_controller.js +9 -4
- package/dist/controllers/stick_to_bottom_controller.js.map +1 -1
- package/dist/controllers/sticky_observer_controller.d.ts +17 -4
- package/dist/controllers/sticky_observer_controller.js +109 -20
- package/dist/controllers/sticky_observer_controller.js.map +1 -1
- package/dist/controllers/submit_once_controller.d.ts +2 -2
- package/dist/controllers/submit_once_controller.js.map +1 -1
- package/dist/controllers/switch_controller.js +1 -0
- package/dist/controllers/switch_controller.js.map +1 -1
- package/dist/controllers/tabs_controller.d.ts +13 -4
- package/dist/controllers/tabs_controller.js +26 -3
- package/dist/controllers/tabs_controller.js.map +1 -1
- package/dist/controllers/tags_input_controller.d.ts +91 -0
- package/dist/controllers/tags_input_controller.js +295 -0
- package/dist/controllers/tags_input_controller.js.map +1 -0
- package/dist/controllers/theme_controller.d.ts +1 -1
- package/dist/controllers/theme_controller.js +42 -13
- package/dist/controllers/theme_controller.js.map +1 -1
- package/dist/controllers/time_picker_controller.d.ts +67 -0
- package/dist/controllers/time_picker_controller.js +231 -0
- package/dist/controllers/time_picker_controller.js.map +1 -0
- package/dist/controllers/toast_controller.d.ts +5 -14
- package/dist/controllers/toast_controller.js +40 -14
- package/dist/controllers/toast_controller.js.map +1 -1
- package/dist/controllers/toggle_group_controller.js +23 -2
- package/dist/controllers/toggle_group_controller.js.map +1 -1
- package/dist/controllers/toolbar_controller.d.ts +53 -13
- package/dist/controllers/toolbar_controller.js +230 -31
- package/dist/controllers/toolbar_controller.js.map +1 -1
- package/dist/controllers/tooltip_controller.d.ts +1 -1
- package/dist/controllers/tooltip_controller.js.map +1 -1
- package/dist/controllers/transition_controller.d.ts +14 -8
- package/dist/controllers/transition_controller.js +153 -38
- package/dist/controllers/transition_controller.js.map +1 -1
- package/dist/controllers/tree_view_controller.d.ts +135 -0
- package/dist/controllers/tree_view_controller.js +691 -0
- package/dist/controllers/tree_view_controller.js.map +1 -0
- package/dist/index.d.ts +27 -1818
- package/dist/index.js +4256 -915
- package/dist/index.js.map +1 -1
- package/dist/inspector/cli.d.ts +375 -39
- package/dist/inspector/cli.js +228 -14
- package/dist/inspector/cli.js.map +1 -1
- package/dist/inspector/cli_bin.js +419 -48
- package/dist/inspector/cli_bin.js.map +1 -1
- package/dist/inspector/examples.json +26 -26
- package/dist/inspector/manifest.json +1054 -127
- package/package.json +5 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/utils/intersection_watcher.ts","../../src/controllers/scrollspy_controller.ts"],"names":[],"mappings":"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","file":"scrollspy_controller.js","sourcesContent":["/**\n * Shared `IntersectionObserver` plumbing for Stimeo's scroll-triggered\n * controllers (`intersection`, `scrollspy`, `sticky-observer`, `lazy-frame`).\n *\n * It centralizes the `IntersectionObserver` support guard, root resolution from\n * a selector, observer creation/teardown, the **active guard** (the browser may\n * flush a final queued callback batch right after `disconnect()`, and a\n * detached controller must not mutate possibly-cached DOM), and the\n * unobserve→observe **re-arm** that re-delivers the current state even when the\n * target never leaves the viewport.\n *\n * Like {@link RovingTabindex} and `FocusTrap`, this is a policy-free internal\n * util: what an intersection *means* (a spied link, a stuck header, a lazy\n * load) stays in each controller. The public `stimeo--intersection` controller\n * is its thin declarative face.\n */\nexport interface IntersectionWatchOptions {\n /**\n * The observation root. Pass an element (or `null` for the viewport) when\n * the caller already resolved it; omit to resolve from `rootSelector`.\n */\n root?: Element | null;\n /** Selector for the observation root; empty/omitted = viewport. */\n rootSelector?: string;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\nexport class IntersectionWatcher {\n readonly #onEntries: (entries: IntersectionObserverEntry[]) => void;\n #observer: IntersectionObserver | null = null;\n #active = false;\n\n constructor(onEntries: (entries: IntersectionObserverEntry[]) => void) {\n this.#onEntries = onEntries;\n }\n\n /** Whether an observer is live (started, `IntersectionObserver` supported). */\n get active(): boolean {\n return this.#active;\n }\n\n /**\n * (Re)creates the observer and observes `targets`. Returns `false` — leaving\n * the watcher inert — without `IntersectionObserver` support (very old\n * browsers; the caller's no-JS fallback stays in charge) or with no targets.\n */\n start(targets: Element | readonly Element[], options: IntersectionWatchOptions = {}): boolean {\n this.stop();\n if (typeof IntersectionObserver === \"undefined\") return false;\n const list = Array.isArray(targets) ? (targets as readonly Element[]) : [targets as Element];\n if (list.length === 0) return false;\n\n const root =\n \"root\" in options\n ? (options.root ?? null)\n : options.rootSelector\n ? document.querySelector(options.rootSelector)\n : null;\n\n this.#active = true;\n this.#observer = new IntersectionObserver(\n (entries) => {\n if (this.#active) this.#onEntries(entries);\n },\n { root, rootMargin: options.rootMargin, threshold: options.threshold },\n );\n for (const target of list) this.#observer.observe(target);\n return true;\n }\n\n /**\n * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`\n * only reports *changes*, but `observe()` always reports the present state,\n * so unobserve→observe turns \"still intersecting\" into a fresh callback.\n */\n rearm(target: Element): void {\n if (!this.#observer) return;\n this.#observer.unobserve(target);\n this.#observer.observe(target);\n }\n\n /** Severs the observer; late queued callbacks become no-ops via the guard. */\n stop(): void {\n this.#active = false;\n this.#observer?.disconnect();\n this.#observer = null;\n }\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { IntersectionWatcher } from \"../utils/intersection_watcher\";\n\n/**\n * Headless, accessible Scrollspy / Navigation catalog synchronizer.\n *\n * Markup contract (identifier: `stimeo--scrollspy`):\n * <nav data-controller=\"stimeo--scrollspy\"\n * data-stimeo--scrollspy-offset-value=\"80\"\n * aria-label=\"Table of contents\">\n * <a href=\"#intro\" data-stimeo--scrollspy-target=\"link\">Intro</a>\n * <a href=\"#usage\" data-stimeo--scrollspy-target=\"link\">Usage</a>\n * </nav>\n * <section id=\"intro\">…</section>\n * <section id=\"usage\">…</section>\n *\n * Implements clean active location synchronization driven by `aria-current`:\n * - Leverages native `IntersectionObserver` to track viewport visibility.\n * - Robust evaluation algorithm: among all intersecting sections, the one closest\n * to the top offset trigger line (`boundingClientRect.top`) is prioritized as active.\n * - Toggles `aria-current=\"location\"` dynamically on active/inactive links.\n * - Gracefully handles teardown `disconnect()` by severing observer references to prevent leaks.\n *\n * @remarks\n * Behavior only. The controller manages state on catalog links via `aria-current`,\n * respects custom offsets, and dispatches `stimeo--scrollspy:change` events.\n */\nexport class ScrollspyController extends Controller<HTMLElement> {\n static override targets = [\"link\"];\n static override values = {\n offset: { type: Number, default: 0 },\n rootMargin: { type: String, default: \"\" },\n rootSelector: { type: String, default: \"\" },\n };\n static actions = [\"scrollTo\"] as const;\n static events = [\"change\"] as const;\n\n declare readonly linkTargets: HTMLElement[];\n\n declare offsetValue: number;\n declare rootMarginValue: string;\n declare rootSelectorValue: string;\n\n /** Shared IO plumbing (support guard, active guard, teardown). */\n readonly #watcher = new IntersectionWatcher((entries) => this.#onIntersection(entries));\n #isConnected = false;\n\n /** Track active/intersecting status of each section element by ID. */\n #intersectionStates = new Map<string, { isIntersecting: boolean; top: number }>();\n\n /** Current active section ID, used to avoid duplicate event dispatching. */\n #activeSectionId = \"\";\n\n override connect(): void {\n this.#isConnected = true;\n this.#initializeObserver();\n }\n\n override disconnect(): void {\n this.#isConnected = false;\n this.#watcher.stop();\n this.#intersectionStates.clear();\n this.#activeSectionId = \"\";\n }\n\n /**\n * Re-initializes the observer if the offset or rootMargin values change dynamically.\n */\n offsetValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n rootMarginValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n rootSelectorValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n /**\n * Smoothly scrolls to the target element mapped by the link anchor.\n * Prevents full window scroll jumps when tracking nested scrollable containers.\n */\n scrollTo(event: Event): void {\n const link = event.currentTarget as HTMLElement;\n const id = this.#getAnchorId(link);\n if (!id) return;\n\n event.preventDefault();\n\n const targetElement = document.getElementById(id);\n if (!targetElement) return;\n\n const rootElement = this.#getRootElement();\n if (rootElement) {\n const containerRect = rootElement.getBoundingClientRect();\n const targetRect = targetElement.getBoundingClientRect();\n const scrollPosition =\n rootElement.scrollTop + (targetRect.top - containerRect.top) - this.offsetValue;\n\n rootElement.scrollTo({\n top: scrollPosition,\n behavior: \"smooth\",\n });\n } else {\n const targetRect = targetElement.getBoundingClientRect();\n const scrollPosition = window.scrollY + targetRect.top - this.offsetValue;\n\n window.scrollTo({\n top: scrollPosition,\n behavior: \"smooth\",\n });\n }\n }\n\n #getRootElement(): HTMLElement | null {\n if (!this.rootSelectorValue) return null;\n return document.querySelector(this.rootSelectorValue);\n }\n\n #initializeObserver(): void {\n this.#watcher.stop();\n this.#intersectionStates.clear();\n this.#activeSectionId = \"\";\n\n if (this.linkTargets.length === 0) return;\n\n // Build the dynamic rootMargin string based on offset value\n const margin = this.rootMarginValue || `-${this.offsetValue}px 0px -80% 0px`;\n\n // Observe each target section mapped by the href anchors.\n const sections: Element[] = [];\n for (const link of this.linkTargets) {\n const id = this.#getAnchorId(link);\n if (!id) continue;\n const section = document.getElementById(id);\n if (section) sections.push(section);\n }\n\n this.#watcher.start(sections, {\n root: this.#getRootElement(),\n rootMargin: margin,\n threshold: [0, 0.2, 0.4, 0.6, 0.8, 1], // Multiple thresholds handle large sections safely\n });\n }\n\n readonly #onIntersection = (entries: IntersectionObserverEntry[]): void => {\n // Ignore any callback delivered after teardown: the browser may flush a\n // final queued batch right after `disconnect()`, and a detached controller\n // must not mutate `aria-current` on (possibly cached) links.\n if (!this.#isConnected) return;\n\n for (const entry of entries) {\n const id = entry.target.id;\n if (!id) continue;\n\n this.#intersectionStates.set(id, {\n isIntersecting: entry.isIntersecting,\n top: entry.boundingClientRect.top,\n });\n }\n\n this.#evaluateActiveSection();\n };\n\n #evaluateActiveSection(): void {\n // The trigger line is `offset` px below the top of the scroll root. When a\n // nested `rootSelector` container is used it is not at the viewport top, so\n // the line must be measured from the container's current top — comparing the\n // viewport-based `boundingClientRect.top` against a bare `offset` would\n // otherwise pick the section nearest the viewport top, not the container's.\n const rootEl = this.#getRootElement();\n const triggerLine = (rootEl ? rootEl.getBoundingClientRect().top : 0) + this.offsetValue;\n\n let bestId = \"\";\n let closestTop = Number.MAX_VALUE;\n\n // Evaluate among all intersecting elements\n for (const [id, state] of this.#intersectionStates.entries()) {\n if (state.isIntersecting) {\n // Evaluate the one closest to the offset trigger line\n const distance = Math.abs(state.top - triggerLine);\n if (distance < closestTop) {\n closestTop = distance;\n bestId = id;\n }\n }\n }\n\n // Fallback: when no section currently intersects (e.g. scrolled past the\n // bottom, or between sections), pick the tracked section whose top is closest\n // to the trigger line so something stays highlighted.\n if (!bestId && this.#intersectionStates.size > 0) {\n let absoluteClosestId = \"\";\n let absoluteClosestTop = Number.MAX_VALUE;\n\n for (const [id, state] of this.#intersectionStates.entries()) {\n const distance = Math.abs(state.top - triggerLine);\n if (distance < absoluteClosestTop) {\n absoluteClosestTop = distance;\n absoluteClosestId = id;\n }\n }\n bestId = absoluteClosestId;\n }\n\n if (bestId && bestId !== this.#activeSectionId) {\n this.#activeSectionId = bestId;\n this.#syncActiveStates();\n }\n }\n\n #syncActiveStates(): void {\n const activeLink = this.linkTargets.find((l) => this.#getAnchorId(l) === this.#activeSectionId);\n\n for (const link of this.linkTargets) {\n const isActive = link === activeLink;\n if (isActive) {\n link.setAttribute(\"aria-current\", \"location\");\n } else {\n link.removeAttribute(\"aria-current\");\n }\n }\n\n if (activeLink) {\n this.dispatch(\"change\", { detail: { id: this.#activeSectionId, link: activeLink } });\n }\n }\n\n #getAnchorId(link: HTMLElement): string | null {\n const href = link.getAttribute(\"href\") || link.getAttribute(\"data-href\");\n if (!href?.startsWith(\"#\")) return null;\n return href.substring(1);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../src/utils/intersection_watcher.ts","../../src/utils/reduced_motion.ts","../../src/controllers/scrollspy_controller.ts"],"names":[],"mappings":"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","file":"scrollspy_controller.js","sourcesContent":["/**\n * Shared `IntersectionObserver` plumbing for Stimeo's scroll-triggered\n * controllers (`intersection`, `scrollspy`, `sticky-observer`, `lazy-frame`).\n *\n * It centralizes the `IntersectionObserver` support guard, root resolution from\n * a selector, observer creation/teardown, the **active guard** (the browser may\n * flush a final queued callback batch right after `disconnect()`, and a\n * detached controller must not mutate possibly-cached DOM), and the\n * unobserve→observe **re-arm** that re-delivers the current state even when the\n * target never leaves the viewport.\n *\n * Like {@link RovingTabindex} and `FocusTrap`, this is a policy-free internal\n * util: what an intersection *means* (a spied link, a stuck header, a lazy\n * load) stays in each controller. The public `stimeo--intersection` controller\n * is its thin declarative face.\n */\n/**\n * Whether `entry`'s target sits entirely before the root's **start (top)** edge —\n * the \"scrolled past the top\" half of a non-intersecting entry, as opposed to\n * \"not reached yet\" below the root.\n *\n * A target with no layout box (`display: none`, a `hidden` ancestor, a collapsed\n * `<details>`) is reported with an **empty rect**, whose `bottom` of `0` would\n * otherwise satisfy `bottom <= rootTop` for a viewport root and read as \"passed\"\n * even though the target was never scrolled anywhere. An empty rect carries no\n * position at all, so it is deliberately never \"before the edge\"; what a caller\n * publishes for that case is its own policy (both consumers treat it as the\n * neutral \"not passed\"/\"not stuck\", and the real rect that arrives once the\n * target is laid out re-establishes the true state).\n */\nexport function isBeforeRootStart(entry: IntersectionObserverEntry): boolean {\n const rect = entry.boundingClientRect;\n if (rect.width === 0 && rect.height === 0) return false;\n // rootBounds is null for a cross-origin/removed root; fall back to the\n // viewport origin.\n const rootTop = entry.rootBounds?.top ?? 0;\n return rect.bottom <= rootTop;\n}\n\nexport interface IntersectionWatchOptions {\n /**\n * The observation root. Pass an element (or `null` for the viewport) when\n * the caller already resolved it; omit to resolve from `rootSelector`.\n */\n root?: Element | null;\n /** Selector for the observation root; empty/omitted = viewport. */\n rootSelector?: string;\n rootMargin?: string;\n threshold?: number | number[];\n}\n\nexport class IntersectionWatcher {\n readonly #onEntries: (entries: IntersectionObserverEntry[]) => void;\n #observer: IntersectionObserver | null = null;\n #active = false;\n #usingPlatformDefaults = false;\n\n constructor(onEntries: (entries: IntersectionObserverEntry[]) => void) {\n this.#onEntries = onEntries;\n }\n\n /** Whether an observer is live (started, `IntersectionObserver` supported). */\n get active(): boolean {\n return this.#active;\n }\n\n /** Whether the live observer discarded configured options after construction failed. */\n get usingPlatformDefaults(): boolean {\n return this.#usingPlatformDefaults;\n }\n\n /**\n * (Re)creates the observer and observes `targets`. Returns `false` — leaving\n * the watcher inert — without `IntersectionObserver` support (very old\n * browsers; the caller's no-JS fallback stays in charge) or with no targets.\n * If initial construction with the configured options fails, the watcher\n * warns and retries once with the same root and platform defaults.\n *\n * @throws The fallback constructor error if both construction attempts fail,\n * or whatever the platform throws from `observe()`. The exception is passed\n * through unchanged, but the watcher rolls back first: every target observed\n * so far is released and `active` stays `false`, so a caller that retries\n * starts from a clean slate.\n */\n start(targets: Element | readonly Element[], options: IntersectionWatchOptions = {}): boolean {\n this.stop();\n if (typeof IntersectionObserver === \"undefined\") return false;\n const list = Array.isArray(targets) ? (targets as readonly Element[]) : [targets as Element];\n if (list.length === 0) return false;\n\n const root =\n \"root\" in options\n ? (options.root ?? null)\n : options.rootSelector\n ? document.querySelector(options.rootSelector)\n : null;\n\n let observer: IntersectionObserver | null = null;\n try {\n const onEntries = (entries: IntersectionObserverEntry[]): void => {\n // Identity matters across an immediate restart: the old observer can\n // flush a queued batch after the new observer has made `active` true.\n if (this.#active && this.#observer === observer) this.#onEntries(entries);\n };\n try {\n observer = new IntersectionObserver(onEntries, {\n root,\n rootMargin: options.rootMargin,\n threshold: options.threshold,\n });\n } catch (error) {\n console.warn(\n \"Stimeo UI: IntersectionObserver could not be constructed with the configured options; retrying with platform defaults.\",\n error,\n );\n observer = new IntersectionObserver(onEntries, { root });\n this.#usingPlatformDefaults = true;\n }\n for (const target of list) observer.observe(target);\n this.#observer = observer;\n this.#active = true;\n return true;\n } catch (error) {\n // A constructor or partial observe failure must not leave earlier targets\n // observed or report an active watcher. Preserve the platform exception.\n observer?.disconnect();\n this.#observer = null;\n this.#active = false;\n this.#usingPlatformDefaults = false;\n throw error;\n }\n }\n\n /**\n * Re-delivers `target`'s CURRENT intersection state: `IntersectionObserver`\n * only reports *changes*, but `observe()` always reports the present state,\n * so unobserve→observe turns \"still intersecting\" into a fresh callback.\n *\n * @throws Whatever `unobserve()`/`observe()` throws. The watcher is stopped\n * first, so it never stays live with a half-rearmed target.\n */\n rearm(target: Element): void {\n if (!this.#observer) return;\n try {\n this.#observer.unobserve(target);\n this.#observer.observe(target);\n } catch (error) {\n this.stop();\n throw error;\n }\n }\n\n /** Severs the observer; late queued callbacks become no-ops via the guard. */\n stop(): void {\n this.#active = false;\n this.#observer?.disconnect();\n this.#observer = null;\n this.#usingPlatformDefaults = false;\n }\n}\n","/**\n * Shared `prefers-reduced-motion` lookup for the motion-aware controllers\n * (count-up, highlight, overflow-indicator, scroll-visibility, stick-to-bottom,\n * transition).\n *\n * This one-liner keeps the media query string and the environment guard\n * single-sourced across them. The preference is intentionally re-read on every\n * call — the controllers check it at each animation/scroll start (WCAG 2.2\n * **2.3.3**), so flipping the OS setting takes effect immediately without any\n * listener or cache bookkeeping here.\n */\n\n/**\n * Whether the user currently requests reduced motion.\n *\n * @returns `true` when `(prefers-reduced-motion: reduce)` matches; `false`\n * otherwise, including environments without `window.matchMedia` (treated as\n * \"no preference\").\n */\nexport function prefersReducedMotion(): boolean {\n return (\n typeof window.matchMedia === \"function\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches\n );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { IntersectionWatcher } from \"../utils/intersection_watcher\";\nimport { prefersReducedMotion } from \"../utils/reduced_motion\";\n\n/**\n * The attributes a link may anchor its section with, and therefore the only\n * ones whose rewrite has to re-sync the observation set. `aria-current` — the\n * attribute this controller writes itself — is deliberately absent, so\n * publishing the current location cannot feed back into a rebuild.\n */\nconst ANCHOR_ATTRIBUTES = [\"href\", \"data-href\"];\n\n/**\n * Headless, accessible **Scrollspy**: keeps a table of contents in sync with the\n * section the reader is currently in, published as `aria-current=\"location\"`.\n * There is no dedicated APG widget; it follows the `aria-current`\n * current-location practice inside a `<nav>` landmark.\n *\n * Markup contract (identifier: `stimeo--scrollspy`):\n * <nav data-controller=\"stimeo--scrollspy\"\n * data-stimeo--scrollspy-offset-value=\"80\"\n * data-stimeo--scrollspy-root-selector-value=\".content\"\n * aria-label=\"Table of contents\">\n * <a href=\"#intro\" data-stimeo--scrollspy-target=\"link\"\n * data-action=\"click->stimeo--scrollspy#scrollTo\">Intro</a>\n * <a href=\"#usage\" data-stimeo--scrollspy-target=\"link\"\n * data-action=\"click->stimeo--scrollspy#scrollTo\">Usage</a>\n * </nav>\n * <div class=\"content\">\n * <section id=\"intro\">…</section>\n * <section id=\"usage\">…</section>\n * </div>\n *\n * The active section is the one whose top edge sits closest to the **trigger\n * line**: `offset` px below the top of the *scroll root* — the `rootSelector`\n * container, or the viewport when that value is empty. It is not the viewport\n * top whenever a nested container is spied on. Intersecting sections win; when\n * none intersects (between two sections, scrolled past the last one) the\n * closest tracked section keeps the highlight, so a table of contents never\n * goes blank.\n *\n * `data-action` on the links is optional and opts into {@link scrollTo}, which\n * scrolls the nested container instead of bouncing the whole window.\n *\n * @remarks\n * Behavior only — how a current link looks is the consumer's CSS\n * (`[aria-current=\"location\"] { … }`). `connect()` reads the current location\n * back from the DOM so a Turbo cache restore re-establishes it without a\n * redundant `change`, and `disconnect()` severs every resource acquired here:\n * the observers, the scroll listener, and any pending frame or queued rebuild.\n *\n * **What is followed automatically**, and what is not (the boundary a consumer\n * has to know, because everything outside it needs a re-`connect()`):\n *\n * - `link` targets added or removed — Stimulus's target callbacks.\n * - a `link` target's `href` / `data-href` rewritten in place — a Turbo 8 morph\n * keeps the element *and* its target marker, so no target callback fires;\n * {@link ANCHOR_ATTRIBUTES} is watched for exactly this case.\n * - the reader's scroll position, including inside a stretch where no section\n * crosses an observation threshold.\n *\n * Not followed: a *split* lifecycle in which the nav survives while the scroll\n * root or the sections are replaced underneath it. `rootSelector` is resolved\n * against the whole document and re-resolved once the cached container leaves\n * it, but section elements are looked up only while the observation set is\n * (re)built — swap those alone and nothing tells this controller to look again.\n */\nexport class ScrollspyController extends Controller<HTMLElement> {\n static override targets = [\"link\"];\n static override values = {\n offset: { type: Number, default: 0 },\n rootMargin: { type: String, default: \"\" },\n rootSelector: { type: String, default: \"\" },\n focusSection: { type: Boolean, default: false },\n };\n static actions = [\"scrollTo\"] as const;\n static events = [\"change\"] as const;\n\n declare readonly linkTargets: HTMLElement[];\n\n declare offsetValue: number;\n declare rootMarginValue: string;\n declare rootSelectorValue: string;\n declare focusSectionValue: boolean;\n\n /**\n * The one offset shared by observation, active-section selection, and\n * scrolling. Stimulus parses a malformed Number Value as `NaN`; degrading it\n * to the declared default keeps every path aligned instead of only repairing\n * the observer margin while selection and scrolling still receive `NaN`.\n */\n get #offset(): number {\n return Number.isFinite(this.offsetValue) ? this.offsetValue : 0;\n }\n\n /** Shared IO plumbing (support guard, active guard, teardown). */\n readonly #watcher = new IntersectionWatcher((entries) => this.#onIntersection(entries));\n #isConnected = false;\n\n /**\n * Sections currently tracked, by id. Only the *latest reported* intersection\n * flag is stored — never a coordinate. Positions are re-measured when the\n * active section is evaluated, so a section observed several batches ago is\n * never compared against a trigger line computed now.\n */\n #intersectionStates = new Map<string, { element: Element; isIntersecting: boolean }>();\n\n /** Current active section ID; comparing it suppresses duplicate `change` events. */\n #activeSectionId = \"\";\n\n /**\n * Scroll root resolved when the observer was (re)built; `null` = viewport.\n * Cached so a click and every intersection batch reuse the element the\n * observer is actually watching instead of re-querying the document.\n */\n #rootElement: HTMLElement | null = null;\n\n /**\n * The source the `scroll` listener is currently attached to — the resolved\n * root, or the window while the viewport is spied. `null` means \"nothing\n * attached\", so teardown always detaches from the source it attached to\n * rather than from whatever the selector resolves to now.\n */\n #scrollSource: HTMLElement | Window | null = null;\n\n /** Pending re-evaluation frame; coalesces a scroll burst into one measurement. */\n #frame: number | null = null;\n\n /** Watches the link targets' anchor attributes for an in-place morph rewrite. */\n #anchorObserver: MutationObserver | null = null;\n\n /** True while a coalesced observation rebuild is queued; see {@link #scheduleResync}. */\n #resyncQueued = false;\n\n override connect(): void {\n this.#isConnected = true;\n this.#observeAnchorAttributes();\n this.#initializeObserver();\n }\n\n override disconnect(): void {\n this.#isConnected = false;\n // Dropping the flag is what discards a rebuild queued moments ago: the\n // drain reads it, so the queued microtask becomes a no-op.\n this.#resyncQueued = false;\n this.#watcher.stop();\n this.#anchorObserver?.disconnect();\n this.#anchorObserver = null;\n this.#detachScrollListener();\n if (this.#frame !== null) {\n cancelAnimationFrame(this.#frame);\n this.#frame = null;\n }\n this.#intersectionStates.clear();\n this.#activeSectionId = \"\";\n this.#rootElement = null;\n }\n\n /**\n * Re-initializes the observer if the offset or rootMargin values change dynamically.\n */\n offsetValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n rootMarginValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n rootSelectorValueChanged(): void {\n if (!this.#isConnected) return;\n this.#initializeObserver();\n }\n\n /**\n * Re-syncs the observation set when a Turbo Stream/morph swaps the table of\n * contents. Stimulus fires these before `connect()` for the links already in\n * the markup, hence the guard: the initial observer is built exactly once, by\n * `connect()`.\n */\n linkTargetConnected(): void {\n if (this.#isConnected) this.#scheduleResync();\n }\n\n linkTargetDisconnected(): void {\n if (this.#isConnected) this.#scheduleResync();\n }\n\n /**\n * Queues **one** observation rebuild for the current mutation batch.\n *\n * A single Turbo morph can append one link, drop another, and rewrite a\n * third's `href`, and those arrive through two independent channels —\n * Stimulus's target callbacks and {@link #anchorObserver}. Each channel just\n * raises the flag and queues a drain; the first drain to run does the work and\n * clears it, so every later drain in the same batch finds nothing to do and\n * the set is rebuilt once instead of three times. `disconnect()` clears the\n * same flag, which is how a queued rebuild is dropped rather than run against\n * a detached controller.\n */\n #scheduleResync(): void {\n this.#resyncQueued = true;\n queueMicrotask(this.#drainResync);\n }\n\n readonly #drainResync = (): void => {\n if (!this.#resyncQueued) return;\n this.#resyncQueued = false;\n this.#initializeObserver();\n };\n\n /**\n * Watches the link targets' anchor attributes so an in-place rewrite re-syncs.\n *\n * A Turbo 8 morph keeps the element **and** its `data-*-target` marker and\n * only rewrites attributes, so Stimulus fires no target callback: without\n * this, a link re-pointed from `#intro` to `#faq` would keep the controller\n * observing `#intro` for the rest of the page's life. The filter is exactly\n * {@link ANCHOR_ATTRIBUTES}; guarding on `MutationObserver` keeps the\n * controller usable where the API is absent, matching `IntersectionWatcher`'s\n * own support guard.\n */\n #observeAnchorAttributes(): void {\n if (typeof MutationObserver !== \"undefined\") {\n this.#anchorObserver = new MutationObserver(this.#onAnchorMutation);\n this.#anchorObserver.observe(this.element, {\n subtree: true,\n attributes: true,\n attributeFilter: ANCHOR_ATTRIBUTES,\n });\n }\n }\n\n /**\n * Rebuilds only for a rewrite on a *current* link target. The observer is\n * scoped to this controller's element, but that subtree also holds links the\n * author never marked as targets (a \"back to top\" anchor, a nested nav), and\n * those anchor nothing here.\n */\n readonly #onAnchorMutation = (records: MutationRecord[]): void => {\n const links = this.linkTargets;\n for (const record of records) {\n if (!links.includes(record.target as HTMLElement)) continue;\n this.#scheduleResync();\n return;\n }\n };\n\n /**\n * Scrolls to the section the clicked link anchors, honoring `offset` and any\n * nested scroll container (a plain fragment jump would scroll the window).\n *\n * Honors `prefers-reduced-motion` (WCAG 2.2 **2.3.3**) by forcing an instant\n * jump independently of the consumer's CSS `scroll-behavior`. With\n * `focusSection` enabled it also moves the sequential focus starting point\n * into the destination; the URL fragment is deliberately not touched.\n */\n scrollTo(event: Event): void {\n const link = event.currentTarget as HTMLElement;\n const id = this.#getAnchorId(link);\n if (!id) return;\n\n event.preventDefault();\n\n const targetElement = document.getElementById(id);\n if (!targetElement) return;\n\n const behavior: ScrollBehavior = prefersReducedMotion() ? \"instant\" : \"smooth\";\n const rootElement = this.#scrollRoot();\n const targetRect = targetElement.getBoundingClientRect();\n const offset = this.#offset;\n\n if (rootElement) {\n const containerRect = rootElement.getBoundingClientRect();\n const scrollPosition = rootElement.scrollTop + (targetRect.top - containerRect.top) - offset;\n\n rootElement.scrollTo({ top: scrollPosition, behavior });\n } else {\n const scrollPosition = window.scrollY + targetRect.top - offset;\n\n window.scrollTo({ top: scrollPosition, behavior });\n }\n\n if (this.focusSectionValue) this.#focusSection(targetElement);\n }\n\n /**\n * Moves the sequential focus starting point into the section `scrollTo` just\n * jumped to, so the next Tab continues *inside* the destination instead of\n * resuming in the table of contents (`preventDefault()` alone would leave the\n * starting point on the link). Opt-in through `focusSection`, because moving\n * focus is a decision only the consuming page can make.\n *\n * `tabindex=\"-1\"` is established only when the section is not already\n * focusable and is never removed, so an author-owned tabindex is left alone.\n * `preventScroll` keeps the focus call from cancelling the smooth scroll\n * started just above.\n */\n #focusSection(section: HTMLElement): void {\n if (!section.hasAttribute(\"tabindex\")) section.setAttribute(\"tabindex\", \"-1\");\n section.focus({ preventScroll: true });\n }\n\n /**\n * The cached scroll root, re-resolved when the cached element has left the\n * document (a Turbo morph replaced the container) so `scrollTo` never\n * scrolls a detached node.\n */\n #scrollRoot(): HTMLElement | null {\n if (this.#rootElement && !this.#rootElement.isConnected) {\n this.#rootElement = this.#queryRootElement();\n }\n return this.#rootElement;\n }\n\n /**\n * Resolves `rootSelector` to a scrollable element.\n *\n * @returns The container, or `null` meaning \"spy the viewport\" when the value\n * is empty, matches nothing, matches a non-HTML element (an SVG node is not a\n * scroll container), or is not a valid selector — a typo in a data attribute\n * must degrade to viewport spying, not leave the controller inert.\n */\n #queryRootElement(): HTMLElement | null {\n if (!this.rootSelectorValue) return null;\n try {\n const root = document.querySelector(this.rootSelectorValue);\n return root instanceof HTMLElement ? root : null;\n } catch {\n return null;\n }\n }\n\n /**\n * Re-evaluates once per frame while the reader scrolls.\n *\n * `IntersectionObserver` reports **threshold crossings**, not positions, so a\n * reader moving inside one long section — or across a gap wider than the\n * observation band — produces no batch at all and the highlight would stay\n * frozen at whatever the last crossing decided. That would make the current\n * location depend on the *route* to a position instead of the position: a\n * stepwise scroll crosses thresholds an instant jump to the same offset never\n * does. Listening to the scroll source closes the gap, and because both paths\n * end in {@link #evaluateActiveSection} — which measures section rects and the\n * root's top edge at that instant — they converge on the same answer.\n */\n readonly #onScroll = (): void => {\n if (this.#frame !== null) return;\n this.#frame = requestAnimationFrame(() => {\n this.#frame = null;\n this.#evaluateActiveSection();\n });\n };\n\n /**\n * Points the `scroll` listener at whatever the reader actually scrolls: the\n * resolved root, or the window when the viewport is spied.\n *\n * The detach is unconditional, so rebuilding the observation set (a Value\n * change, a morph) **moves** the listener rather than stacking a second one on\n * a container the reader has stopped scrolling.\n */\n #syncScrollListener(): void {\n this.#detachScrollListener();\n this.#scrollSource = this.#rootElement ?? window;\n this.#scrollSource.addEventListener(\"scroll\", this.#onScroll, { passive: true });\n }\n\n #detachScrollListener(): void {\n this.#scrollSource?.removeEventListener(\"scroll\", this.#onScroll);\n this.#scrollSource = null;\n }\n\n #initializeObserver(): void {\n this.#watcher.stop();\n this.#intersectionStates.clear();\n // The DOM is the source of truth for the current location **only when this\n // controller has none of its own** — a fresh `connect()`, which is also the\n // Turbo cache-restore case, where the links still carry `aria-current` from\n // the snapshot. Adopting it there makes the observer's first batch a silent\n // confirmation instead of a duplicate `change`.\n //\n // On a *live* rebuild the memory wins, because the DOM has stopped meaning\n // what this controller wrote: an anchor rewritten underneath us leaves\n // `aria-current` on a link that now points somewhere else, so reading it\n // back would hand the current location to a section the reader never\n // scrolled to — and then announce the correction as a `change`, as if they\n // had travelled there and back.\n this.#activeSectionId = this.#activeSectionId || this.#activeIdFromDom();\n this.#rootElement = this.#queryRootElement();\n this.#syncScrollListener();\n\n if (this.linkTargets.length === 0) return;\n\n // Negate the numeric value so a valid negative offset becomes a positive margin.\n const margin = this.rootMarginValue || `${-this.#offset}px 0px -80% 0px`;\n\n // Observe each target section mapped by the href anchors.\n const sections: Element[] = [];\n for (const link of this.linkTargets) {\n const id = this.#getAnchorId(link);\n if (!id) continue;\n const section = document.getElementById(id);\n if (section && !sections.includes(section)) sections.push(section);\n }\n\n this.#watcher.start(sections, {\n root: this.#rootElement,\n rootMargin: margin,\n threshold: [0, 0.2, 0.4, 0.6, 0.8, 1], // Multiple thresholds handle large sections safely\n });\n\n // Republish the adopted location over the *current* link set. Evaluation\n // writes attributes only when the winning section changes, so a link added\n // — or re-anchored — while the reader stays put would otherwise never be\n // marked: a mobile table of contents rendered after the sidebar one would\n // stay blank until the reader happened to cross into another section.\n //\n // Unconditional, including when the adopted location is empty: a link whose\n // anchor was rewritten to something that resolves nowhere cannot be the\n // reader's location, and this controller is the one that published the\n // attribute saying it was, so it is the one that has to take it back.\n this.#syncActiveStates(false);\n }\n\n readonly #onIntersection = (entries: IntersectionObserverEntry[]): void => {\n // Defense in depth. `IntersectionWatcher` already drops a batch the browser\n // flushes after `stop()` (its active/identity guard), so this flag is the\n // second line that keeps a detached controller from mutating `aria-current`\n // on (possibly cached) links.\n const isDetached = !this.#isConnected;\n if (isDetached) return;\n\n for (const entry of entries) {\n const sectionId = entry.target.id;\n if (!sectionId) continue;\n\n this.#intersectionStates.set(sectionId, {\n element: entry.target,\n isIntersecting: entry.isIntersecting,\n });\n }\n\n this.#evaluateActiveSection();\n };\n\n /**\n * Picks the section closest to the trigger line and publishes it.\n *\n * Every coordinate is read **now**: the section rects *and* the root's top\n * edge share one measurement instant. Comparing an entry's recorded\n * `boundingClientRect.top` (captured whenever that section last crossed a\n * threshold) against a freshly computed trigger line mixes two moments in\n * time, which would make the result depend on how the reader arrived at a\n * position — a smooth scroll and an instant jump to the same offset disagree.\n */\n #evaluateActiveSection(): void {\n // The trigger line is `offset` px below the top of the scroll root. When a\n // nested `rootSelector` container is used it is not at the viewport top, so\n // the line must be measured from the container's current top — comparing the\n // viewport-based rect top against a bare `offset` would otherwise pick the\n // section nearest the viewport top, not the container's.\n const rootEl = this.#scrollRoot();\n const triggerLine = (rootEl ? rootEl.getBoundingClientRect().top : 0) + this.#offset;\n\n let intersectingId = \"\";\n let intersectingDistance = Number.POSITIVE_INFINITY;\n let trackedId = \"\";\n let trackedDistance = Number.POSITIVE_INFINITY;\n\n for (const [id, state] of this.#intersectionStates) {\n const rect = state.element.getBoundingClientRect();\n // A section with no layout box (`display: none`, a collapsed `<details>`,\n // an undisplayed Turbo Frame) is reported with an empty rect whose `top`\n // of 0 carries no position at all. Letting it compete would hand it the\n // fallback below; it re-enters the race once it is actually laid out.\n if (rect.width === 0 && rect.height === 0) continue;\n\n const distance = Math.abs(rect.top - triggerLine);\n if (distance < trackedDistance) {\n trackedDistance = distance;\n trackedId = id;\n }\n if (state.isIntersecting && distance < intersectingDistance) {\n intersectingDistance = distance;\n intersectingId = id;\n }\n }\n\n // Fallback: when no section currently intersects (e.g. scrolled past the\n // bottom, or between sections), keep the tracked section whose top is\n // closest to the trigger line so something stays highlighted.\n const bestId = intersectingId || trackedId;\n\n if (bestId && bestId !== this.#activeSectionId) {\n this.#activeSectionId = bestId;\n this.#syncActiveStates(true);\n }\n }\n\n /**\n * Writes `aria-current` across the current link set, optionally announcing.\n *\n * The two halves are separate because they answer different questions.\n * *Attributes* must be idempotently re-established whenever the link set\n * changes, even though the reader has not moved — otherwise a link that\n * appears (or is re-anchored) while its section is already current never gets\n * marked. *The `change` event* announces that the reader moved, so it fires\n * only from the evaluation path; re-publishing over a new link set is not\n * news, and dispatching there would make a rebuild look like navigation.\n *\n * @param announce Whether this sync represents a change of current section.\n */\n #syncActiveStates(announce: boolean): void {\n // Every link anchoring the active section is marked, not just the first:\n // a page may render the same table of contents twice (a sidebar and a\n // collapsed mobile menu) and both must show the current location.\n const activeLinks = this.linkTargets.filter(\n (link) => this.#getAnchorId(link) === this.#activeSectionId,\n );\n\n for (const link of this.linkTargets) {\n if (activeLinks.includes(link)) {\n link.setAttribute(\"aria-current\", \"location\");\n } else if (link.getAttribute(\"aria-current\") === \"location\") {\n // Reclaim only the value this controller publishes, so an author-owned\n // `aria-current=\"page\"` on a table-of-contents link survives.\n link.removeAttribute(\"aria-current\");\n }\n }\n\n if (!announce) return;\n\n const primaryLink = activeLinks[0];\n if (primaryLink) {\n this.dispatch(\"change\", { detail: { id: this.#activeSectionId, link: primaryLink } });\n }\n }\n\n /**\n * The current location already encoded in the DOM, i.e. the section anchored\n * by the first link carrying this controller's `aria-current=\"location\"`.\n * Empty when no link claims it (a genuinely fresh render).\n */\n #activeIdFromDom(): string {\n for (const link of this.linkTargets) {\n if (link.getAttribute(\"aria-current\") !== \"location\") continue;\n const id = this.#getAnchorId(link);\n if (id) return id;\n }\n return \"\";\n }\n\n /**\n * The section id a link anchors, resolved in a fixed order:\n *\n * 1. `href`, when it is a non-empty same-document fragment — the contract.\n * 2. otherwise `data-href`'s fragment — the fallback for a link whose `href`\n * must stay a real URL (a server-rendered permalink) or that is not an\n * `<a>` at all.\n * 3. otherwise `null`: the link anchors nothing here and is not observed.\n *\n * Step 2 is reached whenever `href` yields nothing usable — absent, `\"#\"`, or\n * a real URL — which is the whole point of the fallback: `href=\"/guide/usage\"`\n * with `data-href=\"#usage\"` is a permalink that also spies, and picking the\n * first *present* attribute instead of the first *usable* one would silently\n * exclude exactly that markup. When both are valid fragments `href` wins.\n */\n #getAnchorId(link: HTMLElement): string | null {\n return (\n this.#fragmentId(link.getAttribute(\"href\")) ??\n this.#fragmentId(link.getAttribute(\"data-href\"))\n );\n }\n\n /** The id in a `#fragment` value; `null` for absent, empty, or non-fragment. */\n #fragmentId(value: string | null): string | null {\n if (!value?.startsWith(\"#\")) return null;\n return value.substring(1) || null;\n }\n}\n"]}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Headless **Separator** behavior. The normative source depends on the case:
|
|
5
|
+
* a decorative divider follows the WAI-ARIA `separator` role
|
|
6
|
+
* (https://www.w3.org/TR/wai-aria-1.2/#separator), while the focusable,
|
|
7
|
+
* value-bearing divider follows the APG Window Splitter pattern
|
|
8
|
+
* (https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).
|
|
9
|
+
*
|
|
10
|
+
* Markup contract (identifier: `stimeo--separator`):
|
|
11
|
+
* <!-- decorative -->
|
|
12
|
+
* <div data-controller="stimeo--separator" role="separator"
|
|
13
|
+
* data-stimeo--separator-orientation-value="horizontal"></div>
|
|
14
|
+
*
|
|
15
|
+
* <!-- focusable, value-bearing -->
|
|
16
|
+
* <div data-controller="stimeo--separator" role="separator" tabindex="0"
|
|
17
|
+
* aria-labelledby="sidebar-heading" aria-controls="sidebar"
|
|
18
|
+
* aria-orientation="vertical"
|
|
19
|
+
* aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"
|
|
20
|
+
* data-stimeo--separator-focusable-value="true"
|
|
21
|
+
* data-action="keydown->stimeo--separator#onKeydown"></div>
|
|
22
|
+
*
|
|
23
|
+
* Most separators are static (`role="separator"` + `aria-orientation`); this
|
|
24
|
+
* controller adds those semantics and, for the optional **focusable** variant,
|
|
25
|
+
* keeps `aria-valuenow` in sync and emits arrow-key value changes. The actual
|
|
26
|
+
* pane resize/drag is out of scope — that belongs to {@link ResizableController}.
|
|
27
|
+
*
|
|
28
|
+
* @remarks
|
|
29
|
+
* Behavior only — line drawing is the consumer's CSS. The axis follows Window
|
|
30
|
+
* Splitter: a vertical divider takes ArrowLeft/ArrowRight, a horizontal one
|
|
31
|
+
* takes ArrowUp/ArrowDown. Which end counts as an increase is not defined
|
|
32
|
+
* there, so it follows the slider convention (ArrowRight/ArrowUp increase).
|
|
33
|
+
* Home/End are optional in the pattern and are implemented here; F6 is not.
|
|
34
|
+
*
|
|
35
|
+
* Because no position is ever applied here, two Window Splitter requirements
|
|
36
|
+
* fall to the consumer: `aria-controls` naming the **primary** pane — the one
|
|
37
|
+
* whose size the value reports — and `Enter` to toggle collapse/restore, since
|
|
38
|
+
* collapsing applies a position — {@link ResizableController} implements that
|
|
39
|
+
* key for the same divider. Because the increment direction is fixed, the primary pane can only
|
|
40
|
+
* be the left one for a vertical splitter and the bottom one for a horizontal
|
|
41
|
+
* splitter: those are the panes that grow as ArrowRight/ArrowUp raise the value.
|
|
42
|
+
*/
|
|
43
|
+
declare class SeparatorController extends Controller<HTMLElement> {
|
|
44
|
+
#private;
|
|
45
|
+
static values: {
|
|
46
|
+
orientation: {
|
|
47
|
+
type: StringConstructor;
|
|
48
|
+
default: string;
|
|
49
|
+
};
|
|
50
|
+
focusable: {
|
|
51
|
+
type: BooleanConstructor;
|
|
52
|
+
default: boolean;
|
|
53
|
+
};
|
|
54
|
+
step: {
|
|
55
|
+
type: NumberConstructor;
|
|
56
|
+
default: number;
|
|
57
|
+
};
|
|
58
|
+
};
|
|
59
|
+
static actions: readonly ["onKeydown"];
|
|
60
|
+
static events: readonly ["change"];
|
|
61
|
+
orientationValue: string;
|
|
62
|
+
focusableValue: boolean;
|
|
63
|
+
stepValue: number;
|
|
64
|
+
connect(): void;
|
|
65
|
+
/** Adjusts the value on arrow / Home / End keys (focusable variant only). */
|
|
66
|
+
onKeydown(event: KeyboardEvent): void;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export { SeparatorController };
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
|
2
|
+
|
|
3
|
+
// src/controllers/separator_controller.ts
|
|
4
|
+
|
|
5
|
+
// src/utils/arrow_step.ts
|
|
6
|
+
function isReservedArrowChord(event, allow = []) {
|
|
7
|
+
if (!event.key.startsWith("Arrow")) return false;
|
|
8
|
+
return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// src/controllers/separator_controller.ts
|
|
12
|
+
var SeparatorController = class extends Controller {
|
|
13
|
+
static values = {
|
|
14
|
+
orientation: { type: String, default: "horizontal" },
|
|
15
|
+
focusable: { type: Boolean, default: false },
|
|
16
|
+
step: { type: Number, default: 1 }
|
|
17
|
+
};
|
|
18
|
+
static actions = ["onKeydown"];
|
|
19
|
+
static events = ["change"];
|
|
20
|
+
connect() {
|
|
21
|
+
if (!this.element.hasAttribute("role")) {
|
|
22
|
+
this.element.setAttribute("role", "separator");
|
|
23
|
+
}
|
|
24
|
+
if (!this.element.hasAttribute("aria-orientation")) {
|
|
25
|
+
this.element.setAttribute("aria-orientation", this.orientationValue);
|
|
26
|
+
}
|
|
27
|
+
if (this.focusableValue) {
|
|
28
|
+
if (!this.element.hasAttribute("tabindex")) {
|
|
29
|
+
this.element.setAttribute("tabindex", "0");
|
|
30
|
+
}
|
|
31
|
+
this.#setDefault("aria-valuemin", "0");
|
|
32
|
+
this.#setDefault("aria-valuemax", "100");
|
|
33
|
+
this.#setDefault("aria-valuenow", String(this.#clamp(this.#value)));
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
/** Adjusts the value on arrow / Home / End keys (focusable variant only). */
|
|
37
|
+
onKeydown(event) {
|
|
38
|
+
if (isReservedArrowChord(event)) return;
|
|
39
|
+
if (!this.focusableValue) return;
|
|
40
|
+
const horizontal = this.element.getAttribute("aria-orientation") !== "vertical";
|
|
41
|
+
let next = null;
|
|
42
|
+
switch (event.key) {
|
|
43
|
+
case "ArrowUp":
|
|
44
|
+
if (horizontal) next = this.#value + this.stepValue;
|
|
45
|
+
break;
|
|
46
|
+
case "ArrowDown":
|
|
47
|
+
if (horizontal) next = this.#value - this.stepValue;
|
|
48
|
+
break;
|
|
49
|
+
case "ArrowRight":
|
|
50
|
+
if (!horizontal) next = this.#value + this.stepValue;
|
|
51
|
+
break;
|
|
52
|
+
case "ArrowLeft":
|
|
53
|
+
if (!horizontal) next = this.#value - this.stepValue;
|
|
54
|
+
break;
|
|
55
|
+
case "Home":
|
|
56
|
+
next = this.#min;
|
|
57
|
+
break;
|
|
58
|
+
case "End":
|
|
59
|
+
next = this.#max;
|
|
60
|
+
break;
|
|
61
|
+
default:
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (next === null) return;
|
|
65
|
+
event.preventDefault();
|
|
66
|
+
const clamped = this.#clamp(next);
|
|
67
|
+
if (clamped === this.#value) return;
|
|
68
|
+
this.element.setAttribute("aria-valuenow", String(clamped));
|
|
69
|
+
this.dispatch("change", { detail: { value: clamped } });
|
|
70
|
+
}
|
|
71
|
+
get #value() {
|
|
72
|
+
return this.#numericAttr("aria-valuenow", 0);
|
|
73
|
+
}
|
|
74
|
+
get #min() {
|
|
75
|
+
return this.#numericAttr("aria-valuemin", 0);
|
|
76
|
+
}
|
|
77
|
+
get #max() {
|
|
78
|
+
return this.#numericAttr("aria-valuemax", 100);
|
|
79
|
+
}
|
|
80
|
+
#clamp(value) {
|
|
81
|
+
return Math.min(this.#max, Math.max(this.#min, value));
|
|
82
|
+
}
|
|
83
|
+
#numericAttr(name, fallback) {
|
|
84
|
+
const parsed = Number.parseFloat(this.element.getAttribute(name) ?? "");
|
|
85
|
+
return Number.isNaN(parsed) ? fallback : parsed;
|
|
86
|
+
}
|
|
87
|
+
#setDefault(name, value) {
|
|
88
|
+
if (!this.element.hasAttribute(name)) {
|
|
89
|
+
this.element.setAttribute(name, value);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export { SeparatorController };
|
|
95
|
+
//# sourceMappingURL=separator_controller.js.map
|
|
96
|
+
//# sourceMappingURL=separator_controller.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/utils/arrow_step.ts","../../src/controllers/separator_controller.ts"],"names":[],"mappings":"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","file":"separator_controller.js","sourcesContent":["import { isRtl } from \"./logical_scroll\";\n\n/**\n * Turns an arrow key into a **logical** step: `+1` for \"next\", `-1` for\n * \"previous\", `0` when the key names neither.\n *\n * APG defines the horizontal pair as *next / previous* and says a vertical\n * arrangement swaps in Down/Up for the same meaning — so the pair is one axis's\n * spelling of an order, and the order reverses with the writing direction. Only\n * the horizontal pair reverses. Down/Up name an axis the writing direction does\n * not mirror, and returning them unchanged is the point: many controllers fold\n * both pairs into one branch, where swapping the branches under RTL would flip\n * the vertical axis too — a bug that reads as \"the arrows work\" until someone\n * presses Down.\n *\n * **Direction is read from the element the caller passes, which should be the\n * container that lays the items out** — not the focused child. A child may carry\n * its own `dir` (an LTR input inside an RTL form is ordinary authoring), and\n * probing per handler makes two handlers disagree at the boundary between them.\n *\n * This decides direction only. Whether the axis is even active (an\n * `orientation=\"horizontal\"` widget ignoring Down/Up), how far the step lands,\n * and what wrapping does all stay with the caller.\n *\n * **It encodes the list-order convention: `ArrowDown` is *next*.** Widgets that\n * pair the arrows by *value* instead — `ArrowUp` meaning \"more\", as a rating or a\n * slider does — must not use this, or their vertical axis inverts. Reverse the\n * horizontal pair on its own there.\n *\n * @example\n * ```ts\n * const step = logicalArrowStep(event.key, this.element);\n * if (step === 0) return;\n * this.#roving.setActive(rovingMove(current, length, step, \"wrap\"), { focus: true });\n * ```\n */\nexport function logicalArrowStep(key: string, element: Element): 1 | -1 | 0 {\n if (key === \"ArrowDown\") return 1;\n if (key === \"ArrowUp\") return -1;\n if (key !== \"ArrowRight\" && key !== \"ArrowLeft\") return 0;\n const forward = isRtl(element) ? \"ArrowLeft\" : \"ArrowRight\";\n return key === forward ? 1 : -1;\n}\n\n/**\n * Rewrites `key` so an existing LTR-shaped branch keeps working under RTL:\n * `ArrowRight` and `ArrowLeft` trade places, everything else passes through.\n *\n * The alternative — negating a delta — silently breaks handlers whose two\n * horizontal branches are **not mirror images**. A grid that clamps one edge but\n * not the other, or a segmented field guarding `index > 0` on one side and\n * `index < length - 1` on the other, ends up applying the wrong guard to the\n * wrong direction. Swapping the key leaves each branch, guards and all, exactly\n * where its author put it.\n *\n * Same rule as {@link logicalArrowStep} about which element to read: pass the\n * container that lays the items out, not the focused child.\n *\n * @example\n * ```ts\n * switch (logicalArrowKey(event.key, this.element)) {\n * case \"ArrowLeft\": // \"previous\" — whatever direction that is on screen\n * ```\n */\nexport function logicalArrowKey(key: string, element: Element): string {\n if (key !== \"ArrowRight\" && key !== \"ArrowLeft\") return key;\n if (!isRtl(element)) return key;\n return key === \"ArrowRight\" ? \"ArrowLeft\" : \"ArrowRight\";\n}\n\n/** Modifiers a widget may claim on an arrow key, named for the `allow` list. */\nexport type ArrowModifier = \"alt\" | \"ctrl\" | \"meta\" | \"shift\";\n\n/**\n * True when an arrow key arrived carrying a modifier the widget must leave to\n * the browser: return without calling `preventDefault()` and without moving any\n * state.\n *\n * A bare arrow belongs to the widget; a chorded one usually does not.\n * `Alt`/`Meta` plus a horizontal arrow is history back/forward on every desktop\n * browser, and a widget that swallows it makes the shortcut work or not\n * depending on where focus happens to sit — a coin-flip the user cannot see.\n *\n * `allow` is for the combinations APG assigns to a pattern **and the widget\n * actually implements** — today only Combobox's optional `Alt+Down`/`Alt+Up`.\n * Listing one the widget does not implement defeats the point: the chord then\n * runs the plain-arrow branch, which is exactly what this guard exists to stop.\n * Non-arrow keys return `false`, so chorded letters and\n * `Control+Home`/`Control+End` are untouched.\n *\n * @example\n * ```ts\n * if (isReservedArrowChord(event)) return;\n * ```\n */\nexport function isReservedArrowChord(\n event: KeyboardEvent,\n allow: readonly ArrowModifier[] = [],\n): boolean {\n if (!event.key.startsWith(\"Arrow\")) return false;\n return (\n (event.altKey && !allow.includes(\"alt\")) ||\n (event.ctrlKey && !allow.includes(\"ctrl\")) ||\n (event.metaKey && !allow.includes(\"meta\")) ||\n (event.shiftKey && !allow.includes(\"shift\"))\n );\n}\n","import { Controller } from \"@hotwired/stimulus\";\nimport { isReservedArrowChord } from \"../utils/arrow_step\";\n\n/**\n * Headless **Separator** behavior. The normative source depends on the case:\n * a decorative divider follows the WAI-ARIA `separator` role\n * (https://www.w3.org/TR/wai-aria-1.2/#separator), while the focusable,\n * value-bearing divider follows the APG Window Splitter pattern\n * (https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/).\n *\n * Markup contract (identifier: `stimeo--separator`):\n * <!-- decorative -->\n * <div data-controller=\"stimeo--separator\" role=\"separator\"\n * data-stimeo--separator-orientation-value=\"horizontal\"></div>\n *\n * <!-- focusable, value-bearing -->\n * <div data-controller=\"stimeo--separator\" role=\"separator\" tabindex=\"0\"\n * aria-labelledby=\"sidebar-heading\" aria-controls=\"sidebar\"\n * aria-orientation=\"vertical\"\n * aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\"\n * data-stimeo--separator-focusable-value=\"true\"\n * data-action=\"keydown->stimeo--separator#onKeydown\"></div>\n *\n * Most separators are static (`role=\"separator\"` + `aria-orientation`); this\n * controller adds those semantics and, for the optional **focusable** variant,\n * keeps `aria-valuenow` in sync and emits arrow-key value changes. The actual\n * pane resize/drag is out of scope — that belongs to {@link ResizableController}.\n *\n * @remarks\n * Behavior only — line drawing is the consumer's CSS. The axis follows Window\n * Splitter: a vertical divider takes ArrowLeft/ArrowRight, a horizontal one\n * takes ArrowUp/ArrowDown. Which end counts as an increase is not defined\n * there, so it follows the slider convention (ArrowRight/ArrowUp increase).\n * Home/End are optional in the pattern and are implemented here; F6 is not.\n *\n * Because no position is ever applied here, two Window Splitter requirements\n * fall to the consumer: `aria-controls` naming the **primary** pane — the one\n * whose size the value reports — and `Enter` to toggle collapse/restore, since\n * collapsing applies a position — {@link ResizableController} implements that\n * key for the same divider. Because the increment direction is fixed, the primary pane can only\n * be the left one for a vertical splitter and the bottom one for a horizontal\n * splitter: those are the panes that grow as ArrowRight/ArrowUp raise the value.\n */\nexport class SeparatorController extends Controller<HTMLElement> {\n static override values = {\n orientation: { type: String, default: \"horizontal\" },\n focusable: { type: Boolean, default: false },\n step: { type: Number, default: 1 },\n };\n static actions = [\"onKeydown\"] as const;\n static events = [\"change\"] as const;\n\n declare orientationValue: string;\n declare focusableValue: boolean;\n declare stepValue: number;\n\n override connect(): void {\n if (!this.element.hasAttribute(\"role\")) {\n this.element.setAttribute(\"role\", \"separator\");\n }\n if (!this.element.hasAttribute(\"aria-orientation\")) {\n this.element.setAttribute(\"aria-orientation\", this.orientationValue);\n }\n\n if (this.focusableValue) {\n if (!this.element.hasAttribute(\"tabindex\")) {\n this.element.setAttribute(\"tabindex\", \"0\");\n }\n // A value-bearing separator needs a bounded range; default it if the\n // consumer left any bound off so arrow keys have something to clamp to.\n this.#setDefault(\"aria-valuemin\", \"0\");\n this.#setDefault(\"aria-valuemax\", \"100\");\n this.#setDefault(\"aria-valuenow\", String(this.#clamp(this.#value)));\n }\n }\n\n /** Adjusts the value on arrow / Home / End keys (focusable variant only). */\n onKeydown(event: KeyboardEvent): void {\n if (isReservedArrowChord(event)) return;\n if (!this.focusableValue) return;\n\n // `aria-orientation` is the source of truth (connect seeds it from the\n // orientation value when the consumer left it off), so the focusable variant\n // that sets the attribute directly drives the axis correctly.\n const horizontal = this.element.getAttribute(\"aria-orientation\") !== \"vertical\";\n let next: number | null = null;\n switch (event.key) {\n case \"ArrowUp\":\n if (horizontal) next = this.#value + this.stepValue;\n break;\n case \"ArrowDown\":\n if (horizontal) next = this.#value - this.stepValue;\n break;\n case \"ArrowRight\":\n if (!horizontal) next = this.#value + this.stepValue;\n break;\n case \"ArrowLeft\":\n if (!horizontal) next = this.#value - this.stepValue;\n break;\n case \"Home\":\n next = this.#min;\n break;\n case \"End\":\n next = this.#max;\n break;\n default:\n return;\n }\n if (next === null) return;\n\n event.preventDefault();\n const clamped = this.#clamp(next);\n if (clamped === this.#value) return;\n\n this.element.setAttribute(\"aria-valuenow\", String(clamped));\n this.dispatch(\"change\", { detail: { value: clamped } });\n }\n\n get #value(): number {\n return this.#numericAttr(\"aria-valuenow\", 0);\n }\n\n get #min(): number {\n return this.#numericAttr(\"aria-valuemin\", 0);\n }\n\n get #max(): number {\n return this.#numericAttr(\"aria-valuemax\", 100);\n }\n\n #clamp(value: number): number {\n return Math.min(this.#max, Math.max(this.#min, value));\n }\n\n #numericAttr(name: string, fallback: number): number {\n const parsed = Number.parseFloat(this.element.getAttribute(name) ?? \"\");\n return Number.isNaN(parsed) ? fallback : parsed;\n }\n\n #setDefault(name: string, value: string): void {\n if (!this.element.hasAttribute(name)) {\n this.element.setAttribute(name, value);\n }\n }\n}\n"]}
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import { Controller } from '@hotwired/stimulus';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Headless, accessible **responsive collapsible sidebar** behavior.
|
|
5
|
+
*
|
|
6
|
+
* Markup contract (identifier: `stimeo--sidebar`):
|
|
7
|
+
* <div data-controller="stimeo--sidebar"
|
|
8
|
+
* data-action="turbo:before-cache@document->stimeo--sidebar#beforeCache"
|
|
9
|
+
* data-stimeo--sidebar-breakpoint-value="768"
|
|
10
|
+
* data-stimeo--sidebar-key-value="main-nav">
|
|
11
|
+
* <header>
|
|
12
|
+
* <button data-stimeo--sidebar-target="trigger"
|
|
13
|
+
* data-action="click->stimeo--sidebar#toggle"
|
|
14
|
+
* aria-expanded="true" aria-controls="app-sidebar">Menu</button>
|
|
15
|
+
* </header>
|
|
16
|
+
* <div data-stimeo--sidebar-target="backdrop"
|
|
17
|
+
* data-action="click->stimeo--sidebar#close" hidden></div>
|
|
18
|
+
* <aside id="app-sidebar" data-stimeo--sidebar-target="panel"
|
|
19
|
+
* aria-label="Main" data-mode="inline" data-state="expanded">
|
|
20
|
+
* <nav aria-label="…">…</nav>
|
|
21
|
+
* </aside>
|
|
22
|
+
* </div>
|
|
23
|
+
* <main>…</main> <!-- a body-level sibling so it can be made inert in overlay -->
|
|
24
|
+
*
|
|
25
|
+
* No dedicated APG pattern: the base is **Disclosure** (the trigger's
|
|
26
|
+
* `aria-expanded` controls the panel's expanded state) and, *below* the
|
|
27
|
+
* `breakpoint`, it borrows the **Dialog (Modal)** focus behavior via the shared
|
|
28
|
+
* {@link FocusTrap} (the same trap used by dialog / alert-dialog / drawer).
|
|
29
|
+
*
|
|
30
|
+
* Above the breakpoint it is an **inline**, non-modal element that toggles
|
|
31
|
+
* `expanded`↔`collapsed` (a rail), persisting that preference in `localStorage`.
|
|
32
|
+
* Below it, it becomes an **overlay** off-canvas panel: opening activates the
|
|
33
|
+
* trap (focus move, `Tab` cycle, `Escape`, body scroll lock, background `inert`,
|
|
34
|
+
* focus restore); closing defers `hidden` and the trap teardown until the exit
|
|
35
|
+
* transition ends (synchronously when there is none).
|
|
36
|
+
*
|
|
37
|
+
* @remarks
|
|
38
|
+
* Behavior only — rail width, slide, and backdrop are the consumer's CSS, keyed
|
|
39
|
+
* off `data-mode` (`inline`/`overlay`) and `data-state`. `aria-expanded` is an
|
|
40
|
+
* abstract "is the panel expanded" flag, independent of the visual difference
|
|
41
|
+
* between an inline collapsed rail (still in the DOM) and an overlay closed panel
|
|
42
|
+
* (`hidden`/off-canvas). The `role="dialog"` semantics are intentionally **not**
|
|
43
|
+
* applied — the sidebar stays an `<aside>`/`<nav>` landmark and only borrows the
|
|
44
|
+
* modal *behavior*, because `role="dialog"` would replace that landmark.
|
|
45
|
+
* The collapsed preference persists across Turbo navigations and full reloads;
|
|
46
|
+
* the transient overlay-open state never persists, so "back/forward" never
|
|
47
|
+
* restores a stuck-open menu.
|
|
48
|
+
*/
|
|
49
|
+
declare class SidebarController extends Controller<HTMLElement> {
|
|
50
|
+
#private;
|
|
51
|
+
static targets: string[];
|
|
52
|
+
static values: {
|
|
53
|
+
breakpoint: {
|
|
54
|
+
type: NumberConstructor;
|
|
55
|
+
default: number;
|
|
56
|
+
};
|
|
57
|
+
key: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
default: string;
|
|
60
|
+
};
|
|
61
|
+
collapsed: {
|
|
62
|
+
type: BooleanConstructor;
|
|
63
|
+
default: boolean;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
66
|
+
static actions: readonly ["beforeCache", "close", "open", "toggle"];
|
|
67
|
+
readonly triggerTarget: HTMLElement;
|
|
68
|
+
readonly panelTarget: HTMLElement;
|
|
69
|
+
readonly backdropTarget: HTMLElement;
|
|
70
|
+
readonly hasTriggerTarget: boolean;
|
|
71
|
+
readonly hasPanelTarget: boolean;
|
|
72
|
+
readonly hasBackdropTarget: boolean;
|
|
73
|
+
breakpointValue: number;
|
|
74
|
+
keyValue: string;
|
|
75
|
+
collapsedValue: boolean;
|
|
76
|
+
connect(): void;
|
|
77
|
+
disconnect(): void;
|
|
78
|
+
/** Adopts a panel target added by a Turbo morph after the controller connected. */
|
|
79
|
+
panelTargetConnected(panel: HTMLElement): void;
|
|
80
|
+
/** Closes and releases overlay side effects when the actively trapped panel disappears. */
|
|
81
|
+
panelTargetDisconnected(panel: HTMLElement): void;
|
|
82
|
+
/**
|
|
83
|
+
* Rebinds responsive observation when `breakpoint` changes at runtime.
|
|
84
|
+
*
|
|
85
|
+
* Stimulus calls value callbacks before `connect()`, so the connected guard
|
|
86
|
+
* prevents an eager subscription. Equivalent normalized queries retain the
|
|
87
|
+
* existing listener instead of allocating duplicate `MediaQueryList` objects.
|
|
88
|
+
*/
|
|
89
|
+
breakpointValueChanged(): void;
|
|
90
|
+
/**
|
|
91
|
+
* Sanitizes overlay markup before Turbo snapshots the page.
|
|
92
|
+
*
|
|
93
|
+
* Inline state is durable and remains untouched. Overlay state is transient:
|
|
94
|
+
* pending transitions are cancelled, controller-owned open attributes are
|
|
95
|
+
* closed immediately, and modal side effects are released without moving
|
|
96
|
+
* focus during navigation.
|
|
97
|
+
*/
|
|
98
|
+
beforeCache(): void;
|
|
99
|
+
/** Toggles the panel: inline flips collapsed/expanded, overlay flips open/closed. */
|
|
100
|
+
toggle(): void;
|
|
101
|
+
/** Shows the panel (inline: expand; overlay: open). */
|
|
102
|
+
open(): void;
|
|
103
|
+
/** Hides the panel (inline: collapse; overlay: close). */
|
|
104
|
+
close(): void;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export { SidebarController };
|