@expressivecss/expressive 0.15.0 → 0.16.0

package/dist/js/chunks/chunk-LDXCC2L3.mjs

@@ -0,0 +1,438 @@
+import {
+  Component
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/components/tabs.ts
+var STEPS = { ltr: { ArrowLeft: -1, ArrowRight: 1 }, rtl: { ArrowLeft: 1, ArrowRight: -1 } };
+var _defaults = {
+  duration: null,
+  onShow: null,
+  swipeable: false,
+  responsiveThreshold: Infinity
+  // breakpoint for swipeable
+};
+var scrollBehavior = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth";
+var isDisabled = (a) => a.matches('.disabled, [aria-disabled="true"]');
+var isShown = (a) => a.checkVisibility?.() ?? true;
+var isUsable = (a) => !isDisabled(a) && isShown(a);
+var _Tabs = class _Tabs extends Component {
+  constructor(el, options) {
+    var _a;
+    super(el, options);
+    this._panels = [];
+    // The panel a programmatic scroll is heading for. Scroll events on the way
+    // there pass over other panels and must not select them.
+    this._scrollTarget = null;
+    this._trackObserver = null;
+    this._trackWidth = -1;
+    this._originalPanels = /* @__PURE__ */ new Map();
+    this._originalLinks = /* @__PURE__ */ new Map();
+    /**
+     * Whether the page made the strip a tablist. The roles are the author's;
+     * in that mode the component keeps aria-selected and a roving tabindex, and
+     * the arrow keys select as they move, as the ARIA tabs pattern asks.
+     */
+    this._tablist = false;
+    /** The bar's own tabindex as the page wrote it, put back on destroy. */
+    this._barTabindex = null;
+    /** Re-chooses a tablist's Tab stop when the strip is shown, hidden or resized. */
+    this._stripObserver = null;
+    /**
+     * Left and Right move focus to the next tab, wrapping at the ends, and
+     * Home and End to the first and last; disabled tabs are skipped. In link
+     * tabs focus moves without choosing, and Enter follows the link. In a
+     * tablist the tab that takes focus is selected too, the ARIA pattern's
+     * automatic activation, since a panel here shows at once.
+     */
+    this._handleKeydown = (e) => {
+      const steps = STEPS[getComputedStyle(this.el).direction === "rtl" ? "rtl" : "ltr"];
+      const target = Utils.focusTarget(Array.from(this._tabLinks).filter(isShown), e, steps, true);
+      if (!target) return;
+      e.preventDefault();
+      target.focus();
+      this._followFocus(target);
+    };
+    this._handleTabClick = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const tabLink = target.closest("a");
+      if (!tabLink || !Array.from(this._tabLinks).includes(tabLink)) return;
+      const disabled = tabLink.classList.contains("disabled") || tabLink.getAttribute("aria-disabled") === "true";
+      if (disabled) {
+        e.preventDefault();
+        return;
+      }
+      if (tabLink.hasAttribute("target")) return;
+      e.preventDefault();
+      this._select(tabLink);
+    };
+    this._releaseScrollTarget = () => {
+      clearTimeout(this._scrollTimer);
+      this._scrollTarget = null;
+    };
+    this._handleTrackScroll = () => {
+      if (this._scrollTarget !== null) {
+        if (this._trackAt(this._scrollTarget)) this._releaseScrollTarget();
+        else this._waitForScroll();
+        return;
+      }
+      const panel = this._panels[this._trackIndex()];
+      if (!panel || panel === this._content) return;
+      this._showPanel(Array.from(this._tabLinks).find((a) => this._panelFor(a) === panel));
+    };
+    this._tabLinks = this._queryTabLinks();
+    if (!this._tabLinks.length) {
+      console.error("Tabs: no tab links (an <a> child) to show");
+      return;
+    }
+    this._setupTablist();
+    this._tabLinks.forEach((link) => {
+      this._originalLinks.set(link, {
+        active: link.classList.contains("active"),
+        current: link.getAttribute("aria-current"),
+        selected: link.getAttribute("aria-selected"),
+        tabindex: link.getAttribute("tabindex")
+      });
+      const panel = this._panelFor(link);
+      if (panel) this._originalPanels.set(panel, {
+        display: panel.style.display,
+        priority: panel.style.getPropertyPriority("display"),
+        active: panel.classList.contains("active"),
+        inert: panel.inert
+      });
+    });
+    (_a = this.options).swipeable && (_a.swipeable = window.innerWidth <= this.options.responsiveThreshold && this._originalPanels.size > 0);
+    this._index = 0;
+    this._setupActiveTabLink();
+    if (this.options.swipeable) {
+      this._setupSwipeableTabs();
+    } else {
+      this._setupNormalTabs();
+    }
+    this._setTabsAndTabWidth();
+    this._createIndicator();
+    this._setupEventHandlers();
+    document.fonts?.ready.then(() => {
+      if (this.el["Expressive_Tabs"] === this) this._remeasure();
+    });
+  }
+  _setupTablist() {
+    this._tablist = this.el.getAttribute("role") === "tablist";
+    this._barTabindex = this.el.getAttribute("tabindex");
+    if (this._tablist) this.el.tabIndex = -1;
+    this._stripObserver = new ResizeObserver(() => {
+      if (this._tablist) this._refreshTabStop();
+      this._remeasure();
+    });
+    this._stripObserver.observe(this.el);
+    this._tabLinks.forEach((a) => this._stripObserver.observe(a));
+  }
+  static get defaults() {
+    return _defaults;
+  }
+  destroy() {
+    this._stripObserver?.disconnect();
+    this._stripObserver = null;
+    this._indicator?.remove();
+    if (this._track) {
+      this._teardownSwipeableTabs();
+    }
+    this._originalPanels.forEach((original, panel) => {
+      panel.style.setProperty("display", original.display, original.priority);
+      panel.classList.toggle("active", original.active);
+      panel.inert = original.inert;
+      if (!panel.className) panel.removeAttribute("class");
+    });
+    this._originalLinks.forEach((original, link) => {
+      link.classList.toggle("active", original.active);
+      restoreAttribute(link, "aria-current", original.current);
+      restoreAttribute(link, "aria-selected", original.selected);
+      restoreAttribute(link, "tabindex", original.tabindex);
+    });
+    restoreAttribute(this.el, "tabindex", this._barTabindex);
+    super.destroy();
+  }
+  /**
+   * The index of tab that is currently shown.
+   */
+  get index() {
+    return this._index;
+  }
+  _setupEventHandlers() {
+    this.el.addEventListener("click", this._handleTabClick, { signal: this._events.signal });
+    this.el.addEventListener("keydown", this._handleKeydown, { signal: this._events.signal });
+  }
+  /**
+   * In a tablist the tab that takes focus is selected; link tabs wait for
+   * Enter. The page's focus handlers run inside focus(), and one may have
+   * destroyed or replaced the tabs, which then are no longer this instance's.
+   */
+  _followFocus(tab) {
+    if (this._tablist && tab !== this._activeTabLink && _Tabs.getInstance(this.el) === this) this._select(tab);
+  }
+  _remeasure() {
+    this._setTabsAndTabWidth();
+    if (this._tabWidth !== 0 && this._tabsWidth !== 0) this._positionIndicator();
+  }
+  _queryTabLinks() {
+    return this.el.querySelectorAll(":scope > a");
+  }
+  _select(tabLink) {
+    if (this.options.swipeable) this._clickSwipeable(tabLink);
+    else this._clickTab(tabLink);
+  }
+  _clickSwipeable(tabLink) {
+    if (!this._panels.includes(this._panelFor(tabLink))) return;
+    if (tabLink !== this._activeTabLink && !this._showPanel(tabLink)) return;
+    this._scrollToActivePanel(scrollBehavior());
+  }
+  _clickTab(tabLink) {
+    const oldContent = this._content;
+    this._tabLinks = this._queryTabLinks();
+    const prevIndex = this._index;
+    this._setActiveTabLink(tabLink);
+    if (this._content && !this._swapPanels(oldContent)) return;
+    this._setTabsAndTabWidth();
+    this._animateIndicator(prevIndex);
+  }
+  /** Shows the active panel, hides the old one, then reports the change. */
+  _swapPanels(oldContent) {
+    this._content.style.display = "";
+    this._content.classList.add("active");
+    if (oldContent && oldContent !== this._content) {
+      oldContent.style.display = "none";
+      oldContent.classList.remove("active");
+    }
+    return this._notifyShow();
+  }
+  _createIndicator() {
+    const indicator = document.createElement("span");
+    indicator.classList.add("indicator");
+    this.el.appendChild(indicator);
+    this._indicator = indicator;
+    this._positionIndicator();
+  }
+  /** Reads both positions before writing either. */
+  _positionIndicator() {
+    const left = this._calcLeftPos(this._activeTabLink);
+    const right = this._calcRightPos(this._activeTabLink);
+    this._indicator.style.left = left + "px";
+    this._indicator.style.right = right + "px";
+  }
+  /** The panel a link shows, or null for a `target` link or one without a hash. */
+  _panelFor(a) {
+    if (!a.hash || a.hasAttribute("target")) return null;
+    return Utils.getElementById(this.el, _Tabs._decodeHash(a.hash));
+  }
+  /**
+   * The id a hash names. `a.hash` and `location.hash` come back
+   * percent-encoded, so a non-ASCII id would never match without this. A
+   * malformed escape throws, and is then taken as written.
+   */
+  static _decodeHash(hash) {
+    try {
+      return decodeURIComponent(hash.slice(1));
+    } catch {
+      return hash.slice(1);
+    }
+  }
+  /**
+   * Which tab is current, for the eye and for assistive technology.
+   *
+   * The class alone is a colour. Link tabs are navigation, so `aria-current`
+   * is the part a screen reader reads. A strip the page made a tablist reads
+   * `aria-selected` instead, with the keyboard model rule 2 asks of a
+   * composite role. Either value changes as the user picks, which makes
+   * keeping it the component's job, not the author's - see CONTEXT.md on
+   * static semantics versus dynamic state. Writing it once in the markup and
+   * never moving it left the old tab announcing itself as current.
+   */
+  _setActiveTabLink(tabLink, behavior = scrollBehavior()) {
+    const stop = this._tabStop(tabLink);
+    Array.from(this._tabLinks).forEach((a) => this._mark(a, a === tabLink, a === stop));
+    this._activeTabLink = tabLink;
+    this._index = Array.from(this._tabLinks).indexOf(tabLink);
+    this._content = this._panelFor(tabLink);
+    this._reveal(tabLink, behavior);
+  }
+  /** A tablist says selected and keeps one Tab stop; link tabs say current. */
+  _mark(a, on, stop) {
+    a.classList.toggle("active", on);
+    if (this._tablist) {
+      a.setAttribute("aria-selected", String(on));
+      a.tabIndex = stop ? 0 : -1;
+    } else if (on) a.setAttribute("aria-current", "page");
+    else a.removeAttribute("aria-current");
+  }
+  /**
+   * The tablist's one Tab stop: the selected tab, or the first usable one
+   * when the selected tab is disabled or hidden. The arrow keys skip both,
+   * so a Tab stop on one would leave every other panel out of reach.
+   */
+  _tabStop(selected) {
+    if (isUsable(selected)) return selected;
+    const links = Array.from(this._tabLinks);
+    return links.find(isUsable) ?? links.find((a) => !isDisabled(a)) ?? selected;
+  }
+  /** Showing or hiding the strip or a tab moves the Tab stop to a usable tab. */
+  _refreshTabStop() {
+    const stop = this._tabStop(this._activeTabLink);
+    this._tabLinks.forEach((a) => a.tabIndex = a === stop ? 0 : -1);
+  }
+  /**
+   * Scrolls an overflowing bar, and only the bar, so the tab is in view.
+   * Measured as a visual offset, so it holds in a right-to-left bar too.
+   */
+  _reveal(tab, behavior) {
+    const bar = this.el.getBoundingClientRect();
+    const box = tab.getBoundingClientRect();
+    const left = Math.min(0, box.left - bar.left) || Math.max(0, box.right - bar.right);
+    if (left) this.el.scrollBy({ left, behavior });
+  }
+  _setupActiveTabLink() {
+    const hash = location.hash && _Tabs._decodeHash(location.hash);
+    this._activeTabLink = Array.from(this._tabLinks).find((a) => hash && _Tabs._decodeHash(a.getAttribute("href") ?? "") === hash) ?? this.el.querySelector("a.active") ?? this._tabStop(this._tabLinks[0]);
+    this._setActiveTabLink(this._activeTabLink, "instant");
+    this._originalPanels.forEach((_, panel) => panel.classList.toggle("active", panel === this._content));
+  }
+  _setupSwipeableTabs() {
+    this._panels = [...new Set(Array.from(this._tabLinks, (a) => this._panelFor(a)).filter(Boolean))];
+    const track = document.createElement("div");
+    track.classList.add("tabs-content");
+    this._panels[0].before(track);
+    this._panels.forEach((panel) => {
+      const marker = document.createComment("");
+      panel.before(marker);
+      this._originalPanels.get(panel).marker = marker;
+      track.appendChild(panel);
+      panel.style.display = "";
+    });
+    this._track = track;
+    this._syncPanels();
+    const options = { passive: true, signal: this._events.signal };
+    track.addEventListener("scroll", this._handleTrackScroll, options);
+    track.addEventListener("pointerdown", this._releaseScrollTarget, options);
+    track.addEventListener("wheel", this._releaseScrollTarget, options);
+    this._trackObserver = new ResizeObserver(() => {
+      if (track.clientWidth === this._trackWidth) return;
+      this._trackWidth = track.clientWidth;
+      this._scrollToActivePanel("instant");
+    });
+    this._trackObserver.observe(track);
+    this._scrollToActivePanel("instant");
+  }
+  _teardownSwipeableTabs() {
+    const track = this._track;
+    this._trackObserver?.disconnect();
+    this._trackObserver = null;
+    this._releaseScrollTarget();
+    this._originalPanels.forEach((original, panel) => original.marker?.replaceWith(panel));
+    track.remove();
+    this._track = void 0;
+  }
+  /** Only the shown panel is reachable; the others are off to the side. */
+  _syncPanels() {
+    this._panels.forEach((panel) => {
+      panel.classList.toggle("active", panel === this._content);
+      panel.inert = panel !== this._content;
+    });
+  }
+  /** The panel the track is mostly showing. Panels are exactly one track wide. */
+  _trackIndex() {
+    return Math.round(Math.abs(this._track.scrollLeft) / (this._track.clientWidth || 1));
+  }
+  /**
+   * Whether panel `index` fills the track. Compare positions, not rounded
+   * indexes: a scroll still on its way to another panel can already round to
+   * this one. Measured rather than computed from clientWidth, which rounds a
+   * fractional track width, while the mandatory snap lands on the real edge.
+   */
+  _trackAt(index) {
+    return Math.abs(this._panels[index].getBoundingClientRect().left - this._track.getBoundingClientRect().left) < 1;
+  }
+  _scrollToActivePanel(behavior) {
+    const index = this._panels.indexOf(this._content);
+    if (index < 0 || this._trackAt(index)) return;
+    const sign = getComputedStyle(this._track).direction === "rtl" ? -1 : 1;
+    const left = sign * index * this._track.clientWidth;
+    this._scrollTarget = index;
+    this._waitForScroll();
+    this._track.scrollTo({ left, behavior });
+  }
+  // A smooth scroll that something cut short never arrives, and on a busy page
+  // one can also take a while to start. Once the track has been still for half
+  // a second, jump to the selected panel. The selection stands: a swipe or
+  // wheel that took over has already released the target, so the scroll
+  // events that follow choose the panel. Every scroll event restarts the wait.
+  _waitForScroll() {
+    clearTimeout(this._scrollTimer);
+    this._scrollTimer = setTimeout(() => {
+      this._releaseScrollTarget();
+      this._scrollToActivePanel("instant");
+    }, 500);
+  }
+  _showPanel(tabLink) {
+    const prevIndex = this._index;
+    this._setActiveTabLink(tabLink);
+    this._syncPanels();
+    this._setTabsAndTabWidth();
+    this._animateIndicator(prevIndex);
+    return this._notifyShow();
+  }
+  // After the old panel is hidden, so a listener sees one active panel.
+  _notifyShow() {
+    const panel = this._content;
+    return this._notify("change", this.options.onShow, { args: [panel], detail: { panel }, current: () => this._content === panel });
+  }
+  _setupNormalTabs() {
+    Array.from(this._tabLinks).forEach((a) => {
+      if (a === this._activeTabLink) return;
+      const currContent = this._panelFor(a);
+      if (currContent) currContent.style.display = "none";
+    });
+  }
+  _setTabsAndTabWidth() {
+    this._tabsWidth = this.el.getBoundingClientRect().width;
+    this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;
+  }
+  _calcRightPos(el) {
+    return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);
+  }
+  _calcLeftPos(el) {
+    return Math.floor(el.offsetLeft);
+  }
+  /**
+   * Recalculate tab indicator position. This is useful when
+   * the indicator position is not correct.
+   */
+  updateTabIndicator() {
+    this._setTabsAndTabWidth();
+    this._animateIndicator(this._index);
+  }
+  _animateIndicator(prevIndex) {
+    const ms = this.options.duration;
+    const timing = ms == null ? ["var(--md-comp-tabs-indicator-duration) var(--md-comp-tabs-indicator-easing)", "calc(var(--md-comp-tabs-indicator-duration) * 0.3)"] : [`${ms}ms ease-out`, `${ms * 0.3}ms`];
+    const [leftDelay, rightDelay] = this._index - prevIndex >= 0 ? [timing[1], "0s"] : ["0s", timing[1]];
+    this._indicator.style.transition = `left ${timing[0]} ${leftDelay}, right ${timing[0]} ${rightDelay}`;
+    this._positionIndicator();
+  }
+  /**
+   * Show tab content that corresponds to the tab with the id.
+   * @param tabId The id of the tab that you want to switch to.
+   */
+  select(tabId) {
+    const tab = Array.from(this._tabLinks).find((a) => a.getAttribute("href") === "#" + tabId);
+    if (tab) tab.click();
+  }
+};
+_Tabs.key = "Expressive_Tabs";
+var Tabs = _Tabs;
+
+export {
+  Tabs
+};
+//# sourceMappingURL=chunk-LDXCC2L3.mjs.map

package/dist/js/chunks/chunk-LDXCC2L3.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/tabs.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\nimport { Utils, restoreAttribute } from '../core/utils';\n\nexport interface TabsOptions extends BaseOptions {\n  /**\n   * Indicator transition duration in milliseconds, on an ease-out curve. The\n   * default, null, follows the --md-comp-tabs-indicator-duration and\n   * --md-comp-tabs-indicator-easing spring tokens instead.\n   * @default null\n   */\n  duration: number | null;\n  /**\n   * Callback for when a new tab content is shown.\n   * @default null\n   */\n  onShow: (newContent: Element) => void;\n  /**\n   * Set to true to swipe between panels. The panels move into a full-width\n   * scroll-snap track, so touch and trackpad swipes are native scrolling.\n   * This also uses the responsiveThreshold option.\n   * @default false\n   */\n  swipeable: boolean;\n  /**\n   * The maximum width of the screen, in pixels,\n   * where the swipeable functionality initializes.\n   * @default infinity\n   */\n  responsiveThreshold: number;\n}\n\n/** Left and Right move between tabs the way they point, so they swap in RTL. */\nconst STEPS = { ltr: { ArrowLeft: -1, ArrowRight: 1 }, rtl: { ArrowLeft: 1, ArrowRight: -1 } };\n\nconst _defaults: TabsOptions = {\n  duration: null,\n  onShow: null,\n  swipeable: false,\n  responsiveThreshold: Infinity // breakpoint for swipeable\n};\n\nconst scrollBehavior = (): ScrollBehavior =>\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth';\n\n/** Links cannot be :disabled; a tab is turned off with a class or aria-disabled. */\nconst isDisabled = (a: Element) => a.matches('.disabled, [aria-disabled=\"true\"]');\n\n/** Shown, as far as the browser can say; a responsive utility may hide a tab. */\nconst isShown = (a: Element) => a.checkVisibility?.() ?? true;\n\n/** A tab the keyboard can reach: enabled and shown. */\nconst isUsable = (a: Element) => !isDisabled(a) && isShown(a);\n\nexport class Tabs extends Component<TabsOptions> {\n  _tabLinks: NodeListOf<HTMLAnchorElement>;\n  _index: number;\n  _indicator: HTMLElement;\n  _tabWidth: number;\n  _tabsWidth: number;\n  _track: HTMLElement;\n  private _panels: HTMLElement[] = [];\n  // The panel a programmatic scroll is heading for. Scroll events on the way\n  // there pass over other panels and must not select them.\n  private _scrollTarget: number | null = null;\n  private _scrollTimer: ReturnType<typeof setTimeout>;\n  private _trackObserver: ResizeObserver | null = null;\n  private _trackWidth = -1;\n  _activeTabLink: HTMLAnchorElement;\n  _content: HTMLElement;\n  private _originalPanels = new Map<HTMLElement, { display: string; priority: string; active: boolean; inert: boolean; marker?: Comment }>();\n  private _originalLinks = new Map<HTMLAnchorElement, { active: boolean; current: string | null; selected: string | null; tabindex: string | null }>();\n  /**\n   * Whether the page made the strip a tablist. The roles are the author's;\n   * in that mode the component keeps aria-selected and a roving tabindex, and\n   * the arrow keys select as they move, as the ARIA tabs pattern asks.\n   */\n  private _tablist = false;\n  /** The bar's own tabindex as the page wrote it, put back on destroy. */\n  private _barTabindex: string | null = null;\n  /** Re-chooses a tablist's Tab stop when the strip is shown, hidden or resized. */\n  private _stripObserver: ResizeObserver | null = null;\n\n  constructor(el: HTMLElement, options: Partial<TabsOptions>) {\n    super(el, options);\n\n    this._tabLinks = this._queryTabLinks();\n    if (!this._tabLinks.length) {\n      console.error('Tabs: no tab links (an <a> child) to show');\n      return;\n    }\n    this._setupTablist();\n    this._tabLinks.forEach(link => {\n      this._originalLinks.set(link, {\n        active: link.classList.contains('active'), current: link.getAttribute('aria-current'),\n        selected: link.getAttribute('aria-selected'), tabindex: link.getAttribute('tabindex')\n      });\n      const panel = this._panelFor(link);\n      if (panel) this._originalPanels.set(panel, {\n        display: panel.style.display, priority: panel.style.getPropertyPriority('display'),\n        active: panel.classList.contains('active'), inert: panel.inert\n      });\n    });\n    // Swiping needs at least one panel the links resolve to.\n    this.options.swipeable &&= window.innerWidth <= this.options.responsiveThreshold && this._originalPanels.size > 0;\n    this._index = 0;\n    this._setupActiveTabLink();\n    if (this.options.swipeable) {\n      this._setupSwipeableTabs();\n    } else {\n      this._setupNormalTabs();\n    }\n    // Setup tabs indicator after content to ensure accurate widths\n    this._setTabsAndTabWidth();\n    this._createIndicator();\n    this._setupEventHandlers();\n    // Labels measured before a web font arrives have the fallback's width,\n    // and the strip's size need not change when the font arrives.\n    document.fonts?.ready.then(() => {\n      if (this.el['Expressive_Tabs'] === this) this._remeasure();\n    });\n  }\n\n  private _setupTablist() {\n    this._tablist = this.el.getAttribute('role') === 'tablist';\n    // Firefox makes an overflowing bar a Tab stop of its own, ahead of the\n    // tabs; a tablist is one Tab stop, so the bar steps aside.\n    this._barTabindex = this.el.getAttribute('tabindex');\n    if (this._tablist) this.el.tabIndex = -1;\n    // A strip set up inside a closed dialog has no visible tabs yet; opening\n    // it changes the strip's size, and so does a window resize or a utility\n    // that shows or hides a tab. The tabs are watched too: at the 840px\n    // breakpoint they switch between equal and intrinsic widths inside a\n    // strip that may keep its size. Each change re-measures the indicator,\n    // and a tablist chooses its Tab stop again.\n    this._stripObserver = new ResizeObserver(() => {\n      if (this._tablist) this._refreshTabStop();\n      this._remeasure();\n    });\n    this._stripObserver.observe(this.el);\n    this._tabLinks.forEach((a) => this._stripObserver.observe(a));\n  }\n\n  static get defaults(): TabsOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_Tabs';\n\n  destroy() {\n    this._stripObserver?.disconnect();\n    this._stripObserver = null;\n    this._indicator?.remove();\n    if (this._track) {\n      this._teardownSwipeableTabs();\n    }\n    this._originalPanels.forEach((original, panel) => {\n      panel.style.setProperty('display', original.display, original.priority);\n      panel.classList.toggle('active', original.active);\n      panel.inert = original.inert;\n      if (!panel.className) panel.removeAttribute('class');\n    });\n    this._originalLinks.forEach((original, link) => {\n      link.classList.toggle('active', original.active);\n      restoreAttribute(link, 'aria-current', original.current);\n      restoreAttribute(link, 'aria-selected', original.selected);\n      restoreAttribute(link, 'tabindex', original.tabindex);\n    });\n    restoreAttribute(this.el, 'tabindex', this._barTabindex);\n    super.destroy();\n  }\n\n  /**\n   * The index of tab that is currently shown.\n   */\n  get index() {\n    return this._index;\n  }\n\n  _setupEventHandlers() {\n    this.el.addEventListener('click', this._handleTabClick, { signal: this._events.signal });\n    this.el.addEventListener('keydown', this._handleKeydown, { signal: this._events.signal });\n  }\n\n  /**\n   * Left and Right move focus to the next tab, wrapping at the ends, and\n   * Home and End to the first and last; disabled tabs are skipped. In link\n   * tabs focus moves without choosing, and Enter follows the link. In a\n   * tablist the tab that takes focus is selected too, the ARIA pattern's\n   * automatic activation, since a panel here shows at once.\n   */\n  _handleKeydown = (e: KeyboardEvent) => {\n    const steps = STEPS[getComputedStyle(this.el).direction === 'rtl' ? 'rtl' : 'ltr'];\n    const target = Utils.focusTarget(Array.from(this._tabLinks).filter(isShown), e, steps, true) as HTMLAnchorElement | undefined;\n    if (!target) return;\n    e.preventDefault();\n    target.focus();\n    this._followFocus(target);\n  };\n\n  /**\n   * In a tablist the tab that takes focus is selected; link tabs wait for\n   * Enter. The page's focus handlers run inside focus(), and one may have\n   * destroyed or replaced the tabs, which then are no longer this instance's.\n   */\n  private _followFocus(tab: HTMLAnchorElement) {\n    if (this._tablist && tab !== this._activeTabLink && Tabs.getInstance(this.el) === this) this._select(tab);\n  }\n\n  private _remeasure() {\n    this._setTabsAndTabWidth();\n    if (this._tabWidth !== 0 && this._tabsWidth !== 0) this._positionIndicator();\n  }\n\n  _queryTabLinks() {\n    return this.el.querySelectorAll<HTMLAnchorElement>(':scope > a');\n  }\n\n  _handleTabClick = (e: MouseEvent) => {\n    const target = e.target as Element | null;\n    if (!target) return;\n    const tabLink = target.closest('a');\n    if (!tabLink || !Array.from(this._tabLinks).includes(tabLink)) return;\n\n    const disabled =\n      tabLink.classList.contains('disabled') ||\n      tabLink.getAttribute('aria-disabled') === 'true';\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n    // Act as regular link if target attribute is specified.\n    if (tabLink.hasAttribute('target')) return;\n    e.preventDefault();\n    this._select(tabLink);\n  };\n\n  private _select(tabLink: HTMLAnchorElement) {\n    if (this.options.swipeable) this._clickSwipeable(tabLink);\n    else this._clickTab(tabLink);\n  }\n\n  private _clickSwipeable(tabLink: HTMLAnchorElement) {\n    if (!this._panels.includes(this._panelFor(tabLink))) return;\n    // A listener may destroy the tabs or pick another one.\n    if (tabLink !== this._activeTabLink && !this._showPanel(tabLink)) return;\n    this._scrollToActivePanel(scrollBehavior());\n  }\n\n  private _clickTab(tabLink: HTMLAnchorElement) {\n    const oldContent = this._content;\n    this._tabLinks = this._queryTabLinks();\n    // Moves the class and aria-current together, off the old tab and onto this\n    // one - they used to be able to disagree.\n    const prevIndex = this._index;\n    this._setActiveTabLink(tabLink);\n    // A listener may destroy the tabs or pick another one.\n    if (this._content && !this._swapPanels(oldContent)) return;\n    // Update widths after content is swapped (scrollbar bugfix)\n    this._setTabsAndTabWidth();\n    this._animateIndicator(prevIndex);\n  }\n\n  /** Shows the active panel, hides the old one, then reports the change. */\n  private _swapPanels(oldContent: HTMLElement | null): boolean {\n    // Clear the hide rather than force 'block', so a flex or grid panel\n    // keeps the display its stylesheet gives it.\n    this._content.style.display = '';\n    this._content.classList.add('active');\n    if (oldContent && oldContent !== this._content) {\n      oldContent.style.display = 'none';\n      oldContent.classList.remove('active');\n    }\n    return this._notifyShow();\n  }\n\n  _createIndicator() {\n    const indicator = document.createElement('span');\n    indicator.classList.add('indicator');\n    this.el.appendChild(indicator);\n    this._indicator = indicator;\n    this._positionIndicator();\n  }\n\n  /** Reads both positions before writing either. */\n  private _positionIndicator() {\n    const left = this._calcLeftPos(this._activeTabLink);\n    const right = this._calcRightPos(this._activeTabLink);\n    this._indicator.style.left = left + 'px';\n    this._indicator.style.right = right + 'px';\n  }\n\n  /** The panel a link shows, or null for a `target` link or one without a hash. */\n  private _panelFor(a: HTMLAnchorElement): HTMLElement | null {\n    if (!a.hash || a.hasAttribute('target')) return null;\n    // Looked up in the tabs' own root, so panels inside a shadow root resolve.\n    return Utils.getElementById(this.el, Tabs._decodeHash(a.hash));\n  }\n\n  /**\n   * The id a hash names. `a.hash` and `location.hash` come back\n   * percent-encoded, so a non-ASCII id would never match without this. A\n   * malformed escape throws, and is then taken as written.\n   */\n  private static _decodeHash(hash: string): string {\n    try {\n      return decodeURIComponent(hash.slice(1));\n    } catch {\n      return hash.slice(1);\n    }\n  }\n\n  /**\n   * Which tab is current, for the eye and for assistive technology.\n   *\n   * The class alone is a colour. Link tabs are navigation, so `aria-current`\n   * is the part a screen reader reads. A strip the page made a tablist reads\n   * `aria-selected` instead, with the keyboard model rule 2 asks of a\n   * composite role. Either value changes as the user picks, which makes\n   * keeping it the component's job, not the author's - see CONTEXT.md on\n   * static semantics versus dynamic state. Writing it once in the markup and\n   * never moving it left the old tab announcing itself as current.\n   */\n  private _setActiveTabLink(tabLink: HTMLAnchorElement, behavior: ScrollBehavior = scrollBehavior()) {\n    const stop = this._tabStop(tabLink);\n    Array.from(this._tabLinks).forEach(a => this._mark(a, a === tabLink, a === stop));\n    this._activeTabLink = tabLink;\n    this._index = Array.from(this._tabLinks).indexOf(tabLink);\n    this._content = this._panelFor(tabLink);\n    this._reveal(tabLink, behavior);\n  }\n\n  /** A tablist says selected and keeps one Tab stop; link tabs say current. */\n  private _mark(a: HTMLAnchorElement, on: boolean, stop: boolean) {\n    a.classList.toggle('active', on);\n    if (this._tablist) {\n      a.setAttribute('aria-selected', String(on));\n      a.tabIndex = stop ? 0 : -1;\n    } else if (on) a.setAttribute('aria-current', 'page');\n    else a.removeAttribute('aria-current');\n  }\n\n  /**\n   * The tablist's one Tab stop: the selected tab, or the first usable one\n   * when the selected tab is disabled or hidden. The arrow keys skip both,\n   * so a Tab stop on one would leave every other panel out of reach.\n   */\n  private _tabStop(selected: HTMLAnchorElement): HTMLAnchorElement {\n    if (isUsable(selected)) return selected;\n    // With nothing shown, as in a closed dialog, at least skip disabled tabs.\n    const links = Array.from(this._tabLinks);\n    return links.find(isUsable) ?? links.find((a) => !isDisabled(a)) ?? selected;\n  }\n\n  /** Showing or hiding the strip or a tab moves the Tab stop to a usable tab. */\n  private _refreshTabStop() {\n    const stop = this._tabStop(this._activeTabLink);\n    this._tabLinks.forEach((a) => (a.tabIndex = a === stop ? 0 : -1));\n  }\n\n  /**\n   * Scrolls an overflowing bar, and only the bar, so the tab is in view.\n   * Measured as a visual offset, so it holds in a right-to-left bar too.\n   */\n  private _reveal(tab: HTMLElement, behavior: ScrollBehavior) {\n    const bar = this.el.getBoundingClientRect();\n    const box = tab.getBoundingClientRect();\n    const left = Math.min(0, box.left - bar.left) || Math.max(0, box.right - bar.right);\n    if (left) this.el.scrollBy({ left, behavior });\n  }\n\n  _setupActiveTabLink() {\n    // If the location.hash matches one of the links, use that as the active tab.\n    // If no match is found, use any with class 'active', then the first link.\n    // Both sides decoded: an href may be written with or without escapes.\n    const hash = location.hash && Tabs._decodeHash(location.hash);\n    this._activeTabLink =\n      Array.from(this._tabLinks).find(a => hash && Tabs._decodeHash(a.getAttribute('href') ?? '') === hash) ??\n      this.el.querySelector<HTMLAnchorElement>('a.active') ??\n      this._tabStop(this._tabLinks[0]);\n    this._setActiveTabLink(this._activeTabLink, 'instant');\n\n    this._originalPanels.forEach((_, panel) => panel.classList.toggle('active', panel === this._content));\n  }\n\n  _setupSwipeableTabs() {\n    this._panels = [...new Set(Array.from(this._tabLinks, (a) => this._panelFor(a)).filter(Boolean))];\n    const track = document.createElement('div');\n    track.classList.add('tabs-content');\n    this._panels[0].before(track);\n    this._panels.forEach((panel) => {\n      const marker = document.createComment('');\n      panel.before(marker);\n      this._originalPanels.get(panel).marker = marker;\n      track.appendChild(panel);\n      panel.style.display = '';\n    });\n    this._track = track;\n    this._syncPanels();\n    const options = { passive: true, signal: this._events.signal };\n    track.addEventListener('scroll', this._handleTrackScroll, options);\n    // A swipe or wheel that interrupts a programmatic scroll takes over from it.\n    track.addEventListener('pointerdown', this._releaseScrollTarget, options);\n    track.addEventListener('wheel', this._releaseScrollTarget, options);\n    // A track that starts hidden (in a closed dialog or sheet) is 0px wide, so\n    // the scroll below cannot reach the active panel. Re-align whenever the\n    // track's width changes, which also covers window resizes. Only the width:\n    // a panel growing taller mid-swipe must not pull the track back.\n    this._trackObserver = new ResizeObserver(() => {\n      if (track.clientWidth === this._trackWidth) return;\n      this._trackWidth = track.clientWidth;\n      this._scrollToActivePanel('instant');\n    });\n    this._trackObserver.observe(track);\n    this._scrollToActivePanel('instant');\n  }\n\n  _teardownSwipeableTabs() {\n    const track = this._track;\n    this._trackObserver?.disconnect();\n    this._trackObserver = null;\n    this._releaseScrollTarget();\n    this._originalPanels.forEach((original, panel) => original.marker?.replaceWith(panel));\n    track.remove();\n    this._track = undefined;\n  }\n\n  /** Only the shown panel is reachable; the others are off to the side. */\n  private _syncPanels() {\n    this._panels.forEach((panel) => {\n      panel.classList.toggle('active', panel === this._content);\n      panel.inert = panel !== this._content;\n    });\n  }\n\n  /** The panel the track is mostly showing. Panels are exactly one track wide. */\n  private _trackIndex() {\n    return Math.round(Math.abs(this._track.scrollLeft) / (this._track.clientWidth || 1));\n  }\n\n  /**\n   * Whether panel `index` fills the track. Compare positions, not rounded\n   * indexes: a scroll still on its way to another panel can already round to\n   * this one. Measured rather than computed from clientWidth, which rounds a\n   * fractional track width, while the mandatory snap lands on the real edge.\n   */\n  private _trackAt(index: number) {\n    return Math.abs(this._panels[index].getBoundingClientRect().left - this._track.getBoundingClientRect().left) < 1;\n  }\n\n  private _scrollToActivePanel(behavior: ScrollBehavior) {\n    const index = this._panels.indexOf(this._content);\n    if (index < 0 || this._trackAt(index)) return;\n    // scrollLeft runs negative in a right-to-left track.\n    const sign = getComputedStyle(this._track).direction === 'rtl' ? -1 : 1;\n    const left = sign * index * this._track.clientWidth;\n    this._scrollTarget = index;\n    this._waitForScroll();\n    this._track.scrollTo({ left, behavior });\n  }\n\n  // A smooth scroll that something cut short never arrives, and on a busy page\n  // one can also take a while to start. Once the track has been still for half\n  // a second, jump to the selected panel. The selection stands: a swipe or\n  // wheel that took over has already released the target, so the scroll\n  // events that follow choose the panel. Every scroll event restarts the wait.\n  private _waitForScroll() {\n    clearTimeout(this._scrollTimer);\n    this._scrollTimer = setTimeout(() => {\n      this._releaseScrollTarget();\n      this._scrollToActivePanel('instant');\n    }, 500);\n  }\n\n  _releaseScrollTarget = () => {\n    clearTimeout(this._scrollTimer);\n    this._scrollTarget = null;\n  };\n\n  _handleTrackScroll = () => {\n    if (this._scrollTarget !== null) {\n      // Release on arrival. A smooth scroll still heading to the previous\n      // selection rounds to the new target on its way past, and releasing\n      // there let the rest of that scroll select the panel it was heading to.\n      if (this._trackAt(this._scrollTarget)) this._releaseScrollTarget();\n      else this._waitForScroll();\n      return;\n    }\n    const panel = this._panels[this._trackIndex()];\n    if (!panel || panel === this._content) return;\n    this._showPanel(Array.from(this._tabLinks).find((a) => this._panelFor(a) === panel));\n  };\n\n  private _showPanel(tabLink: HTMLAnchorElement): boolean {\n    const prevIndex = this._index;\n    this._setActiveTabLink(tabLink);\n    this._syncPanels();\n    this._setTabsAndTabWidth();\n    this._animateIndicator(prevIndex);\n    return this._notifyShow();\n  }\n\n  // After the old panel is hidden, so a listener sees one active panel.\n  private _notifyShow(): boolean {\n    const panel = this._content;\n    return this._notify('change', this.options.onShow, { args: [panel], detail: { panel }, current: () => this._content === panel });\n  }\n\n  _setupNormalTabs() {\n    // Hide Tabs Content\n    Array.from(this._tabLinks).forEach((a) => {\n      if (a === this._activeTabLink) return;\n      const currContent = this._panelFor(a);\n      if (currContent) currContent.style.display = 'none';\n    });\n  }\n\n  _setTabsAndTabWidth() {\n    this._tabsWidth = this.el.getBoundingClientRect().width;\n    this._tabWidth = Math.max(this._tabsWidth, this.el.scrollWidth) / this._tabLinks.length;\n  }\n\n  _calcRightPos(el) {\n    return Math.ceil(this._tabsWidth - el.offsetLeft - el.getBoundingClientRect().width);\n  }\n\n  _calcLeftPos(el) {\n    return Math.floor(el.offsetLeft);\n  }\n\n  /**\n   * Recalculate tab indicator position. This is useful when\n   * the indicator position is not correct.\n   */\n  updateTabIndicator() {\n    this._setTabsAndTabWidth();\n    this._animateIndicator(this._index);\n  }\n\n  _animateIndicator(prevIndex) {\n    // The trailing edge waits 30% of the move, so the bar stretches toward\n    // the new tab before it shrinks. On the spring tokens that delay scales\n    // with the spring and drops to 0 with it under reduced motion.\n    const ms = this.options.duration;\n    const timing = ms == null\n      ? ['var(--md-comp-tabs-indicator-duration) var(--md-comp-tabs-indicator-easing)', 'calc(var(--md-comp-tabs-indicator-duration) * 0.3)']\n      : [`${ms}ms ease-out`, `${ms * 0.3}ms`];\n    const [leftDelay, rightDelay] = this._index - prevIndex >= 0 ? [timing[1], '0s'] : ['0s', timing[1]];\n    this._indicator.style.transition = `left ${timing[0]} ${leftDelay}, right ${timing[0]} ${rightDelay}`;\n\n    this._positionIndicator();\n  }\n\n  /**\n   * Show tab content that corresponds to the tab with the id.\n   * @param tabId The id of the tab that you want to switch to.\n   */\n  select(tabId: string) {\n    const tab = Array.from(this._tabLinks).find(a => a.getAttribute('href') === '#' + tabId);\n    if (tab) tab.click();\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/js/chunks/chunk-NAC72P7R.mjs

@@ -0,0 +1,137 @@
+import {
+  Utils
+} from "./chunk-ZVLOUDIJ.mjs";
+
+// src/ts/behaviors/tour.ts
+var states = /* @__PURE__ */ new WeakMap();
+var anchor = "--tour-target";
+var _Tour = class _Tour {
+  static Init() {
+    if (_Tour._initialized || typeof document === "undefined") return;
+    _Tour._initialized = true;
+    document.addEventListener("click", _Tour._onClick);
+    document.addEventListener("keydown", (e) => {
+      const tour = Utils.closestInPath(e, ".tour");
+      if (e.key === "Escape" && tour instanceof HTMLElement && states.has(tour)) _Tour.end(tour);
+    });
+    document.addEventListener(
+      "toggle",
+      (e) => {
+        const tour = e.target;
+        if (e.newState === "closed" && states.has(tour)) _Tour.end(tour);
+      },
+      true
+    );
+  }
+  /** Opens the tour at a step. Does nothing when no step has a visible target. */
+  static start(tour, index = 0) {
+    const steps = [...tour.querySelectorAll(":scope > section[data-tour-target]")].filter(
+      (step) => _Tour._target(step)?.checkVisibility()
+    );
+    if (!steps.length) return;
+    const previous = states.get(tour);
+    if (previous) _Tour._release(previous.steps[previous.index]);
+    const state = { steps, index: 0, opener: _Tour._opener(tour, previous) };
+    states.set(tour, state);
+    _Tour._show(tour, !previous);
+    if (states.get(tour) === state) _Tour.go(tour, index);
+  }
+  /** Where focus returns at the end: the first start's focus, kept across restarts. */
+  static _opener(tour, previous) {
+    if (previous?.opener) return previous.opener;
+    const active = tour.getRootNode().activeElement;
+    return active instanceof HTMLElement ? active : null;
+  }
+  /** Shows the card, and reports the start of a tour that was not running. */
+  static _show(tour, opening) {
+    if (!tour.matches(":popover-open")) tour.showPopover();
+    if (opening) Utils.emit(tour, "open");
+  }
+  /** Shows step `index` of a running tour. */
+  static go(tour, index) {
+    const state = states.get(tour);
+    if (!state) return;
+    _Tour._release(state.steps[state.index]);
+    index = Math.min(Math.max(index, 0), state.steps.length - 1);
+    const travel = index < state.index ? -1 : 1;
+    while (state.steps[index] && !_Tour._target(state.steps[index])) index += travel;
+    const step = state.steps[index];
+    if (!step) {
+      _Tour.end(tour);
+      return;
+    }
+    state.index = index;
+    const last = state.index === state.steps.length - 1;
+    tour.querySelectorAll(":scope > section[data-tour-target]").forEach((section) => {
+      section.hidden = section !== step;
+    });
+    const heading = step.querySelector("h1, h2, h3, h4, h5, h6");
+    if (heading) {
+      if (!heading.id) heading.id = `tour-${Utils.guid()}`;
+      tour.setAttribute("aria-labelledby", heading.id);
+    }
+    const progress = tour.querySelector(".tour-progress");
+    if (progress) {
+      progress.textContent = _Tour.i18n.progress.replace("{current}", String(state.index + 1)).replace("{total}", String(state.steps.length));
+    }
+    const toggle = (selector, show) => tour.querySelectorAll(selector).forEach((button) => button.hidden = !show);
+    toggle("[data-tour-back]", state.index > 0);
+    toggle("[data-tour-next]", !last);
+    toggle("[data-tour-done]", last);
+    const target = _Tour._target(step);
+    target.classList.add("tour-target");
+    Utils.setAnchorName(target, anchor, true);
+    const smooth = !matchMedia("(prefers-reduced-motion: reduce)").matches;
+    target.scrollIntoView({ block: "center", behavior: smooth ? "smooth" : "auto" });
+    if (!tour.hasAttribute("tabindex")) tour.tabIndex = -1;
+    tour.focus({ preventScroll: true });
+    Utils.emit(tour, "change", { step, index: state.index });
+  }
+  /**
+   * Ends a running tour and returns focus to where it was. `completed` says
+   * the user finished it, as the done button does, rather than dismissed it.
+   */
+  static end(tour, completed = false) {
+    const state = states.get(tour);
+    if (!state) return;
+    _Tour._release(state.steps[state.index]);
+    states.delete(tour);
+    if (tour.matches(":popover-open")) tour.hidePopover();
+    state.opener?.focus();
+    Utils.emit(tour, "close", { completed });
+  }
+  static _target(step) {
+    return Utils.getElementById(step, step.getAttribute("data-tour-target") ?? "");
+  }
+  static _release(step) {
+    const target = step && _Tour._target(step);
+    target?.classList.remove("tour-target");
+    if (target) Utils.setAnchorName(target, anchor, false);
+  }
+  static _onClick(e) {
+    const control = Utils.closestInPath(
+      e,
+      "[data-tour-start], [data-tour-back], [data-tour-next], [data-tour-done], [data-tour-close]"
+    );
+    if (!control) return;
+    if (control.hasAttribute("data-tour-start")) {
+      const tour2 = Utils.getElementById(control, control.getAttribute("data-tour-start"));
+      if (tour2?.matches(".tour")) _Tour.start(tour2);
+      return;
+    }
+    const tour = control.closest(".tour");
+    const state = tour && states.get(tour);
+    if (!state) return;
+    if (control.hasAttribute("data-tour-back")) _Tour.go(tour, state.index - 1);
+    else if (control.hasAttribute("data-tour-next")) _Tour.go(tour, state.index + 1);
+    else _Tour.end(tour, control.hasAttribute("data-tour-done"));
+  }
+};
+_Tour.i18n = { progress: "Step {current} of {total}" };
+_Tour._initialized = false;
+var Tour = _Tour;
+
+export {
+  Tour
+};
+//# sourceMappingURL=chunk-NAC72P7R.mjs.map