tree-element 0.3.0 → 0.3.2

package/README.md

@@ -88,7 +88,7 @@ new TreeElement({
 | `autoOpen`        | `false`                 | `true` opens everything, a number opens that many levels (`0` is the first level) |
 | `buttonLeft`      | `true`                  | Put the open/close button left of the title                                       |
 | `classPrefix`     | `"tree-element"`        | The prefix of all css classes                                                     |
-| `closedIcon`      | `►` (`◄` in rtl)        | Html string or element                                                            |
+| `closedIcon`      | svg triangle ▶ (◀ rtl)  | Html string or element                                                            |
 | `commonClassName` | `"tree-element-common"` | The class that every element gets                                                 |
 | `data`            |                         | The nodes to display                                                              |
 | `dataFilter`      |                         | Transforms the response of `dataUrl` into node data                               |
@@ -97,7 +97,7 @@ new TreeElement({
 | `keyboardSupport` | `true`                  | Navigate with the keyboard                                                        |
 | `nodeClass`       | `Node`                  | Subclass of `Node` to use for nodes                                               |
 | `openFolderDelay` | `500`                   | Milliseconds before a folder opens while dragging over it. `false` disables it    |
-| `openedIcon`      | `▼`                     | Html string or element                                                            |
+| `openedIcon`      | svg triangle ▼          | Html string or element                                                            |
 | `rtl`             | `data-rtl` attribute    | Right-to-left rendering                                                           |
 | `saveState`       | `false`                 | `true`, or a string to use as the storage key                                     |
 | `selectable`      | `true`                  | Allow selecting nodes                                                             |

package/lib/index.js

@@ -1,5 +1,5 @@
 /*
-Tree-element 0.3.0
+Tree-element 0.3.2
 
 Copyright 2026 Marco Braak
 

package/lib/options.d.ts

@@ -77,8 +77,8 @@ export interface TreeElementOptions {
      *
      * Type: `HTMLElement | string`
      *
-     * @defaultValue `"►"` (`►`), or `"◀"` (`◀`) when `rtl` is
-     * true.
+     * @defaultValue An svg triangle pointing right, or left when `rtl` is
+     * true. It is sized in em and filled with `currentColor`.
      * @group Appearance
      */
     closedIcon?: IconElement;
@@ -238,7 +238,8 @@ export interface TreeElementOptions {
      *
      * Type: `HTMLElement | string`
      *
-     * @defaultValue `"▼"` (`▼`)
+     * @defaultValue An svg triangle pointing down, sized in em and filled with
+     * `currentColor`.
      * @group Appearance
      */
     openedIcon?: IconElement;

package/lib/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../src/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,OAAO,KAAK,QAAQ,EAAE,CAAC;AAEvD,MAAM,MAAM,OAAO,GAAG,eAAe,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,MAAM,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,GAAG,SAAS,CAAC;AAE9D,MAAM,MAAM,WAAW,GAAG,CACxB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,IAAI,EAChB,YAAY,EAAE,MAAM,KACjB,OAAO,CAAC;AAEb,MAAM,MAAM,eAAe,GAAG,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,CACvB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,WAAW,EACf,UAAU,EAAE,OAAO,KAChB,IAAI,CAAC;AAEV,MAAM,MAAM,qBAAqB,GAAG,CAAC,MAAM,MAAM,CAAC,GAAG,SAAS,CAAC;AAE/D,MAAM,MAAM,cAAc,GAAG,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;AAE1D,MAAM,MAAM,qBAAqB,GAAG,CAAC,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,kBAAkB;IACjC;;;;;;;OAOG;IACH,cAAc,EAAE,cAAc,CAAC;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B;;;;;;OAMG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;;;;;OASG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;OAKG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;OAMG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,SAAS,EAAE,OAAO,IAAI,CAAC;IACvB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;;;;;;OAOG;IACH,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;IAC9C;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;;;;OAMG;IACH,eAAe,EAAE,KAAK,GAAG,MAAM,CAAC;IAChC;;;;;OAKG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;;;;OAOG;IACH,SAAS,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,eAAe,EAAE,OAAO,CAAC;IACzB;;;;;OAKG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;;;;OAOG;IACH,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,KAAK,eAAe,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM,CAAC"}

package/lib/requestUrl.d.ts

@@ -1,5 +1,4 @@
 declare class RequestUrl {
-    private isAbsolute;
     private url;
     constructor(inputUrl: string);
     setSearchParam(key: string, value: string): void;

package/lib/requestUrl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"requestUrl.d.ts","sourceRoot":"","sources":["../src/requestUrl.ts"],"names":[],"mappings":"AAQA,cAAM,UAAU;IACd,OAAO,CAAC,UAAU,CAAU;IAC5B,OAAO,CAAC,GAAG,CAAM;gBAEL,QAAQ,EAAE,MAAM;IAU5B,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAIzC,KAAK;CAKN;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"requestUrl.d.ts","sourceRoot":"","sources":["../src/requestUrl.ts"],"names":[],"mappings":"AAGA,cAAM,UAAU;IACd,OAAO,CAAC,GAAG,CAAM;gBAEL,QAAQ,EAAE,MAAM;IAI5B,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAIzC,KAAK;CAGN;AAED,eAAe,UAAU,CAAC"}

package/lib/requestUrl.js

@@ -1,24 +1,15 @@
-// Url class for absolute and relative urls.
+// Url of a request. A relative url is resolved against the page, like a link
+// or `fetch` would, so it also works when the page is in a subdirectory.
 
-let isAbsoluteUrl = inputUrl => {
-  return URL.canParse(inputUrl);
-};
-let LOCALHOST = "http://localhost";
 class RequestUrl {
   constructor(inputUrl) {
-    if (isAbsoluteUrl(inputUrl)) {
-      this._url = new URL(inputUrl);
-      this._isAbsolute = true;
-    } else {
-      this._url = new URL(inputUrl, LOCALHOST);
-      this._isAbsolute = false;
-    }
+    this._url = new URL(inputUrl, document.baseURI);
   }
   _setSearchParam(key, value) {
     this._url.searchParams.set(key, value);
   }
   _value() {
-    return this._isAbsolute ? this._url.href : this._url.href.slice(LOCALHOST.length);
+    return this._url.href;
   }
 }
 

package/lib/requestUrl.js.map

@@ -1 +1 @@
-{"version":3,"file":"requestUrl.js","sources":["../src/requestUrl.ts"],"sourcesContent":["// Url class for absolute and relative urls.\n\nconst isAbsoluteUrl = (inputUrl: string) => {\n  return URL.canParse(inputUrl);\n};\n\nconst LOCALHOST = \"http://localhost\";\n\nclass RequestUrl {\n  private isAbsolute: boolean;\n  private url: URL;\n\n  constructor(inputUrl: string) {\n    if (isAbsoluteUrl(inputUrl)) {\n      this.url = new URL(inputUrl);\n      this.isAbsolute = true;\n    } else {\n      this.url = new URL(inputUrl, LOCALHOST);\n      this.isAbsolute = false;\n    }\n  }\n\n  setSearchParam(key: string, value: string) {\n    this.url.searchParams.set(key, value);\n  }\n\n  value() {\n    return this.isAbsolute\n      ? this.url.href\n      : this.url.href.slice(LOCALHOST.length);\n  }\n}\n\nexport default RequestUrl;\n"],"names":["url","isAbsolute","setSearchParam","value"],"mappings":"AAAA;;AAEA,IAAM,aAAa,GAAI,QAAgB,IAAK;AAC1C,EAAA,OAAO,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC;AAC/B,CAAC;AAED,IAAM,SAAS,GAAG,kBAAkB;AAEpC,MAAM,UAAU,CAAC;EAIf,WAAW,CAAC,QAAgB,EAAE;AAC5B,IAAA,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE;AAC3B,MAAA,IAAI,CAACA,IAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC;MAC5B,IAAI,CAACC,WAAU,GAAG,IAAI;AACxB,IAAA,CAAC,MAAM;MACL,IAAI,CAACD,IAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC;MACvC,IAAI,CAACC,WAAU,GAAG,KAAK;AACzB,IAAA;AACF,EAAA;AAEAC,EAAAA,eAAcA,CAAC,GAAW,EAAE,KAAa,EAAE;IACzC,IAAI,CAACF,IAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC;AACvC,EAAA;AAEAG,EAAAA,MAAKA,GAAG;IACN,OAAO,IAAI,CAACF,WAAU,GAClB,IAAI,CAACD,IAAG,CAAC,IAAI,GACb,IAAI,CAACA,IAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;AAC3C,EAAA;AACF;;"}
+{"version":3,"file":"requestUrl.js","sources":["../src/requestUrl.ts"],"sourcesContent":["// Url of a request. A relative url is resolved against the page, like a link\n// or `fetch` would, so it also works when the page is in a subdirectory.\n\nclass RequestUrl {\n  private url: URL;\n\n  constructor(inputUrl: string) {\n    this.url = new URL(inputUrl, document.baseURI);\n  }\n\n  setSearchParam(key: string, value: string) {\n    this.url.searchParams.set(key, value);\n  }\n\n  value() {\n    return this.url.href;\n  }\n}\n\nexport default RequestUrl;\n"],"names":["url","setSearchParam","value"],"mappings":"AAAA;AACA;;AAEA,MAAM,UAAU,CAAC;EAGf,WAAW,CAAC,QAAgB,EAAE;IAC5B,IAAI,CAACA,IAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC;AAChD,EAAA;AAEAC,EAAAA,eAAcA,CAAC,GAAW,EAAE,KAAa,EAAE;IACzC,IAAI,CAACD,IAAG,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC;AACvC,EAAA;AAEAE,EAAAA,MAAKA,GAAG;AACN,IAAA,OAAO,IAAI,CAACF,IAAG,CAAC,IAAI;AACtB,EAAA;AACF;;"}

package/lib/setDefaultOptions.d.ts

@@ -1,4 +1,7 @@
 import type { TreeElementOptions } from "./options.js";
+export declare const triangleDown: string;
+export declare const triangleLeft: string;
+export declare const triangleRight: string;
 declare const setDefaultOptions: (htmlElement: HTMLElement, inputOptions: Partial<TreeElementOptions>) => TreeElementOptions;
 export default setDefaultOptions;
 //# sourceMappingURL=setDefaultOptions.d.ts.map

package/lib/setDefaultOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setDefaultOptions.d.ts","sourceRoot":"","sources":["../src/setDefaultOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AA6CpD,QAAA,MAAM,iBAAiB,GACrB,aAAa,WAAW,EACxB,cAAc,OAAO,CAAC,kBAAkB,CAAC,KACxC,kBAaF,CAAC;AA4BF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"setDefaultOptions.d.ts","sourceRoot":"","sources":["../src/setDefaultOptions.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAapD,eAAO,MAAM,YAAY,QAAoC,CAAC;AAC9D,eAAO,MAAM,YAAY,QAAoC,CAAC;AAC9D,eAAO,MAAM,aAAa,QAAoC,CAAC;AAsC/D,QAAA,MAAM,iBAAiB,GACrB,aAAa,WAAW,EACxB,cAAc,OAAO,CAAC,kBAAkB,CAAC,KACxC,kBAaF,CAAC;AAuBF,eAAe,iBAAiB,CAAC"}

package/lib/setDefaultOptions.js

@@ -1,6 +1,15 @@
 import { DEFAULT_CLASS_PREFIX } from './classNames.js';
 import { Node } from './node.js';
 
+/* The default icons are svg instead of text: the triangle characters come
+ * from different fonts on each platform, so they differ in shape and size.
+ * They are sized in em to follow the font size, and use currentColor to follow
+ * --tree-element-toggler-color.
+ */
+let triangle = points => `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+let triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+let triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+let triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
 let defaults = {
   animationSpeed: "fast",
   autoEscape: true,
@@ -9,9 +18,7 @@ let defaults = {
   buttonLeft: true,
   classPrefix: DEFAULT_CLASS_PREFIX,
   // the prefix of all css classes
-  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-  // https://www.fileformat.info/info/unicode/char/25ba/index.htm
-  // closedIcon: undefined,
+  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon
   // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
   // data: undefined,
   // dataFilter: undefined,
@@ -28,11 +35,9 @@ let defaults = {
   // onGetStateFromStorage: undefined,
   // onIsMoveHandle: undefined,
   // onSetStateFromStorage: undefined,
-  // openedIcon: undefined,
+  // openedIcon: undefined, // the default is a triangle pointing down
   openFolderDelay: 500,
   // The delay for opening a folder during drag and drop; the value is in milliseconds
-  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-  // https://www.fileformat.info/info/unicode/char/25bc/index.htm
   // rtl: undefined, // right-to-left support; true / false (default)
   saveState: false,
   // true / false / string (local storage key; the default key is "tree")
@@ -55,7 +60,7 @@ let setDefaultOptions = (htmlElement, inputOptions) => {
   options.dataUrl ??= htmlElement.dataset.url;
   options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
   options.closedIcon ??= getDefaultClosedIcon(options);
-  options.openedIcon ??= "&#x25bc;";
+  options.openedIcon ??= triangleDown;
   return options;
 };
 
@@ -63,12 +68,7 @@ let setDefaultOptions = (htmlElement, inputOptions) => {
 let getDefaultAnimationSpeed = () => prefersReducedMotion() ? 0 : defaults.animationSpeed;
 let prefersReducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 let getDefaultClosedIcon = options => {
-  if (options.rtl) {
-    // triangle to the left
-    return "&#x25c0;";
-  }
-  // triangle to the right
-  return "&#x25ba;";
+  return options.rtl ? triangleLeft : triangleRight;
 };
 let getRtlOptionFromHTMLElement = htmlElement => {
   let dataRtl = htmlElement.dataset.rtl;
@@ -78,5 +78,5 @@ let getRtlOptionFromHTMLElement = htmlElement => {
   return dataRtl === "false" ? false : Boolean(dataRtl);
 };
 
-export { setDefaultOptions as default };
+export { setDefaultOptions as default, triangleDown, triangleLeft, triangleRight };
 //# sourceMappingURL=setDefaultOptions.js.map

package/lib/setDefaultOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { AnimationSpeed } from \"./animation\";\nimport type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER\n  // https://www.fileformat.info/info/unicode/char/25ba/index.htm\n  // closedIcon: undefined,\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined,\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE\n  // https://www.fileformat.info/info/unicode/char/25bc/index.htm\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = {\n    ...defaults,\n    ...inputOptions,\n    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),\n  };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= \"&#x25bc;\";\n\n  return options;\n};\n\n// No animation when the user asked the system for reduced motion\nconst getDefaultAnimationSpeed = (): AnimationSpeed =>\n  prefersReducedMotion() ? 0 : defaults.animationSpeed;\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window.matchMedia === \"function\" &&\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  if (options.rtl) {\n    // triangle to the left\n    return \"&#x25c0;\";\n  }\n  // triangle to the right\n  return \"&#x25ba;\";\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  }\n  return dataRtl === \"false\" ? false : Boolean(dataRtl);\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAMA,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA;AACA;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AACd,IAAA,GAAG,QAAQ;AACX,IAAA,GAAG,YAAY;AACf,IAAA,cAAc,EAAE,YAAY,CAAC,cAAc,IAAI,wBAAwB;GACxE;AAED,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,UAAU;AAEjC,EAAA,OAAO,OAAO;AAChB;;AAEA;AACA,IAAM,wBAAwB,GAAG,MAC/B,oBAAoB,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,cAAc;AAEtD,IAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IACvC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;AAE/D,IAAM,oBAAoB,GAAI,OAA2B,IAAa;EACpE,IAAI,OAAO,CAAC,GAAG,EAAE;AACf;AACA,IAAA,OAAO,UAAU;AACnB,EAAA;AACA;AACA,EAAA,OAAO,UAAU;AACnB,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;EACA,OAAO,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AACvD,CAAC;;"}
+{"version":3,"file":"setDefaultOptions.js","sources":["../src/setDefaultOptions.ts"],"sourcesContent":["import type { AnimationSpeed } from \"./animation\";\nimport type { TreeElementOptions } from \"./options\";\n\nimport { DEFAULT_CLASS_PREFIX } from \"./classNames\";\nimport { Node } from \"./node\";\n\n/* The default icons are svg instead of text: the triangle characters come\n * from different fonts on each platform, so they differ in shape and size.\n * They are sized in em to follow the font size, and use currentColor to follow\n * --tree-element-toggler-color.\n */\nconst triangle = (points: string): string =>\n  `<svg width=\"0.8em\" height=\"0.8em\" viewBox=\"0 0 10 10\" focusable=\"false\"><polygon points=\"${points}\" fill=\"currentColor\"/></svg>`;\n\nexport const triangleDown = triangle(\"0.5,0.5 9.5,0.5 5,9.5\");\nexport const triangleLeft = triangle(\"9.5,0.5 9.5,9.5 0.5,5\");\nexport const triangleRight = triangle(\"0.5,0.5 0.5,9.5 9.5,5\");\n\nconst defaults: TreeElementOptions = {\n  animationSpeed: \"fast\",\n  autoEscape: true,\n  autoOpen: false, // true / false / int (open n levels starting at 0)\n  buttonLeft: true,\n  classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes\n  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon\n  // commonClassName: undefined, // the class of every element; the default is \"<classPrefix>-common\"\n  // data: undefined,\n  // dataFilter: undefined,\n  // dataUrl: undefined,\n  dragAndDrop: false,\n  keyboardSupport: true,\n  nodeClass: Node,\n  // onCanMove: undefined, // Can this node be moved?\n  // onCanMoveTo: undefined, // Can this node be moved to this position? function(moved_node, target_node, position)\n  // onCanSelectNode: undefined,\n  // onCreateLi: undefined,\n  // onDragMove: undefined,\n  // onDragStop: undefined,\n  // onGetStateFromStorage: undefined,\n  // onIsMoveHandle: undefined,\n  // onSetStateFromStorage: undefined,\n  // openedIcon: undefined, // the default is a triangle pointing down\n  openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds\n  // rtl: undefined, // right-to-left support; true / false (default)\n  saveState: false, // true / false / string (local storage key; the default key is \"tree\")\n  selectable: true,\n  showEmptyFolder: false,\n  slide: true, // must display slide animation?\n  startDndDelay: 300, // The delay for starting dnd (in milliseconds)\n  tabIndex: 0,\n  // treeClassName: undefined, // the class of the root element; the default is classPrefix\n  useContextMenu: true,\n};\n\nconst setDefaultOptions = (\n  htmlElement: HTMLElement,\n  inputOptions: Partial<TreeElementOptions>,\n): TreeElementOptions => {\n  const options = {\n    ...defaults,\n    ...inputOptions,\n    animationSpeed: inputOptions.animationSpeed ?? getDefaultAnimationSpeed(),\n  };\n\n  options.dataUrl ??= htmlElement.dataset.url;\n  options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);\n  options.closedIcon ??= getDefaultClosedIcon(options);\n  options.openedIcon ??= triangleDown;\n\n  return options;\n};\n\n// No animation when the user asked the system for reduced motion\nconst getDefaultAnimationSpeed = (): AnimationSpeed =>\n  prefersReducedMotion() ? 0 : defaults.animationSpeed;\n\nconst prefersReducedMotion = (): boolean =>\n  typeof window.matchMedia === \"function\" &&\n  window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\nconst getDefaultClosedIcon = (options: TreeElementOptions): string => {\n  return options.rtl ? triangleLeft : triangleRight;\n};\n\nconst getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {\n  const dataRtl = htmlElement.dataset.rtl;\n\n  if (dataRtl == \"\") {\n    return true;\n  }\n  return dataRtl === \"false\" ? false : Boolean(dataRtl);\n};\n\nexport default setDefaultOptions;\n"],"names":[],"mappings":";;;AAMA;AACA;AACA;AACA;AACA;AACA,IAAM,QAAQ,GAAI,MAAc,IAC9B,CAAA,yFAAA,EAA4F,MAAM,CAAA,6BAAA,CAA+B;IAEtH,YAAY,GAAG,QAAQ,CAAC,uBAAuB;IAC/C,YAAY,GAAG,QAAQ,CAAC,uBAAuB;IAC/C,aAAa,GAAG,QAAQ,CAAC,uBAAuB;AAE7D,IAAM,QAA4B,GAAG;AACnC,EAAA,cAAc,EAAE,MAAM;AACtB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,QAAQ,EAAE,KAAK;AAAE;AACjB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,WAAW,EAAE,oBAAoB;AAAE;AACnC;AACA;AACA;AACA;AACA;AACA,EAAA,WAAW,EAAE,KAAK;AAClB,EAAA,eAAe,EAAE,IAAI;AACrB,EAAA,SAAS,EAAE,IAAI;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,eAAe,EAAE,GAAG;AAAE;AACtB;AACA,EAAA,SAAS,EAAE,KAAK;AAAE;AAClB,EAAA,UAAU,EAAE,IAAI;AAChB,EAAA,eAAe,EAAE,KAAK;AACtB,EAAA,KAAK,EAAE,IAAI;AAAE;AACb,EAAA,aAAa,EAAE,GAAG;AAAE;AACpB,EAAA,QAAQ,EAAE,CAAC;AACX;AACA,EAAA,cAAc,EAAE;AAClB,CAAC;AAED,IAAM,iBAAiB,GAAG,CACxB,WAAwB,EACxB,YAAyC,KAClB;AACvB,EAAA,IAAM,OAAO,GAAG;AACd,IAAA,GAAG,QAAQ;AACX,IAAA,GAAG,YAAY;AACf,IAAA,cAAc,EAAE,YAAY,CAAC,cAAc,IAAI,wBAAwB;GACxE;AAED,EAAA,OAAO,CAAC,OAAO,KAAK,WAAW,CAAC,OAAO,CAAC,GAAG;AAC3C,EAAA,OAAO,CAAC,GAAG,KAAK,2BAA2B,CAAC,WAAW,CAAC;AACxD,EAAA,OAAO,CAAC,UAAU,KAAK,oBAAoB,CAAC,OAAO,CAAC;EACpD,OAAO,CAAC,UAAU,KAAK,YAAY;AAEnC,EAAA,OAAO,OAAO;AAChB;;AAEA;AACA,IAAM,wBAAwB,GAAG,MAC/B,oBAAoB,EAAE,GAAG,CAAC,GAAG,QAAQ,CAAC,cAAc;AAEtD,IAAM,oBAAoB,GAAG,MAC3B,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IACvC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO;AAE/D,IAAM,oBAAoB,GAAI,OAA2B,IAAa;AACpE,EAAA,OAAO,OAAO,CAAC,GAAG,GAAG,YAAY,GAAG,aAAa;AACnD,CAAC;AAED,IAAM,2BAA2B,GAAI,WAAwB,IAAc;AACzE,EAAA,IAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG;EAEvC,IAAI,OAAO,IAAI,EAAE,EAAE;AACjB,IAAA,OAAO,IAAI;AACb,EAAA;EACA,OAAO,OAAO,KAAK,OAAO,GAAG,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AACvD,CAAC;;"}

package/lib/version.d.ts

@@ -1,3 +1,3 @@
-declare const version = "0.3.0";
+declare const version = "0.3.2";
 export default version;
 //# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -1,5 +1,5 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-let version = "0.3.0";
+let version = "0.3.2";
 
 export { version as default };
 //# sourceMappingURL=version.js.map

package/lib/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.3.0\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["// Generated by config/generateVersion.mjs. Do not edit.\nconst version = \"0.3.2\";\n\nexport default version;\n"],"names":[],"mappings":"AAAA;AACA,IAAM,OAAO,GAAG;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tree-element",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Tree widget in plain javascript",
   "keywords": [
     "tree"
@@ -63,13 +63,13 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
     "@babel/cli": "^8.0.6",
-    "@babel/core": "^8.0.6",
-    "@babel/preset-env": "^8.0.6",
-    "@babel/preset-typescript": "^8.0.1",
+    "@babel/core": "^8.0.7",
+    "@babel/preset-env": "^8.0.7",
+    "@babel/preset-typescript": "^8.0.7",
     "@cspell/eslint-plugin": "^10.3.6",
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.63.0",
+    "@playwright/test": "^1.64.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
@@ -77,12 +77,12 @@
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/user-event": "^14.6.7",
     "@types/debug": "^4.1.13",
-    "@types/node": "^26.6.4",
+    "@types/node": "^26.6.5",
     "@vitest/coverage-istanbul": "^5.0.3",
     "@vitest/eslint-plugin": "^1.6.27",
-    "axe-core": "^4.13.0",
+    "axe-core": "^4.14.0",
     "babel-plugin-istanbul": "^8.0.0",
-    "babel-plugin-prefix-private-members": "^0.3.0",
+    "babel-plugin-prefix-private-members": "^0.3.1",
     "eslint": "^10.12.0",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-compat": "^7.0.2",
@@ -91,32 +91,32 @@
     "eslint-plugin-jest-extended": "github:mbraak/eslint-plugin-jest-extended#modernize",
     "eslint-plugin-no-unsanitized": "^4.1.5",
     "eslint-plugin-perfectionist": "^5.12.1",
-    "eslint-plugin-playwright": "^2.12.0",
+    "eslint-plugin-playwright": "^2.12.1",
     "eslint-plugin-testing-library": "^7.16.2",
     "eslint-plugin-tsdoc": "^0.5.4",
     "eslint-plugin-unicorn": "^77.0.0",
     "jest-extended": "^7.0.0",
-    "jsdom": "^30.1.1",
+    "jsdom": "^30.1.2",
     "jsdom-testing-mocks": "^1.16.0",
     "jsonfile": "^6.2.1",
     "kiira": "^0.6.0",
     "kiira-core": "^0.6.0",
     "lodash": "^4.18.1",
-    "msw": "^3.0.2",
-    "postcss": "^8.5.28",
+    "msw": "^3.0.3",
+    "postcss": "^8.5.29",
     "postcss-cli": "^12.0.0",
     "postcss-import": "^17.0.0",
     "postcss-load-config": "^6.0.1",
     "postcss-nested": "^8.0.1",
-    "prettier": "^3.9.9",
-    "rollup": "^4.64.0",
+    "prettier": "^3.9.10",
+    "rollup": "^4.64.5",
     "rollup-plugin-serve": "^3.0.0",
     "rollup-plugin-tsconfig-paths": "^1.5.2",
     "tslib": "^2.8.1",
     "typedoc": "^0.28.20",
     "typedoc-plugin-markdown": "^4.13.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.71.0",
+    "typescript-eslint": "^8.71.1",
     "vitepress": "^1.6.4",
     "vitest": "^5.0.3"
   }

package/src/options.ts

@@ -97,8 +97,8 @@ export interface TreeElementOptions {
    *
    * Type: `HTMLElement | string`
    *
-   * @defaultValue `"►"` (`►`), or `"◀"` (`◀`) when `rtl` is
-   * true.
+   * @defaultValue An svg triangle pointing right, or left when `rtl` is
+   * true. It is sized in em and filled with `currentColor`.
    * @group Appearance
    */
   closedIcon?: IconElement;
@@ -258,7 +258,8 @@ export interface TreeElementOptions {
    *
    * Type: `HTMLElement | string`
    *
-   * @defaultValue `"▼"` (`▼`)
+   * @defaultValue An svg triangle pointing down, sized in em and filled with
+   * `currentColor`.
    * @group Appearance
    */
   openedIcon?: IconElement;

package/src/requestUrl.ts

@@ -1,23 +1,11 @@
-// Url class for absolute and relative urls.
-
-const isAbsoluteUrl = (inputUrl: string) => {
-  return URL.canParse(inputUrl);
-};
-
-const LOCALHOST = "http://localhost";
+// Url of a request. A relative url is resolved against the page, like a link
+// or `fetch` would, so it also works when the page is in a subdirectory.
 
 class RequestUrl {
-  private isAbsolute: boolean;
   private url: URL;
 
   constructor(inputUrl: string) {
-    if (isAbsoluteUrl(inputUrl)) {
-      this.url = new URL(inputUrl);
-      this.isAbsolute = true;
-    } else {
-      this.url = new URL(inputUrl, LOCALHOST);
-      this.isAbsolute = false;
-    }
+    this.url = new URL(inputUrl, document.baseURI);
   }
 
   setSearchParam(key: string, value: string) {
@@ -25,9 +13,7 @@ class RequestUrl {
   }
 
   value() {
-    return this.isAbsolute
-      ? this.url.href
-      : this.url.href.slice(LOCALHOST.length);
+    return this.url.href;
   }
 }
 

package/src/setDefaultOptions.ts

@@ -4,15 +4,25 @@ import type { TreeElementOptions } from "./options";
 import { DEFAULT_CLASS_PREFIX } from "./classNames";
 import { Node } from "./node";
 
+/* The default icons are svg instead of text: the triangle characters come
+ * from different fonts on each platform, so they differ in shape and size.
+ * They are sized in em to follow the font size, and use currentColor to follow
+ * --tree-element-toggler-color.
+ */
+const triangle = (points: string): string =>
+  `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+
+export const triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+export const triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+export const triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
+
 const defaults: TreeElementOptions = {
   animationSpeed: "fast",
   autoEscape: true,
   autoOpen: false, // true / false / int (open n levels starting at 0)
   buttonLeft: true,
   classPrefix: DEFAULT_CLASS_PREFIX, // the prefix of all css classes
-  // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-  // https://www.fileformat.info/info/unicode/char/25ba/index.htm
-  // closedIcon: undefined,
+  // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon
   // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
   // data: undefined,
   // dataFilter: undefined,
@@ -29,10 +39,8 @@ const defaults: TreeElementOptions = {
   // onGetStateFromStorage: undefined,
   // onIsMoveHandle: undefined,
   // onSetStateFromStorage: undefined,
-  // openedIcon: undefined,
+  // openedIcon: undefined, // the default is a triangle pointing down
   openFolderDelay: 500, // The delay for opening a folder during drag and drop; the value is in milliseconds
-  // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-  // https://www.fileformat.info/info/unicode/char/25bc/index.htm
   // rtl: undefined, // right-to-left support; true / false (default)
   saveState: false, // true / false / string (local storage key; the default key is "tree")
   selectable: true,
@@ -57,7 +65,7 @@ const setDefaultOptions = (
   options.dataUrl ??= htmlElement.dataset.url;
   options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
   options.closedIcon ??= getDefaultClosedIcon(options);
-  options.openedIcon ??= "&#x25bc;";
+  options.openedIcon ??= triangleDown;
 
   return options;
 };
@@ -71,12 +79,7 @@ const prefersReducedMotion = (): boolean =>
   window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
 const getDefaultClosedIcon = (options: TreeElementOptions): string => {
-  if (options.rtl) {
-    // triangle to the left
-    return "&#x25c0;";
-  }
-  // triangle to the right
-  return "&#x25ba;";
+  return options.rtl ? triangleLeft : triangleRight;
 };
 
 const getRtlOptionFromHTMLElement = (htmlElement: HTMLElement): boolean => {

package/src/version.ts

@@ -1,4 +1,4 @@
 // Generated by config/generateVersion.mjs. Do not edit.
-const version = "0.3.0";
+const version = "0.3.2";
 
 export default version;

package/tree_element.debug.js

@@ -1,5 +1,5 @@
 /*
-Tree-element 0.3.0
+Tree-element 0.3.2
 
 Copyright 2026 Marco Braak
 
@@ -2426,27 +2426,18 @@ var TreeElement = (function () {
     }
   }
 
-  // Url class for absolute and relative urls.
+  // Url of a request. A relative url is resolved against the page, like a link
+  // or `fetch` would, so it also works when the page is in a subdirectory.
 
-  let isAbsoluteUrl = inputUrl => {
-    return URL.canParse(inputUrl);
-  };
-  let LOCALHOST = "http://localhost";
   class RequestUrl {
     constructor(inputUrl) {
-      if (isAbsoluteUrl(inputUrl)) {
-        this._url = new URL(inputUrl);
-        this._isAbsolute = true;
-      } else {
-        this._url = new URL(inputUrl, LOCALHOST);
-        this._isAbsolute = false;
-      }
+      this._url = new URL(inputUrl, document.baseURI);
     }
     _setSearchParam(key, value) {
       this._url.searchParams.set(key, value);
     }
     _value() {
-      return this._isAbsolute ? this._url.href : this._url.href.slice(LOCALHOST.length);
+      return this._url.href;
     }
   }
 
@@ -2998,6 +2989,15 @@ var TreeElement = (function () {
     }
   }
 
+  /* The default icons are svg instead of text: the triangle characters come
+   * from different fonts on each platform, so they differ in shape and size.
+   * They are sized in em to follow the font size, and use currentColor to follow
+   * --tree-element-toggler-color.
+   */
+  let triangle = points => `<svg width="0.8em" height="0.8em" viewBox="0 0 10 10" focusable="false"><polygon points="${points}" fill="currentColor"/></svg>`;
+  let triangleDown = triangle("0.5,0.5 9.5,0.5 5,9.5");
+  let triangleLeft = triangle("9.5,0.5 9.5,9.5 0.5,5");
+  let triangleRight = triangle("0.5,0.5 0.5,9.5 9.5,5");
   let defaults = {
     animationSpeed: "fast",
     autoEscape: true,
@@ -3006,9 +3006,7 @@ var TreeElement = (function () {
     buttonLeft: true,
     classPrefix: DEFAULT_CLASS_PREFIX,
     // the prefix of all css classes
-    // The symbol to use for a closed node - ► BLACK RIGHT-POINTING POINTER
-    // https://www.fileformat.info/info/unicode/char/25ba/index.htm
-    // closedIcon: undefined,
+    // closedIcon: undefined, // the default is a triangle; see getDefaultClosedIcon
     // commonClassName: undefined, // the class of every element; the default is "<classPrefix>-common"
     // data: undefined,
     // dataFilter: undefined,
@@ -3025,11 +3023,9 @@ var TreeElement = (function () {
     // onGetStateFromStorage: undefined,
     // onIsMoveHandle: undefined,
     // onSetStateFromStorage: undefined,
-    // openedIcon: undefined,
+    // openedIcon: undefined, // the default is a triangle pointing down
     openFolderDelay: 500,
     // The delay for opening a folder during drag and drop; the value is in milliseconds
-    // The symbol to use for an open node - ▼ BLACK DOWN-POINTING TRIANGLE
-    // https://www.fileformat.info/info/unicode/char/25bc/index.htm
     // rtl: undefined, // right-to-left support; true / false (default)
     saveState: false,
     // true / false / string (local storage key; the default key is "tree")
@@ -3052,7 +3048,7 @@ var TreeElement = (function () {
     options.dataUrl ??= htmlElement.dataset.url;
     options.rtl ??= getRtlOptionFromHTMLElement(htmlElement);
     options.closedIcon ??= getDefaultClosedIcon(options);
-    options.openedIcon ??= "&#x25bc;";
+    options.openedIcon ??= triangleDown;
     return options;
   };
 
@@ -3060,12 +3056,7 @@ var TreeElement = (function () {
   let getDefaultAnimationSpeed = () => prefersReducedMotion() ? 0 : defaults.animationSpeed;
   let prefersReducedMotion = () => typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   let getDefaultClosedIcon = options => {
-    if (options.rtl) {
-      // triangle to the left
-      return "&#x25c0;";
-    }
-    // triangle to the right
-    return "&#x25ba;";
+    return options.rtl ? triangleLeft : triangleRight;
   };
   let getRtlOptionFromHTMLElement = htmlElement => {
     let dataRtl = htmlElement.dataset.rtl;
@@ -3087,7 +3078,7 @@ var TreeElement = (function () {
   };
 
   // Generated by config/generateVersion.mjs. Do not edit.
-  let version = "0.3.0";
+  let version = "0.3.2";
 
   // The types that appear in the public api. Consumers cannot import them from
   // the submodules directly, because those are not exposed in package.json.