@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-SMY7GJSS.mjs → chunk-QHZZT7YO.mjs}

@@ -1,62 +1,86 @@
-import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset
+} from "./chunk-67UNY7RH.mjs";
 
 // src/ts/components/richTextEditor.ts
 var _defaults = {
   Editor: null,
   extensions: []
 };
+var command = (commands, name) => Reflect.get(commands, name);
 var NAMING = ["aria-label", "aria-labelledby", "aria-describedby"];
-var RichTextEditor = class _RichTextEditor extends Component {
+var RichTextEditor = class extends Component {
   constructor(el, options) {
-    super(el, options, _RichTextEditor);
-    /** The Tiptap editor. */
+    super(el, options);
+    /**
+     * The Tiptap editor, with the full type of the `Editor` passed to the
+     * constructor; `init()` and `getInstance()` see the `RichTextEditorInstance`
+     * subset.
+     */
     this.editor = null;
     /** The element the editor is mounted in. */
     this.content = null;
     this._actions = /* @__PURE__ */ new Map();
     this._label = null;
+    this._required = false;
+    this._form = null;
     this._handleClick = (e) => {
       const button = e.target.closest("button[data-command]");
       const action = this._actions.get(button);
-      if (action && !button.disabled) this.editor.chain().focus()[action.command](action.attributes).run();
+      if (action && !button.disabled) command(this.editor.chain().focus(), action.command)(action.attributes).run();
     };
     this._handleLabelClick = () => {
       this.editor.chain().focus().run();
     };
+    this._handleSubmit = (e) => {
+      if (this._skipsValidation(e) || !this.editor.isEditable || !this.editor.isEmpty) return;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      this.editor.chain().focus().run();
+    };
+    /**
+     * The form restores the textarea after the reset event, so the editor reads
+     * it back a task later. Without this the editor kept the typed text while the
+     * form submitted the default. No update is emitted, so a reset fires no input.
+     */
+    this._handleReset = () => {
+      if (!this.editor) return;
+      const commands = this.editor.commands;
+      commands.setContent(this.textarea.value, { emitUpdate: false });
+    };
     this._handleUpdate = () => {
       this.textarea.value = this.editor.isEmpty ? "" : this.editor.getHTML();
       this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     };
     this._handleTransaction = () => {
       const can = this.editor.isEditable && this.editor.can();
-      for (const [button, { command, attributes, active }] of this._actions) {
-        button.disabled = !can || !(command in this.editor.commands) || !can[command](attributes);
+      for (const [button, { command: name, attributes, active }] of this._actions) {
+        button.disabled = !can || !(name in this.editor.commands) || !command(can, name)(attributes);
         if (!active) continue;
         const on = this.editor.isActive(active, attributes);
         button.setAttribute("aria-pressed", String(on));
         button.classList.toggle("active", on);
       }
     };
-    this.el["Expressive_RichTextEditor"] = this;
-    this.options = {
-      ..._RichTextEditor.defaults,
-      ...options
-    };
     this.textarea = el.querySelector(":scope > textarea");
     if (!this.textarea || !this.options.Editor) {
       console.error("RichTextEditor needs a <textarea> child and the Tiptap Editor class in options.Editor.");
       return;
     }
     for (const button of el.querySelectorAll("button[data-command]")) {
-      const command = button.dataset.command;
-      const attributes2 = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : void 0;
-      const active = command.startsWith("toggle") ? command[6].toLowerCase() + command.slice(7) : void 0;
-      this._actions.set(button, { command, attributes: attributes2, active });
+      const command2 = button.dataset.command;
+      let attributes2;
+      try {
+        attributes2 = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : void 0;
+      } catch {
+        console.warn("RichTextEditor ignored invalid JSON in data-attributes:", button.dataset.attributes);
+      }
+      const active = command2.startsWith("toggle") ? command2[6].toLowerCase() + command2.slice(7) : void 0;
+      this._actions.set(button, { command: command2, attributes: attributes2, active });
     }
     const attributes = { role: "textbox", "aria-multiline": "true" };
     for (const name of NAMING) {
@@ -67,58 +91,62 @@ var RichTextEditor = class _RichTextEditor extends Component {
     if (this._label && !attributes["aria-labelledby"]) {
       if (!this._label.id) this._label.id = `rich-text-editor-label-${Utils.guid()}`;
       attributes["aria-labelledby"] = this._label.id;
-      this._label.addEventListener("click", this._handleLabelClick);
+      this._label.addEventListener("click", this._handleLabelClick, { signal: this._events.signal });
+    }
+    this._required = this.textarea.required;
+    this._form = this.textarea.form;
+    if (this._required) {
+      attributes["aria-required"] = "true";
+      this.textarea.required = false;
+      this._form?.addEventListener("submit", this._handleSubmit, { capture: true, signal: this._events.signal });
     }
+    afterFormReset(this.textarea, this._handleReset, this._events.signal);
     this.content = document.createElement("div");
     this.content.className = "rich-text-editor-content";
     this.textarea.after(this.content);
     this.textarea.hidden = true;
-    this.editor = new this.options.Editor({
+    const config = {
       element: this.content,
       extensions: this.options.extensions,
       content: this.textarea.value,
       editable: !(this.textarea.disabled || this.textarea.readOnly),
       editorProps: { attributes }
-    });
+    };
+    this.editor = new this.options.Editor(config);
     this.editor.on("update", this._handleUpdate);
     this.editor.on("transaction", this._handleTransaction);
     this._handleTransaction();
-    el.addEventListener("click", this._handleClick);
-  }
-  static get defaults() {
-    return _defaults;
+    el.addEventListener("click", this._handleClick, { signal: this._events.signal });
   }
-  /**
-   * Initializes instances of RichTextEditor.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
   static init(els, options = {}) {
-    return super.init(els, options, _RichTextEditor);
+    return super.init.call(this, els, options);
   }
-  static getInstance(el) {
-    return el["Expressive_RichTextEditor"];
+  static get defaults() {
+    return _defaults;
   }
   destroy() {
-    this.el["Expressive_RichTextEditor"] = void 0;
+    super.destroy();
     if (!this.editor) return;
-    this.el.removeEventListener("click", this._handleClick);
-    this._label?.removeEventListener("click", this._handleLabelClick);
     this.editor.off("update", this._handleUpdate);
     this.editor.off("transaction", this._handleTransaction);
     this.editor.destroy();
     this.editor = null;
     this.content.remove();
     this.textarea.hidden = false;
+    this.textarea.required = this._required;
     for (const button of this._actions.keys()) {
       button.disabled = false;
       button.classList.remove("active");
       button.removeAttribute("aria-pressed");
     }
   }
+  _skipsValidation(e) {
+    return this._form.noValidate || !!e.submitter?.formNoValidate;
+  }
 };
+RichTextEditor.key = "Expressive_RichTextEditor";
 
 export {
   RichTextEditor
 };
-//# sourceMappingURL=chunk-SMY7GJSS.mjs.map
+//# sourceMappingURL=chunk-QHZZT7YO.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/richTextEditor.ts"],
+  "sourcesContent": ["import { Utils, afterFormReset } from '../core/utils';\nimport { Component, BaseOptions, InitElement, InitElements } from '../core/component';\n\n/**\n * The parts of a Tiptap `Editor` this component uses. Declared here so the\n * published types do not depend on Tiptap.\n */\n/** A Tiptap command chain. Commands by name come through `command()`. */\nexport interface RichTextEditorChain {\n  focus(): RichTextEditorChain;\n  run(): boolean;\n}\n\n/**\n * What `new Editor()` gets. Only these are declared; the extensions and\n * `editorProps` ride along, and Tiptap types them itself.\n */\nexport interface RichTextEditorConfig {\n  element: HTMLElement;\n  content: string;\n  editable: boolean;\n}\n\nexport interface RichTextEditorInstance {\n  commands: object;\n  isEditable: boolean;\n  isEmpty: boolean;\n  chain(): RichTextEditorChain;\n  /** Each command as a check that reports whether it can run now. */\n  can(): object;\n  isActive(name: string, attributes?: object): boolean;\n  getHTML(): string;\n  on(event: string, callback: () => void): unknown;\n  off(event: string, callback: () => void): unknown;\n  destroy(): void;\n}\n\n/** Tiptap's `Editor` class, or any class with the parts this component uses. */\nexport type RichTextEditorClass = new (options: RichTextEditorConfig) => RichTextEditorInstance;\n\nexport interface RichTextEditorOptions<E extends RichTextEditorClass = RichTextEditorClass> extends BaseOptions {\n  /**\n   * Tiptap's `Editor` class. ExpressiveCSS does not bundle Tiptap, so the\n   * page imports it and passes it in.\n   * @default null\n   */\n  Editor: E | null;\n  /**\n   * Tiptap extensions, usually `[StarterKit]`.\n   * @default []\n   */\n  extensions: unknown[];\n}\n\nconst _defaults: RichTextEditorOptions = {\n  Editor: null,\n  extensions: []\n};\n\ntype Action = { command: string; attributes?: object; active?: string };\n\n/**\n * A command by name on a chain or on `can()`. The page's `data-command`\n * names a command an extension registered, which `_handleTransaction`\n * checks against `editor.commands` first.\n */\nconst command = <R>(commands: object, name: string) =>\n  Reflect.get(commands, name) as (attributes?: object) => R;\n\n// Copied from the textarea onto the editable element.\nconst NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby'];\n\n/**\n * A rich text editor built on Tiptap: a `.rich-text-editor` holding a\n * `<textarea>` and, usually, a `.toolbar` of `[data-command]` buttons.\n *\n * The textarea's value is the starting HTML. The component hides it, mounts\n * the editor after it and writes the editor's HTML back on every change, so\n * the textarea still submits with its form. A button's `data-command` names a\n * Tiptap command and `data-attributes` holds its JSON argument. Buttons are\n * disabled when their command cannot run, and `toggle*` commands report their\n * state with `aria-pressed` and `.active`.\n */\nexport class RichTextEditor<E extends RichTextEditorClass = RichTextEditorClass> extends Component<RichTextEditorOptions<E>> {\n  /**\n   * The Tiptap editor, with the full type of the `Editor` passed to the\n   * constructor; `init()` and `getInstance()` see the `RichTextEditorInstance`\n   * subset.\n   */\n  editor: InstanceType<E> | null = null;\n  /** The form value. */\n  textarea: HTMLTextAreaElement | null;\n  /** The element the editor is mounted in. */\n  content: HTMLElement | null = null;\n  private _actions = new Map<HTMLButtonElement, Action>();\n  private _label: HTMLLabelElement | null = null;\n  private _required = false;\n  private _form: HTMLFormElement | null = null;\n\n  /** Initializes an editor, typed by the `Editor` passed in. */\n  static init<E extends RichTextEditorClass>(this: typeof RichTextEditor, el: HTMLElement, options?: Partial<RichTextEditorOptions<E>>): RichTextEditor<E>;\n  /** Initializes an editor on each element, typed by the `Editor` passed in. */\n  static init<E extends RichTextEditorClass>(this: typeof RichTextEditor, els: InitElements<InitElement>, options?: Partial<RichTextEditorOptions<E>>): RichTextEditor<E>[];\n  static init(els: HTMLElement | InitElements<InitElement>, options: Partial<RichTextEditorOptions> = {}): RichTextEditor | RichTextEditor[] {\n    return super.init.call(this, els as InitElements<InitElement>, options);\n  }\n\n  constructor(el: HTMLElement, options: Partial<RichTextEditorOptions<E>>) {\n    super(el, options);\n    this.textarea = el.querySelector(':scope > textarea');\n    if (!this.textarea || !this.options.Editor) {\n      console.error('RichTextEditor needs a <textarea> child and the Tiptap Editor class in options.Editor.');\n      return;\n    }\n\n    for (const button of el.querySelectorAll<HTMLButtonElement>('button[data-command]')) {\n      const command = button.dataset.command;\n      let attributes: object | undefined;\n      try {\n        attributes = button.dataset.attributes ? JSON.parse(button.dataset.attributes) : undefined;\n      } catch {\n        // One bad button must not stop the editor, or later elements, mounting.\n        console.warn('RichTextEditor ignored invalid JSON in data-attributes:', button.dataset.attributes);\n      }\n      // toggleBulletList is active while the selection is in a bulletList.\n      const active = command.startsWith('toggle') ? command[6].toLowerCase() + command.slice(7) : undefined;\n      this._actions.set(button, { command, attributes, active });\n    }\n\n    const attributes: Record<string, string> = { role: 'textbox', 'aria-multiline': 'true' };\n    for (const name of NAMING) {\n      const value = this.textarea.getAttribute(name);\n      if (value) attributes[name] = value;\n    }\n    // A <label for> names the hidden textarea, so it has to name the editor\n    // instead, and a click on it has to focus the editor.\n    this._label = this.textarea.labels?.[0] ?? null;\n    if (this._label && !attributes['aria-labelledby']) {\n      if (!this._label.id) this._label.id = `rich-text-editor-label-${Utils.guid()}`;\n      attributes['aria-labelledby'] = this._label.id;\n      this._label.addEventListener('click', this._handleLabelClick, { signal: this._events.signal });\n    }\n    // A hidden required textarea blocks submit with no message, because the\n    // browser cannot focus it to report. The editor takes over: it carries\n    // aria-required, and an empty editor cancels submit and takes focus.\n    this._required = this.textarea.required;\n    this._form = this.textarea.form;\n    if (this._required) {\n      attributes['aria-required'] = 'true';\n      this.textarea.required = false;\n      this._form?.addEventListener('submit', this._handleSubmit, { capture: true, signal: this._events.signal });\n    }\n    afterFormReset(this.textarea, this._handleReset, this._events.signal);\n\n    this.content = document.createElement('div');\n    this.content.className = 'rich-text-editor-content';\n    this.textarea.after(this.content);\n    this.textarea.hidden = true;\n    const config = {\n      element: this.content,\n      extensions: this.options.extensions,\n      content: this.textarea.value,\n      editable: !(this.textarea.disabled || this.textarea.readOnly),\n      editorProps: { attributes }\n    };\n    // `new` on a generic constructor yields the constraint, not E's instance.\n    this.editor = new this.options.Editor(config) as InstanceType<E>;\n    this.editor.on('update', this._handleUpdate);\n    this.editor.on('transaction', this._handleTransaction);\n    this._handleTransaction();\n    el.addEventListener('click', this._handleClick, { signal: this._events.signal });\n  }\n\n  static get defaults(): RichTextEditorOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_RichTextEditor';\n\n  destroy() {\n    super.destroy();\n    if (!this.editor) return;\n    this.editor.off('update', this._handleUpdate);\n    this.editor.off('transaction', this._handleTransaction);\n    this.editor.destroy();\n    this.editor = null;\n    this.content.remove();\n    this.textarea.hidden = false;\n    this.textarea.required = this._required;\n    for (const button of this._actions.keys()) {\n      button.disabled = false;\n      button.classList.remove('active');\n      button.removeAttribute('aria-pressed');\n    }\n  }\n\n  private _handleClick = (e: MouseEvent) => {\n    const button = (e.target as Element).closest<HTMLButtonElement>('button[data-command]');\n    const action = this._actions.get(button);\n    if (action && !button.disabled) command<RichTextEditorChain>(this.editor.chain().focus(), action.command)(action.attributes).run();\n  };\n\n  private _handleLabelClick = () => {\n    this.editor.chain().focus().run();\n  };\n\n  private _skipsValidation(e: SubmitEvent) {\n    return this._form.noValidate || !!(e.submitter as HTMLButtonElement | null)?.formNoValidate;\n  }\n\n  private _handleSubmit = (e: SubmitEvent) => {\n    if (this._skipsValidation(e) || !this.editor.isEditable || !this.editor.isEmpty) return;\n    e.preventDefault();\n    e.stopImmediatePropagation();\n    this.editor.chain().focus().run();\n  };\n\n  /**\n   * The form restores the textarea after the reset event, so the editor reads\n   * it back a task later. Without this the editor kept the typed text while the\n   * form submitted the default. No update is emitted, so a reset fires no input.\n   */\n  private _handleReset = () => {\n    if (!this.editor) return;\n    const commands = this.editor.commands as { setContent: (content: string, options: { emitUpdate: boolean }) => boolean };\n    commands.setContent(this.textarea.value, { emitUpdate: false });\n  };\n\n  private _handleUpdate = () => {\n    this.textarea.value = this.editor.isEmpty ? '' : this.editor.getHTML();\n    this.textarea.dispatchEvent(new Event('input', { bubbles: true }));\n  };\n\n  private _handleTransaction = () => {\n    const can = this.editor.isEditable && this.editor.can();\n    for (const [button, { command: name, attributes, active }] of this._actions) {\n      button.disabled = !can || !(name in this.editor.commands) || !command<boolean>(can, name)(attributes);\n      if (!active) continue;\n      const on = this.editor.isActive(active, attributes);\n      button.setAttribute('aria-pressed', String(on));\n      button.classList.toggle('active', on);\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["command", "attributes"]
+}

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

@@ -0,0 +1,439 @@
+import {
+  Component
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-67UNY7RH.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 (_Tabs.getInstance(this.el) === 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) {
+    if (tabLink === this._activeTabLink) return;
+    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-QND56EW2.mjs.map