@ui-doc/html-renderer 0.4.0 → 1.0.0

package/dist/HtmlRenderer.d.ts

@@ -1,4 +1,4 @@
-import type { GenerateContext } from '@ui-doc/core';
+import type { GenerateContext, GenerateExampleContext } from '@ui-doc/core';
 import type { Node } from './nodes';
 import type { Parser } from './Parser.types';
 import type { RenderContext, Renderer, SourceInput } from './Renderer.types';
@@ -12,10 +12,10 @@ export declare class HtmlRenderer implements Renderer {
     addPartial(name: string, partial: SourceInput): this;
     addPage(name: string, page: SourceInput): this;
     protected parse(input: SourceInput): Node;
-    generate(context: GenerateContext, layout?: string): string;
+    generate(context: GenerateContext | GenerateExampleContext, layout?: string): string;
     page(name: string, context: RenderContext): string;
     partial(name: string, context?: RenderContext): string;
     protected render(rootNode: Node, context: RenderContext): string;
-    protected generateContext(context: GenerateContext): RenderContext;
+    protected generateContext(context: GenerateContext | GenerateExampleContext): RenderContext;
     protected makeAttributes(attrs?: Record<string, string>): string;
 }

package/dist/InlineReader.d.ts

@@ -7,7 +7,7 @@ export declare class InlineReader implements Reader {
     protected currentPos: number;
     protected currentContent: string;
     constructor(input: string, source?: string);
-    peak(k?: PositiveInteger): string;
+    peek(k?: PositiveInteger): string;
     consume(k?: PositiveInteger): string;
     isEof(): boolean;
     debug(): {

package/dist/Lexer.types.d.ts

@@ -9,17 +9,18 @@ export interface Lexer {
      * @param {PositiveInteger} k
      * @returns {Token | undefined} next token or undefined if there are no more tokens.
      */
-    peek<T extends PositiveInteger = 1>(k?: T): TokenReturn<T>;
+    peek: <T extends PositiveInteger = 1>(k?: T) => TokenReturn<T>;
     /**
      * Get the next token /next k-th token, and remove it from the token stream.
-     * This means, calling the consume() method multiple times will return a new token at each invocation.
+     * This means, calling the consume() method multiple times will return a new token at each
+     * invocation.
      * @param {PositiveInteger} k
      * @returns {Token | undefined} next token or undefined if there are no more tokens.
      */
-    consume<T extends PositiveInteger = 1>(k?: T): TokenReturn<T>;
+    consume: <T extends PositiveInteger = 1>(k?: T) => TokenReturn<T>;
     /**
      * Get the debug information about the current state of the lexer.
      * @returns {object} debug information
      */
-    debug(): ReturnType<Reader['debug']>;
+    debug: () => ReturnType<Reader['debug']>;
 }

package/dist/NodeParser.d.ts

@@ -1,8 +1,8 @@
-import { HtmlCurlyBraceLexer } from './HtmlCurlyBraceLexer';
 import type { TagNode } from './nodes';
-import { Node } from './nodes/Node';
 import type { Parser, TagNodeParse } from './Parser.types';
 import type { Reader } from './Reader.types';
+import { HtmlCurlyBraceLexer } from './HtmlCurlyBraceLexer';
+import { Node } from './nodes/Node';
 export declare class NodeParser implements Parser {
     protected tags: Record<string, TagNodeParse>;
     static init(): NodeParser;

package/dist/Parser.types.d.ts

@@ -1,13 +1,13 @@
 import type { Node, TagNode } from './nodes';
 import type { Reader } from './Reader.types';
-import type { Token } from './Token.types';
+import type { TokenValue } from './Token.types';
 export interface TagNodeParse {
     identifier: string;
     example: string;
     hasContent: boolean;
-    parse(): {
-        addToken(token: Token): void;
-        create(): TagNode;
+    parse: () => {
+        addToken: (token: TokenValue) => void;
+        create: () => TagNode;
     };
 }
 export interface Parser {
@@ -16,10 +16,10 @@ export interface Parser {
      * @param {Reader} reader
      * @returns {Node} AST
      */
-    parse(reader: Reader): Node;
+    parse: (reader: Reader) => Node;
     /**
      * Register a tag parser.
      * @param {TagNodeParse} tag
      */
-    registerTagParser(tag: TagNodeParse): this;
+    registerTagParser: (tag: TagNodeParse) => this;
 }

package/dist/Primitive.types.d.ts

@@ -1 +1 @@
-export type PositiveInteger<T extends number = number> = `${T}` extends '0' | `-${any}` | `${any}.${any}` ? never : T;
+export type PositiveInteger<T extends number = number> = `${T}` extends '0' | `-${string}` | `${string}.${string}` ? never : T;

package/dist/Reader.types.d.ts

@@ -2,31 +2,33 @@ import type { PositiveInteger } from './Primitive.types';
 export interface Reader {
     /**
      * Get the next character / next k-th character from the input.
-     * This is used to look ahead the characters without consuming/removing them from the input stream.
+     * This is used to look ahead the characters without consuming/removing them from the input
+     * stream.
      * Calling the peek() method more than once will return the same character.
      *
      * @param {PositiveInteger} k number
      * @returns {string} next character
      */
-    peak(k?: PositiveInteger): string;
+    peek: (k?: PositiveInteger) => string;
     /**
      * Get the next character /next k-th token from the input, and remove it from the input.
-     * This means, calling the consume() method multiple times will return a new character at each invocation.
+     * This means, calling the consume() method multiple times will return a new character at each
+     * invocation.
      *
      * @param {PositiveInteger} k
      * @returns {string} next character
      */
-    consume(k?: PositiveInteger): string;
+    consume: (k?: PositiveInteger) => string;
     /**
      * Check if the input stream is empty.
      * @returns {boolean} true if the input stream is empty, false otherwise.
      */
-    isEof(): boolean;
+    isEof: () => boolean;
     /**
      * Get the debug information about the current state of the reader.
      * @returns {object} debug information
      */
-    debug(): {
+    debug: () => {
         source: string;
         line: PositiveInteger;
         pos: PositiveInteger;

package/dist/Renderer.types.d.ts

@@ -1,14 +1,14 @@
-import { Renderer as CoreRenderer } from '@ui-doc/core';
+import type { Renderer as CoreRenderer } from '@ui-doc/core';
 import type { Reader } from './Reader.types';
-export type RenderContext = Record<string, any>;
+export type RenderContext = Record<string, unknown>;
 export type SourceInput = {
     source: string;
     content: string;
 } | Reader;
 export interface Renderer extends CoreRenderer {
-    addLayout(name: string, layout: SourceInput): this;
-    addPartial(name: string, partial: SourceInput): this;
-    addPage(name: string, page: SourceInput): this;
-    page(name: string, context: RenderContext): string;
-    partial(name: string, context?: RenderContext): string;
+    addLayout: (name: string, layout: SourceInput) => this;
+    addPartial: (name: string, partial: SourceInput) => this;
+    addPage: (name: string, page: SourceInput) => this;
+    page: (name: string, context: RenderContext) => string;
+    partial: (name: string, context?: RenderContext) => string;
 }

package/dist/assets/services/expand.d.ts

@@ -1,7 +1,9 @@
 /**
- * Initialize expandable/collapsable elements by using the [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
+ * Initialize expandable/collapsable elements by using the
+ * [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
  *
- * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`.
+ * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will
+ * be toggled between `true` and `false`.
  *
  * @location functions.expand Expand
  * @example

package/dist/assets/ui-doc.cjs

@@ -52,7 +52,8 @@ function ready(callback) {
     }
 }
 /**
- * Animate an element using css animations/transitions. This function will add the necessary classes to the element to trigger the animation.
+ * Animate an element using css animations/transitions. This function will add the necessary
+ * classes to the element to trigger the animation.
  * When doing an entering animation following classes will be added:
  * - `[animation-name]-enter-active`
  * - `[animation-name]-enter-from`
@@ -62,9 +63,11 @@ function ready(callback) {
  * - `[animation-name]-leave-from`
  * - `[animation-name]-leave-to`
  *
- * The animation classes will be removed after the animation is done. If a callback is provided it will be called after the animation is done.
+ * The animation classes will be removed after the animation is done. If a callback is provided
+ * it will be called after the animation is done.
  *
- * The `-active` class will stay on the element until the animation is done. The `-from` class will be removed after the first frame and the `-to`
+ * The `-active` class will stay on the element until the animation is done. The `-from` class will
+ * be removed after the first frame and the `-to`
  * class will be added after the first frame.
  *
  * @param target html element to animate
@@ -92,7 +95,8 @@ function animate(target, animationName, entering, callback) {
     target.classList.add(animateClassActive, animateClassFrom);
     requestAnimationFrame(() => {
         const styles = window.getComputedStyle(target);
-        // if the element has no transition or animation we can call the afterAnimation function in the next frame
+        // if the element has no transition or animation we can call the afterAnimation function in the
+        // next frame
         if (['all', 'none'].includes(styles.transition) && styles.animationName === 'none') {
             requestAnimationFrame(afterAnimation);
         }
@@ -122,8 +126,10 @@ function queryParentSelector(element, selector, maxDepth = 10) {
 }
 
 /**
- * Sometimes you need to prevent the user from interacting with other elements while an element is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.
- * You can set the `data-inert` attribute with selectors (comma separated) to control the `inert` attribute of elements matching your selectors.
+ * Sometimes you need to prevent the user from interacting with other elements while an element
+ * is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.
+ * You can set the `data-inert` attribute with selectors (comma separated) to control the
+ * `inert` attribute of elements matching your selectors.
  * @location functions.expand.with-inerts Expand controlling inert
  * @order 30
  * @example
@@ -144,13 +150,16 @@ function queryParentSelector(element, selector, maxDepth = 10) {
  */
 function toggleInert(target, show) {
     const inertSelector = target.getAttribute('data-inert');
-    if (!inertSelector) {
+    if (inertSelector === null || inertSelector === '') {
         return;
     }
     inertSelector.split(',').forEach(selector => {
         // if the target is inside an element with the same selector, we don't want to remove the inert attribute
         const activeParentWithSameSelector = !show
-            ? queryParentSelector(target.parentElement, `[data-inert="${selector}"],[data-inert^="${selector},"],[data-inert$=",${selector}"],[data-inert*=",${selector},"]`)
+            ? queryParentSelector(target.parentElement, `[data-inert="${selector}"],`
+                + `[data-inert^="${selector},"],`
+                + `[data-inert$=",${selector}"],`
+                + `[data-inert*=",${selector},"]`)
             : null;
         if (activeParentWithSameSelector) {
             return;
@@ -245,7 +254,7 @@ function toggleControlTarget(selector, show, callback) {
         });
     }
     toggleInert(target, show);
-    if (animationName) {
+    if (animationName !== null && animationName !== '') {
         if (show) {
             toggleHide();
             animate(target, animationName, show);
@@ -259,9 +268,11 @@ function toggleControlTarget(selector, show, callback) {
     }
 }
 /**
- * Initialize expandable/collapsable elements by using the [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
+ * Initialize expandable/collapsable elements by using the
+ * [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
  *
- * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`.
+ * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will
+ * be toggled between `true` and `false`.
  *
  * @location functions.expand Expand
  * @example
@@ -290,7 +301,7 @@ function initExpand() {
                     sibling.dispatchEvent(new MouseEvent('click', { bubbles: true, relatedTarget: expander }));
                 });
             }
-            if (controlTarget) {
+            if (controlTarget !== null && controlTarget !== '') {
                 toggleControlTarget(`#${controlTarget}`, !expanded, toggleExpanded);
             }
             else {
@@ -298,7 +309,7 @@ function initExpand() {
             }
         };
         expander.addEventListener('click', toggle);
-        if (controlTarget) {
+        if (controlTarget !== null && controlTarget !== '') {
             // select all controls inside the controlled area that have the same aria-controls attribute
             document
                 .querySelectorAll(`#${controlTarget} [aria-controls="${controlTarget}"]`)

package/dist/assets/ui-doc.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ui-doc.cjs","sources":["../../../scripts/services/example.ts","../../../scripts/utils/dom.ts","../../../scripts/utils/select.ts","../../../scripts/services/expand.ts","../../../scripts/services/sidebar.ts","../../../scripts/app.ts"],"sourcesContent":["export function initExample() {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const initHeightChange = () => {\n      let currentHeight = 0\n      const changeHeight = () => {\n        if (document.body.scrollHeight === currentHeight) {\n          return\n        }\n\n        currentHeight = document.body.scrollHeight\n        iframe.style.height = `${currentHeight}px`\n      }\n\n      // Initial height change\n      changeHeight()\n\n      // Use MutationObserver to detect changes in the DOM and change height if required\n      const mutationObserver = new MutationObserver(changeHeight)\n\n      mutationObserver.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n\n      // Use ResizeObserver to detect changes in the viewport and change height if required\n      const resizeObserver = new ResizeObserver(changeHeight)\n\n      resizeObserver.observe(document.body)\n    }\n\n    if (document.readyState === 'complete') {\n      initHeightChange()\n    } else {\n      iframe.addEventListener('load', initHeightChange)\n    }\n  })\n}\n","/**\n * Run function when dom is ready\n *\n * @param callback function to run when dom is ready\n */\nexport function ready(callback: (this: Document) => void): void {\n  if (document.readyState !== 'loading') {\n    callback.call(document)\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n\n/**\n * Animate an element using css animations/transitions. This function will add the necessary classes to the element to trigger the animation.\n * When doing an entering animation following classes will be added:\n * - `[animation-name]-enter-active`\n * - `[animation-name]-enter-from`\n * - `[animation-name]-enter-to`\n * When doing a leaving animation following classes will be added:\n * - `[animation-name]-leave-active`\n * - `[animation-name]-leave-from`\n * - `[animation-name]-leave-to`\n *\n * The animation classes will be removed after the animation is done. If a callback is provided it will be called after the animation is done.\n *\n * The `-active` class will stay on the element until the animation is done. The `-from` class will be removed after the first frame and the `-to`\n * class will be added after the first frame.\n *\n * @param target html element to animate\n * @param animationName animation name to be used\n * @param entering determine if the elements animation should be entering or leaving\n * @param callback to be called after the animation is done\n */\nexport function animate(\n  target: HTMLElement,\n  animationName: string,\n  entering: boolean,\n  callback?: () => void,\n): void {\n  const animationState = entering ? 'enter' : 'leave'\n  const animateClassActive = `${animationName}-${animationState}-active`\n  const animateClassTo = `${animationName}-${animationState}-to`\n  const animateClassFrom = `${animationName}-${animationState}-from`\n  const afterAnimation = () => {\n    target.classList.remove(animateClassTo, animateClassActive)\n    target.removeEventListener('animationend', afterAnimation)\n    target.removeEventListener('transitionend', afterAnimation)\n\n    if (callback) {\n      callback()\n    }\n  }\n\n  target.addEventListener('animationend', afterAnimation)\n  target.addEventListener('transitionend', afterAnimation)\n\n  target.addEventListener('animationcancel', afterAnimation)\n  target.addEventListener('transitioncancel', afterAnimation)\n\n  target.classList.add(animateClassActive, animateClassFrom)\n  requestAnimationFrame(() => {\n    const styles = window.getComputedStyle(target)\n\n    // if the element has no transition or animation we can call the afterAnimation function in the next frame\n    if (['all', 'none'].includes(styles.transition) && styles.animationName === 'none') {\n      requestAnimationFrame(afterAnimation)\n    }\n\n    target.classList.remove(animateClassFrom)\n    target.classList.add(animateClassTo)\n  })\n}\n","/**\n * Query the first parent element that matches the selector\n *\n * @param element to search in\n * @param selector to be matched\n * @param maxDepth maximum depth to search\n * @returns element that matches the selector\n */\n\nexport function queryParentSelector<K extends keyof HTMLElementTagNameMap>(\n  element: HTMLElement | null,\n  selector: K,\n  maxDepth?: number,\n): HTMLElementTagNameMap[K] | null\nexport function queryParentSelector<K extends keyof SVGElementTagNameMap>(\n  element: HTMLElement | null,\n  selector: K,\n  maxDepth?: number,\n): SVGElementTagNameMap[K] | null\nexport function queryParentSelector<K extends keyof MathMLElementTagNameMap>(\n  element: HTMLElement | null,\n  selectors: K,\n  maxDepth?: number,\n): MathMLElementTagNameMap[K] | null\nexport function queryParentSelector<E extends Element = Element>(\n  element: HTMLElement | null,\n  selector: string,\n  maxDepth?: number,\n): E | null\nexport function queryParentSelector(\n  element: HTMLElement | null,\n  selector: string,\n  maxDepth = 10,\n): Element | null {\n  if (maxDepth <= 0 || element === null) {\n    return null\n  }\n\n  if (element.matches(selector)) {\n    return element as Element\n  }\n\n  return element.parentElement\n    ? queryParentSelector(element.parentElement, selector, maxDepth - 1)\n    : null\n}\n","import { animate } from '../utils/dom'\nimport { queryParentSelector } from '../utils/select'\n\n/**\n * Sometimes you need to prevent the user from interacting with other elements while an element is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.\n * You can set the `data-inert` attribute with selectors (comma separated) to control the `inert` attribute of elements matching your selectors.\n * @location functions.expand.with-inerts Expand controlling inert\n * @order 30\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"false\" aria-controls=\"target\">Expanded:</button>\n * <div id=\"target\" hidden data-inert=\"[data-inert-controlled],#inert-controlled-2\">Controlled Target</div>\n * <div data-inert-controlled=\"\"><button>Button 1.1</button><button>Button 1.2</button></div>\n * <div id=\"inert-controlled-2\"><button>Button 2.1</button><button>Button 2.2</button></div>\n * @code\n * <button aria-expanded=\"false\" aria-controls=\"target\">Expanded:</button>\n * <div id=\"target\" hidden data-inert=\"[data-inert-controlled],#inert-controlled-2\">Controlled Target</div>\n * <div data-inert-controlled=\"1\"><button>Button 1.1</button><button>Button 1.2</button></div>\n * <div id=\"inert-controlled-2\"><button>Button 2.1</button><button>Button 2.2</button></div>\n */\nfunction toggleInert(target: HTMLElement, show: boolean): void {\n  const inertSelector = target.getAttribute('data-inert')\n\n  if (!inertSelector) {\n    return\n  }\n\n  inertSelector.split(',').forEach(selector => {\n    // if the target is inside an element with the same selector, we don't want to remove the inert attribute\n    const activeParentWithSameSelector = !show\n      ? queryParentSelector(\n          target.parentElement,\n          `[data-inert=\"${selector}\"],[data-inert^=\"${selector},\"],[data-inert$=\",${selector}\"],[data-inert*=\",${selector},\"]`,\n        )\n      : null\n\n    if (activeParentWithSameSelector) {\n      return\n    }\n\n    document.querySelectorAll(selector).forEach(invertOn => {\n      if (show) {\n        invertOn.setAttribute('inert', '')\n      } else {\n        invertOn.removeAttribute('inert')\n      }\n    })\n  })\n}\n\n/**\n * If you want to control a specific aria you can combine [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute with [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) attribute.\n *\n * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`. Also the element with the id specified in the `aria-controls` attribute will be toggled between `aria-hidden=\"true\"` and `aria-hidden=\"false\"`. If no `aria-hidden` attribute is present, the `hidden` attribute will be used.`\n *\n * @location functions.expand.with-controls Expand with controls\n * @order 10\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"true\" aria-controls=\"target-aria-hidden\">Expanded:</button>\n * <div id=\"target-aria-hidden\" aria-hidden=\"false\">Controlled Target</div>\n * <hr>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Expanded:</button>\n * <div id=\"target-hidden\">Controlled Target</div>\n * @code\n * <button aria-expanded=\"true\" aria-controls=\"target-aria-hidden\">Expanded:</button>\n * <div id=\"target-aria-hidden\" aria-hidden=\"false\">Controlled Target</div>\n * <hr>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Expanded:</button>\n * <div id=\"target-hidden\">Controlled Target</div>\n */\n\n/**\n * You can add animations/transitions on the controlled element by adding the `data-animate` attribute with the animation name.\n * The animation name will be used to add the necessary classes to the element to trigger the animation.\n * Please refer to the animate function for more information, what classes will be added and when.\n *\n * @location functions.expand.with-animation Expand with animation\n * @order 20\n * @example\n * <style>\n *   .fade-enter-active,\n *   .fade-leave-active {\n *     transition: opacity 0.5s ease;\n *   }\n *\n *   .fade-enter-from,\n *   .fade-leave-to {\n *     opacity: 0;\n *   }\n * </style>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Toggle Controlled Area</button>\n * <div id=\"target-hidden\" data-animate=\"fade\">Controlled Target</div>\n */\nfunction toggleControlTarget(selector: string, show: boolean, callback: () => void): void {\n  const target = document.querySelector<HTMLElement>(selector)\n\n  if (!target) {\n    return\n  }\n\n  const animationName = target.getAttribute('data-animate')\n  const toggleHide = () => {\n    if (target.hasAttribute('aria-hidden')) {\n      target.setAttribute('aria-hidden', show ? 'false' : 'true')\n    } else if (show) {\n      target.removeAttribute('hidden')\n    } else {\n      target.setAttribute('hidden', '')\n    }\n\n    callback()\n  }\n\n  if (show) {\n    // set tabindex=0 for all elements with tabindex=-1 that are not inside an aria-hidden element\n    target\n      .querySelectorAll<HTMLElement>(\n        ':scope > [tabindex=\"-1\"], [tabindex=\"-1\"]:not([aria-hidden=\"true\"] [tabindex=\"-1\"], [hidden] [tabindex=\"-1\"])',\n      )\n      .forEach(el => {\n        el.setAttribute('tabindex', '0')\n      })\n  } else {\n    // set tabindex=-1 for all elements with tabindex=0\n    target.querySelectorAll<HTMLElement>('[tabindex=\"0\"]').forEach(el => {\n      el.setAttribute('tabindex', '-1')\n    })\n  }\n\n  toggleInert(target, show)\n\n  if (animationName) {\n    if (show) {\n      toggleHide()\n      animate(target, animationName, show)\n    } else {\n      animate(target, animationName, show, toggleHide)\n    }\n  } else {\n    toggleHide()\n  }\n}\n\n/**\n * Initialize expandable/collapsable elements by using the [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.\n *\n * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`.\n *\n * @location functions.expand Expand\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"false\">Expanded:</button>\n * @code\n * <button aria-expanded=\"false\">Expanded:</button>\n */\nexport function initExpand(): void {\n  document.querySelectorAll<HTMLElement>('[aria-expanded]').forEach(expander => {\n    const controlTarget = expander.getAttribute('aria-controls')\n    const toggle = (e: MouseEvent) => {\n      const expanded = expander.getAttribute('aria-expanded') === 'true'\n      const toggleExpanded = () => {\n        expander.setAttribute('aria-expanded', expanded ? 'false' : 'true') // when expanded we need to set false\n      }\n\n      // if data-hide-same-level is set, we need to klick all other expanded elements to close them\n      if (expander.parentElement && expander.hasAttribute('data-hide-same-level')) {\n        Array.from(expander.parentElement.querySelectorAll(':scope > [aria-expanded=\"true\"]'))\n          .filter(el => el !== expander && el !== e.relatedTarget)\n          .forEach(sibling => {\n            sibling.dispatchEvent(\n              new MouseEvent('click', { bubbles: true, relatedTarget: expander }),\n            )\n          })\n      }\n\n      if (controlTarget) {\n        toggleControlTarget(`#${controlTarget}`, !expanded, toggleExpanded)\n      } else {\n        toggleExpanded()\n      }\n    }\n\n    expander.addEventListener('click', toggle)\n\n    if (controlTarget) {\n      // select all controls inside the controlled area that have the same aria-controls attribute\n      document\n        .querySelectorAll<HTMLElement>(`#${controlTarget} [aria-controls=\"${controlTarget}\"]`)\n        .forEach(control => {\n          control.addEventListener('click', toggle)\n        })\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement) {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList.add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar() {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","import { initExample } from './services/example'\nimport { initExpand } from './services/expand'\nimport { initSidebar } from './services/sidebar'\nimport { ready } from './utils/dom'\n\nready(() => {\n  initExpand()\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ui-doc.cjs","sources":["../../../scripts/services/example.ts","../../../scripts/utils/dom.ts","../../../scripts/utils/select.ts","../../../scripts/services/expand.ts","../../../scripts/services/sidebar.ts","../../../scripts/app.ts"],"sourcesContent":["export function initExample(): void {\n  document.querySelectorAll<HTMLIFrameElement>('[data-example] > iframe').forEach(iframe => {\n    const document = iframe.contentDocument ?? iframe.contentWindow?.document\n\n    if (!document) {\n      return\n    }\n\n    const initHeightChange = (): void => {\n      let currentHeight = 0\n      const changeHeight = (): void => {\n        if (document.body.scrollHeight === currentHeight) {\n          return\n        }\n\n        currentHeight = document.body.scrollHeight\n        iframe.style.height = `${currentHeight}px`\n      }\n\n      // Initial height change\n      changeHeight()\n\n      // Use MutationObserver to detect changes in the DOM and change height if required\n      const mutationObserver = new MutationObserver(changeHeight)\n\n      mutationObserver.observe(document.body, {\n        attributes: true,\n        childList: true,\n        subtree: true,\n      })\n\n      // Use ResizeObserver to detect changes in the viewport and change height if required\n      const resizeObserver = new ResizeObserver(changeHeight)\n\n      resizeObserver.observe(document.body)\n    }\n\n    if (document.readyState === 'complete') {\n      initHeightChange()\n    } else {\n      iframe.addEventListener('load', initHeightChange)\n    }\n  })\n}\n","/**\n * Run function when dom is ready\n *\n * @param callback function to run when dom is ready\n */\nexport function ready(callback: (this: Document) => void): void {\n  if (document.readyState !== 'loading') {\n    callback.call(document)\n  } else {\n    document.addEventListener('DOMContentLoaded', callback)\n  }\n}\n\n/**\n * Animate an element using css animations/transitions. This function will add the necessary\n * classes to the element to trigger the animation.\n * When doing an entering animation following classes will be added:\n * - `[animation-name]-enter-active`\n * - `[animation-name]-enter-from`\n * - `[animation-name]-enter-to`\n * When doing a leaving animation following classes will be added:\n * - `[animation-name]-leave-active`\n * - `[animation-name]-leave-from`\n * - `[animation-name]-leave-to`\n *\n * The animation classes will be removed after the animation is done. If a callback is provided\n * it will be called after the animation is done.\n *\n * The `-active` class will stay on the element until the animation is done. The `-from` class will\n * be removed after the first frame and the `-to`\n * class will be added after the first frame.\n *\n * @param target html element to animate\n * @param animationName animation name to be used\n * @param entering determine if the elements animation should be entering or leaving\n * @param callback to be called after the animation is done\n */\nexport function animate(\n  target: HTMLElement,\n  animationName: string,\n  entering: boolean,\n  callback?: () => void,\n): void {\n  const animationState = entering ? 'enter' : 'leave'\n  const animateClassActive = `${animationName}-${animationState}-active`\n  const animateClassTo = `${animationName}-${animationState}-to`\n  const animateClassFrom = `${animationName}-${animationState}-from`\n  const afterAnimation = (): void => {\n    target.classList.remove(animateClassTo, animateClassActive)\n    target.removeEventListener('animationend', afterAnimation)\n    target.removeEventListener('transitionend', afterAnimation)\n\n    if (callback) {\n      callback()\n    }\n  }\n\n  target.addEventListener('animationend', afterAnimation)\n  target.addEventListener('transitionend', afterAnimation)\n\n  target.addEventListener('animationcancel', afterAnimation)\n  target.addEventListener('transitioncancel', afterAnimation)\n\n  target.classList.add(animateClassActive, animateClassFrom)\n  requestAnimationFrame(() => {\n    const styles = window.getComputedStyle(target)\n\n    // if the element has no transition or animation we can call the afterAnimation function in the\n    // next frame\n    if (['all', 'none'].includes(styles.transition) && styles.animationName === 'none') {\n      requestAnimationFrame(afterAnimation)\n    }\n\n    target.classList.remove(animateClassFrom)\n    target.classList.add(animateClassTo)\n  })\n}\n","/**\n * Query the first parent element that matches the selector\n *\n * @param element to search in\n * @param selector to be matched\n * @param maxDepth maximum depth to search\n * @returns element that matches the selector\n */\n\nexport function queryParentSelector<K extends keyof HTMLElementTagNameMap>(\n  element: HTMLElement | null,\n  selector: K,\n  maxDepth?: number,\n): HTMLElementTagNameMap[K] | null\nexport function queryParentSelector<K extends keyof SVGElementTagNameMap>(\n  element: HTMLElement | null,\n  selector: K,\n  maxDepth?: number,\n): SVGElementTagNameMap[K] | null\nexport function queryParentSelector<K extends keyof MathMLElementTagNameMap>(\n  element: HTMLElement | null,\n  selectors: K,\n  maxDepth?: number,\n): MathMLElementTagNameMap[K] | null\nexport function queryParentSelector<E extends Element = Element>(\n  element: HTMLElement | null,\n  selector: string,\n  maxDepth?: number,\n): E | null\nexport function queryParentSelector(\n  element: HTMLElement | null,\n  selector: string,\n  maxDepth = 10,\n): Element | null {\n  if (maxDepth <= 0 || element === null) {\n    return null\n  }\n\n  if (element.matches(selector)) {\n    return element as Element\n  }\n\n  return element.parentElement\n    ? queryParentSelector(element.parentElement, selector, maxDepth - 1)\n    : null\n}\n","import { animate } from '../utils/dom'\nimport { queryParentSelector } from '../utils/select'\n\n/**\n * Sometimes you need to prevent the user from interacting with other elements while an element\n * is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.\n * You can set the `data-inert` attribute with selectors (comma separated) to control the\n * `inert` attribute of elements matching your selectors.\n * @location functions.expand.with-inerts Expand controlling inert\n * @order 30\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"false\" aria-controls=\"target\">Expanded:</button>\n * <div id=\"target\" hidden data-inert=\"[data-inert-controlled],#inert-controlled-2\">Controlled Target</div>\n * <div data-inert-controlled=\"\"><button>Button 1.1</button><button>Button 1.2</button></div>\n * <div id=\"inert-controlled-2\"><button>Button 2.1</button><button>Button 2.2</button></div>\n * @code\n * <button aria-expanded=\"false\" aria-controls=\"target\">Expanded:</button>\n * <div id=\"target\" hidden data-inert=\"[data-inert-controlled],#inert-controlled-2\">Controlled Target</div>\n * <div data-inert-controlled=\"1\"><button>Button 1.1</button><button>Button 1.2</button></div>\n * <div id=\"inert-controlled-2\"><button>Button 2.1</button><button>Button 2.2</button></div>\n */\nfunction toggleInert(target: HTMLElement, show: boolean): void {\n  const inertSelector = target.getAttribute('data-inert')\n\n  if (inertSelector === null || inertSelector === '') {\n    return\n  }\n\n  inertSelector.split(',').forEach(selector => {\n    // if the target is inside an element with the same selector, we don't want to remove the inert attribute\n    const activeParentWithSameSelector = !show\n      ? queryParentSelector(\n          target.parentElement,\n          `[data-inert=\"${selector}\"],`\n          + `[data-inert^=\"${selector},\"],`\n          + `[data-inert$=\",${selector}\"],`\n          + `[data-inert*=\",${selector},\"]`,\n        )\n      : null\n\n    if (activeParentWithSameSelector) {\n      return\n    }\n\n    document.querySelectorAll(selector).forEach(invertOn => {\n      if (show) {\n        invertOn.setAttribute('inert', '')\n      } else {\n        invertOn.removeAttribute('inert')\n      }\n    })\n  })\n}\n\n/**\n * If you want to control a specific aria you can combine [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute with [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) attribute.\n *\n * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`. Also the element with the id specified in the `aria-controls` attribute will be toggled between `aria-hidden=\"true\"` and `aria-hidden=\"false\"`. If no `aria-hidden` attribute is present, the `hidden` attribute will be used.`\n *\n * @location functions.expand.with-controls Expand with controls\n * @order 10\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"true\" aria-controls=\"target-aria-hidden\">Expanded:</button>\n * <div id=\"target-aria-hidden\" aria-hidden=\"false\">Controlled Target</div>\n * <hr>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Expanded:</button>\n * <div id=\"target-hidden\">Controlled Target</div>\n * @code\n * <button aria-expanded=\"true\" aria-controls=\"target-aria-hidden\">Expanded:</button>\n * <div id=\"target-aria-hidden\" aria-hidden=\"false\">Controlled Target</div>\n * <hr>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Expanded:</button>\n * <div id=\"target-hidden\">Controlled Target</div>\n */\n\n/**\n * You can add animations/transitions on the controlled element by adding the `data-animate` attribute with the animation name.\n * The animation name will be used to add the necessary classes to the element to trigger the animation.\n * Please refer to the animate function for more information, what classes will be added and when.\n *\n * @location functions.expand.with-animation Expand with animation\n * @order 20\n * @example\n * <style>\n *   .fade-enter-active,\n *   .fade-leave-active {\n *     transition: opacity 0.5s ease;\n *   }\n *\n *   .fade-enter-from,\n *   .fade-leave-to {\n *     opacity: 0;\n *   }\n * </style>\n * <button aria-expanded=\"true\" aria-controls=\"target-hidden\">Toggle Controlled Area</button>\n * <div id=\"target-hidden\" data-animate=\"fade\">Controlled Target</div>\n */\nfunction toggleControlTarget(selector: string, show: boolean, callback: () => void): void {\n  const target = document.querySelector<HTMLElement>(selector)\n\n  if (!target) {\n    return\n  }\n\n  const animationName = target.getAttribute('data-animate')\n  const toggleHide = (): void => {\n    if (target.hasAttribute('aria-hidden')) {\n      target.setAttribute('aria-hidden', show ? 'false' : 'true')\n    } else if (show) {\n      target.removeAttribute('hidden')\n    } else {\n      target.setAttribute('hidden', '')\n    }\n\n    callback()\n  }\n\n  if (show) {\n    // set tabindex=0 for all elements with tabindex=-1 that are not inside an aria-hidden element\n    target\n      .querySelectorAll<HTMLElement>(\n        ':scope > [tabindex=\"-1\"], [tabindex=\"-1\"]:not([aria-hidden=\"true\"] [tabindex=\"-1\"], [hidden] [tabindex=\"-1\"])',\n      )\n      .forEach(el => {\n        el.setAttribute('tabindex', '0')\n      })\n  } else {\n    // set tabindex=-1 for all elements with tabindex=0\n    target.querySelectorAll<HTMLElement>('[tabindex=\"0\"]').forEach(el => {\n      el.setAttribute('tabindex', '-1')\n    })\n  }\n\n  toggleInert(target, show)\n\n  if (animationName !== null && animationName !== '') {\n    if (show) {\n      toggleHide()\n      animate(target, animationName, show)\n    } else {\n      animate(target, animationName, show, toggleHide)\n    }\n  } else {\n    toggleHide()\n  }\n}\n\n/**\n * Initialize expandable/collapsable elements by using the\n * [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.\n *\n * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will\n * be toggled between `true` and `false`.\n *\n * @location functions.expand Expand\n * @example\n * <style>\n * button::after {\n *   content: ' ' attr(aria-expanded);\n * }\n * </style>\n * <button aria-expanded=\"false\">Expanded:</button>\n * @code\n * <button aria-expanded=\"false\">Expanded:</button>\n */\nexport function initExpand(): void {\n  document.querySelectorAll<HTMLElement>('[aria-expanded]').forEach(expander => {\n    const controlTarget = expander.getAttribute('aria-controls')\n    const toggle = (e: MouseEvent): void => {\n      const expanded = expander.getAttribute('aria-expanded') === 'true'\n      const toggleExpanded = (): void => {\n        expander.setAttribute('aria-expanded', expanded ? 'false' : 'true') // when expanded we need to set false\n      }\n\n      // if data-hide-same-level is set, we need to klick all other expanded elements to close them\n      if (expander.parentElement && expander.hasAttribute('data-hide-same-level')) {\n        Array.from(expander.parentElement.querySelectorAll(':scope > [aria-expanded=\"true\"]'))\n          .filter(el => el !== expander && el !== e.relatedTarget)\n          .forEach(sibling => {\n            sibling.dispatchEvent(\n              new MouseEvent('click', { bubbles: true, relatedTarget: expander }),\n            )\n          })\n      }\n\n      if (controlTarget !== null && controlTarget !== '') {\n        toggleControlTarget(`#${controlTarget}`, !expanded, toggleExpanded)\n      } else {\n        toggleExpanded()\n      }\n    }\n\n    expander.addEventListener('click', toggle)\n\n    if (controlTarget !== null && controlTarget !== '') {\n      // select all controls inside the controlled area that have the same aria-controls attribute\n      document\n        .querySelectorAll<HTMLElement>(`#${controlTarget} [aria-controls=\"${controlTarget}\"]`)\n        .forEach(control => {\n          control.addEventListener('click', toggle)\n        })\n    }\n  })\n}\n","function createSidebar(sidebar: HTMLElement): void {\n  const links: Record<string, HTMLLinkElement> = {}\n  const observer = new IntersectionObserver(\n    entries => {\n      const activeEntries = entries.filter(entry => entry.isIntersecting)\n\n      if (activeEntries.length <= 0) {\n        return\n      }\n\n      Object.keys(links).forEach(id => {\n        links[id].classList.remove('active')\n      })\n\n      const activeLink = links[activeEntries[0].target.id]\n\n      activeLink.classList.add('active')\n      if (activeLink?.parentElement?.parentElement?.parentElement instanceof HTMLLIElement) {\n        activeLink.parentElement.parentElement.parentElement\n          .querySelector('a')\n          ?.classList\n          .add('active')\n      }\n    },\n    {\n      root: null,\n      rootMargin: '0px 0px -90% 0px',\n      threshold: 0.5,\n    },\n  )\n\n  sidebar.querySelectorAll<HTMLLinkElement>('a[href^=\"#\"]').forEach(link => {\n    const id = link.href.split('#')[1]\n    const target = document.getElementById(id)\n\n    if (target) {\n      observer.observe(target)\n      links[id] = link\n    }\n  })\n}\n\nexport function initSidebar(): void {\n  document.querySelectorAll('[data-sidebar]').forEach(sidebar => {\n    createSidebar(sidebar as HTMLElement)\n  })\n}\n","import { initExample } from './services/example'\nimport { initExpand } from './services/expand'\nimport { initSidebar } from './services/sidebar'\nimport { ready } from './utils/dom'\n\nready(() => {\n  initExpand()\n  initExample()\n  initSidebar()\n})\n"],"names":[],"mappings":"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"}

package/dist/assets/ui-doc.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(e,t,n,r){const a=n?"enter":"leave",i=`${t}-${a}-active`,o=`${t}-${a}-to`,l=`${t}-${a}-from`,d=()=>{e.classList.remove(o,i),e.removeEventListener("animationend",d),e.removeEventListener("transitionend",d),r&&r()};e.addEventListener("animationend",d),e.addEventListener("transitionend",d),e.addEventListener("animationcancel",d),e.addEventListener("transitioncancel",d),e.classList.add(i,l),requestAnimationFrame((()=>{const t=window.getComputedStyle(e);["all","none"].includes(t.transition)&&"none"===t.animationName&&requestAnimationFrame(d),e.classList.remove(l),e.classList.add(o)}))}function t(e,n,r=10){return r<=0||null===e?null:e.matches(n)?e:e.parentElement?t(e.parentElement,n,r-1):null}function n(e,n){const r=e.getAttribute("data-inert");r&&r.split(",").forEach((r=>{(n?null:t(e.parentElement,`[data-inert="${r}"],[data-inert^="${r},"],[data-inert$=",${r}"],[data-inert*=",${r},"]`))||document.querySelectorAll(r).forEach((e=>{n?e.setAttribute("inert",""):e.removeAttribute("inert")}))}))}function r(){document.querySelectorAll("[aria-expanded]").forEach((t=>{const r=t.getAttribute("aria-controls"),a=a=>{const i="true"===t.getAttribute("aria-expanded"),o=()=>{t.setAttribute("aria-expanded",i?"false":"true")};t.parentElement&&t.hasAttribute("data-hide-same-level")&&Array.from(t.parentElement.querySelectorAll(':scope > [aria-expanded="true"]')).filter((e=>e!==t&&e!==a.relatedTarget)).forEach((e=>{e.dispatchEvent(new MouseEvent("click",{bubbles:!0,relatedTarget:t}))})),r?function(t,r,a){const i=document.querySelector(t);if(!i)return;const o=i.getAttribute("data-animate"),l=()=>{i.hasAttribute("aria-hidden")?i.setAttribute("aria-hidden",r?"false":"true"):r?i.removeAttribute("hidden"):i.setAttribute("hidden",""),a()};r?i.querySelectorAll(':scope > [tabindex="-1"], [tabindex="-1"]:not([aria-hidden="true"] [tabindex="-1"], [hidden] [tabindex="-1"])').forEach((e=>{e.setAttribute("tabindex","0")})):i.querySelectorAll('[tabindex="0"]').forEach((e=>{e.setAttribute("tabindex","-1")})),n(i,r),o?r?(l(),e(i,o,r)):e(i,o,r,l):l()}(`#${r}`,!i,o):o()};t.addEventListener("click",a),r&&document.querySelectorAll(`#${r} [aria-controls="${r}"]`).forEach((e=>{e.addEventListener("click",a)}))}))}function a(){document.querySelectorAll("[data-sidebar]").forEach((e=>{!function(e){const t={},n=new IntersectionObserver((e=>{var n,r,a;const i=e.filter((e=>e.isIntersecting));if(i.length<=0)return;Object.keys(t).forEach((e=>{t[e].classList.remove("active")}));const o=t[i[0].target.id];o.classList.add("active"),(null===(r=null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.parentElement)||void 0===r?void 0:r.parentElement)instanceof HTMLLIElement&&(null===(a=o.parentElement.parentElement.parentElement.querySelector("a"))||void 0===a||a.classList.add("active"))}),{root:null,rootMargin:"0px 0px -90% 0px",threshold:.5});e.querySelectorAll('a[href^="#"]').forEach((e=>{const r=e.href.split("#")[1],a=document.getElementById(r);a&&(n.observe(a),t[r]=e)}))}(e)}))}var i;i=()=>{r(),document.querySelectorAll("[data-example] > iframe").forEach((e=>{var t,n;const r=null!==(t=e.contentDocument)&&void 0!==t?t:null===(n=e.contentWindow)||void 0===n?void 0:n.document;if(!r)return;const a=()=>{let t=0;const n=()=>{r.body.scrollHeight!==t&&(t=r.body.scrollHeight,e.style.height=`${t}px`)};n(),new MutationObserver(n).observe(r.body,{attributes:!0,childList:!0,subtree:!0}),new ResizeObserver(n).observe(r.body)};"complete"===r.readyState?a():e.addEventListener("load",a)})),a()},"loading"!==document.readyState?i.call(document):document.addEventListener("DOMContentLoaded",i)}();
+!function(){"use strict";function e(e,t,n,r){const a=n?"enter":"leave",i=`${t}-${a}-active`,o=`${t}-${a}-to`,l=`${t}-${a}-from`,d=()=>{e.classList.remove(o,i),e.removeEventListener("animationend",d),e.removeEventListener("transitionend",d),r&&r()};e.addEventListener("animationend",d),e.addEventListener("transitionend",d),e.addEventListener("animationcancel",d),e.addEventListener("transitioncancel",d),e.classList.add(i,l),requestAnimationFrame((()=>{const t=window.getComputedStyle(e);["all","none"].includes(t.transition)&&"none"===t.animationName&&requestAnimationFrame(d),e.classList.remove(l),e.classList.add(o)}))}function t(e,n,r=10){return r<=0||null===e?null:e.matches(n)?e:e.parentElement?t(e.parentElement,n,r-1):null}function n(e,n){const r=e.getAttribute("data-inert");null!==r&&""!==r&&r.split(",").forEach((r=>{(n?null:t(e.parentElement,`[data-inert="${r}"],[data-inert^="${r},"],[data-inert$=",${r}"],[data-inert*=",${r},"]`))||document.querySelectorAll(r).forEach((e=>{n?e.setAttribute("inert",""):e.removeAttribute("inert")}))}))}function r(){document.querySelectorAll("[aria-expanded]").forEach((t=>{const r=t.getAttribute("aria-controls"),a=a=>{const i="true"===t.getAttribute("aria-expanded"),o=()=>{t.setAttribute("aria-expanded",i?"false":"true")};t.parentElement&&t.hasAttribute("data-hide-same-level")&&Array.from(t.parentElement.querySelectorAll(':scope > [aria-expanded="true"]')).filter((e=>e!==t&&e!==a.relatedTarget)).forEach((e=>{e.dispatchEvent(new MouseEvent("click",{bubbles:!0,relatedTarget:t}))})),null!==r&&""!==r?function(t,r,a){const i=document.querySelector(t);if(!i)return;const o=i.getAttribute("data-animate"),l=()=>{i.hasAttribute("aria-hidden")?i.setAttribute("aria-hidden",r?"false":"true"):r?i.removeAttribute("hidden"):i.setAttribute("hidden",""),a()};r?i.querySelectorAll(':scope > [tabindex="-1"], [tabindex="-1"]:not([aria-hidden="true"] [tabindex="-1"], [hidden] [tabindex="-1"])').forEach((e=>{e.setAttribute("tabindex","0")})):i.querySelectorAll('[tabindex="0"]').forEach((e=>{e.setAttribute("tabindex","-1")})),n(i,r),null!==o&&""!==o?r?(l(),e(i,o,r)):e(i,o,r,l):l()}(`#${r}`,!i,o):o()};t.addEventListener("click",a),null!==r&&""!==r&&document.querySelectorAll(`#${r} [aria-controls="${r}"]`).forEach((e=>{e.addEventListener("click",a)}))}))}function a(){document.querySelectorAll("[data-sidebar]").forEach((e=>{!function(e){const t={},n=new IntersectionObserver((e=>{var n,r,a;const i=e.filter((e=>e.isIntersecting));if(i.length<=0)return;Object.keys(t).forEach((e=>{t[e].classList.remove("active")}));const o=t[i[0].target.id];o.classList.add("active"),(null===(r=null===(n=null==o?void 0:o.parentElement)||void 0===n?void 0:n.parentElement)||void 0===r?void 0:r.parentElement)instanceof HTMLLIElement&&(null===(a=o.parentElement.parentElement.parentElement.querySelector("a"))||void 0===a||a.classList.add("active"))}),{root:null,rootMargin:"0px 0px -90% 0px",threshold:.5});e.querySelectorAll('a[href^="#"]').forEach((e=>{const r=e.href.split("#")[1],a=document.getElementById(r);a&&(n.observe(a),t[r]=e)}))}(e)}))}var i;i=()=>{r(),document.querySelectorAll("[data-example] > iframe").forEach((e=>{var t,n;const r=null!==(t=e.contentDocument)&&void 0!==t?t:null===(n=e.contentWindow)||void 0===n?void 0:n.document;if(!r)return;const a=()=>{let t=0;const n=()=>{r.body.scrollHeight!==t&&(t=r.body.scrollHeight,e.style.height=`${t}px`)};n(),new MutationObserver(n).observe(r.body,{attributes:!0,childList:!0,subtree:!0}),new ResizeObserver(n).observe(r.body)};"complete"===r.readyState?a():e.addEventListener("load",a)})),a()},"loading"!==document.readyState?i.call(document):document.addEventListener("DOMContentLoaded",i)}();

package/dist/assets/ui-doc.mjs

@@ -50,7 +50,8 @@ function ready(callback) {
     }
 }
 /**
- * Animate an element using css animations/transitions. This function will add the necessary classes to the element to trigger the animation.
+ * Animate an element using css animations/transitions. This function will add the necessary
+ * classes to the element to trigger the animation.
  * When doing an entering animation following classes will be added:
  * - `[animation-name]-enter-active`
  * - `[animation-name]-enter-from`
@@ -60,9 +61,11 @@ function ready(callback) {
  * - `[animation-name]-leave-from`
  * - `[animation-name]-leave-to`
  *
- * The animation classes will be removed after the animation is done. If a callback is provided it will be called after the animation is done.
+ * The animation classes will be removed after the animation is done. If a callback is provided
+ * it will be called after the animation is done.
  *
- * The `-active` class will stay on the element until the animation is done. The `-from` class will be removed after the first frame and the `-to`
+ * The `-active` class will stay on the element until the animation is done. The `-from` class will
+ * be removed after the first frame and the `-to`
  * class will be added after the first frame.
  *
  * @param target html element to animate
@@ -90,7 +93,8 @@ function animate(target, animationName, entering, callback) {
     target.classList.add(animateClassActive, animateClassFrom);
     requestAnimationFrame(() => {
         const styles = window.getComputedStyle(target);
-        // if the element has no transition or animation we can call the afterAnimation function in the next frame
+        // if the element has no transition or animation we can call the afterAnimation function in the
+        // next frame
         if (['all', 'none'].includes(styles.transition) && styles.animationName === 'none') {
             requestAnimationFrame(afterAnimation);
         }
@@ -120,8 +124,10 @@ function queryParentSelector(element, selector, maxDepth = 10) {
 }
 
 /**
- * Sometimes you need to prevent the user from interacting with other elements while an element is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.
- * You can set the `data-inert` attribute with selectors (comma separated) to control the `inert` attribute of elements matching your selectors.
+ * Sometimes you need to prevent the user from interacting with other elements while an element
+ * is expanded. Then you need the [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert) attribute.
+ * You can set the `data-inert` attribute with selectors (comma separated) to control the
+ * `inert` attribute of elements matching your selectors.
  * @location functions.expand.with-inerts Expand controlling inert
  * @order 30
  * @example
@@ -142,13 +148,16 @@ function queryParentSelector(element, selector, maxDepth = 10) {
  */
 function toggleInert(target, show) {
     const inertSelector = target.getAttribute('data-inert');
-    if (!inertSelector) {
+    if (inertSelector === null || inertSelector === '') {
         return;
     }
     inertSelector.split(',').forEach(selector => {
         // if the target is inside an element with the same selector, we don't want to remove the inert attribute
         const activeParentWithSameSelector = !show
-            ? queryParentSelector(target.parentElement, `[data-inert="${selector}"],[data-inert^="${selector},"],[data-inert$=",${selector}"],[data-inert*=",${selector},"]`)
+            ? queryParentSelector(target.parentElement, `[data-inert="${selector}"],`
+                + `[data-inert^="${selector},"],`
+                + `[data-inert$=",${selector}"],`
+                + `[data-inert*=",${selector},"]`)
             : null;
         if (activeParentWithSameSelector) {
             return;
@@ -243,7 +252,7 @@ function toggleControlTarget(selector, show, callback) {
         });
     }
     toggleInert(target, show);
-    if (animationName) {
+    if (animationName !== null && animationName !== '') {
         if (show) {
             toggleHide();
             animate(target, animationName, show);
@@ -257,9 +266,11 @@ function toggleControlTarget(selector, show, callback) {
     }
 }
 /**
- * Initialize expandable/collapsable elements by using the [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
+ * Initialize expandable/collapsable elements by using the
+ * [aria-expanded](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded) attribute.
  *
- * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will be toggled between `true` and `false`.
+ * When an element with the `aria-expanded` attribute is clicked, the value of the attribute will
+ * be toggled between `true` and `false`.
  *
  * @location functions.expand Expand
  * @example
@@ -288,7 +299,7 @@ function initExpand() {
                     sibling.dispatchEvent(new MouseEvent('click', { bubbles: true, relatedTarget: expander }));
                 });
             }
-            if (controlTarget) {
+            if (controlTarget !== null && controlTarget !== '') {
                 toggleControlTarget(`#${controlTarget}`, !expanded, toggleExpanded);
             }
             else {
@@ -296,7 +307,7 @@ function initExpand() {
             }
         };
         expander.addEventListener('click', toggle);
-        if (controlTarget) {
+        if (controlTarget !== null && controlTarget !== '') {
             // select all controls inside the controlled area that have the same aria-controls attribute
             document
                 .querySelectorAll(`#${controlTarget} [aria-controls="${controlTarget}"]`)