@agnos-ui/core 0.5.0 → 0.6.0-next.1

package/components/select/select.d.ts

@@ -65,6 +65,8 @@ interface SelectCommonPropsAndState<Item> extends WidgetsCommonPropsAndState {
 }
 /**
  * Props for the Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectProps<Item> extends SelectCommonPropsAndState<Item> {
     /**
@@ -136,6 +138,8 @@ export interface SelectProps<Item> extends SelectCommonPropsAndState<Item> {
 }
 /**
  * Item representation built from the items provided in parameters
+ *
+ * @template T - The type of the Select Items
  */
 export interface ItemContext<T> {
     /**
@@ -153,6 +157,8 @@ export interface ItemContext<T> {
 }
 /**
  * Represents the state of a Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
     /**
@@ -175,6 +181,8 @@ export interface SelectState<Item> extends SelectCommonPropsAndState<Item> {
 }
 /**
  * Interface representing the API for a Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectApi<Item> {
     /**
@@ -240,6 +248,8 @@ export interface SelectApi<Item> {
 }
 /**
  * Interface representing the directives used in the Select component.
+ *
+ * @template Item - The type of the Select Items
  */
 export interface SelectDirectives<Item> {
     /**
@@ -281,6 +291,8 @@ export interface SelectDirectives<Item> {
 }
 /**
  * Represents a Select widget component.
+ *
+ * @template Item - The type of the Select Items
  */
 export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectDirectives<Item>>;
 /**
@@ -290,6 +302,8 @@ export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, Se
 export declare function getSelectDefaultConfig(): SelectProps<any>;
 /**
  * Create a SelectWidget with given config props
+ *
+ * @template Item - The type of the Select Items
  * @param config - an optional alert config
  * @returns a SelectWidget
  */

package/components/tree/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const tree = require("../../tree-Bh1WO63V.cjs");
+exports.createTree = tree.createTree;
+exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;

package/components/tree/index.d.ts

@@ -0,0 +1 @@
+export * from './tree';

package/components/tree/index.js

@@ -0,0 +1,5 @@
+import { c, g } from "../../tree-C4v9rTQl.js";
+export {
+  c as createTree,
+  g as getTreeDefaultConfig
+};

package/components/tree/tree.d.ts

@@ -0,0 +1,149 @@
+import type { Directive } from '../../types';
+import { type PropsConfig, type Widget } from '../../types';
+import type { WidgetsCommonPropsAndState } from '../commonProps';
+/**
+ * Represents a tree item component.
+ */
+export interface TreeItem {
+    /**
+     * Optional accessibility label for the node
+     */
+    ariaLabel?: string;
+    /**
+     * Optional array of children nodes
+     */
+    children?: TreeItem[];
+    /**
+     * If `true` the node is expanded
+     */
+    isExpanded?: boolean;
+    /**
+     * String title of the node
+     */
+    label: string;
+}
+/**
+ * Normalized TreeItem object
+ */
+export interface NormalizedTreeItem extends TreeItem {
+    /**
+     * Accessibility label for the node
+     */
+    ariaLabel: string;
+    /**
+     * Level in the hierarchy, starts with 0 for a root node
+     */
+    level: number;
+    /**
+     * An array of children nodes
+     */
+    children: NormalizedTreeItem[];
+}
+interface TreeCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * Optional accessibility label for the tree if there is no explicit label
+     *
+     * @defaultValue `''`
+     */
+    ariaLabel?: string;
+}
+/**
+ * Interface representing the properties for the Tree component.
+ */
+export interface TreeProps extends TreeCommonPropsAndState {
+    /**
+     * Array of the tree nodes to display
+     *
+     * @defaultValue `[]`
+     */
+    nodes: TreeItem[];
+    /**
+     * An event emitted when the user toggles the expand of the TreeItem.
+     *
+     * Event payload is equal to the TreeItem clicked.
+     *
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
+     */
+    onExpandToggle: (node: NormalizedTreeItem) => void;
+    /**
+     * Retrieves expand items of the TreeItem
+     *
+     * @param node - HTML element that is representing the expand item
+     *
+     * @defaultValue
+     * ```ts
+     * (node: HTMLElement) => node.querySelectorAll('button')
+     * ```
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLButtonElement>;
+    /**
+     * Return the value for the 'aria-label' attribute of the toggle
+     * @param label - tree item label
+     *
+     * @defaultValue
+     * ```ts
+     * (label: string) => `Toggle ${label}`
+     * ```
+     */
+    ariaLabelToggleFn: (label: string) => string;
+}
+/**
+ * Represents the state of a Tree component.
+ */
+export interface TreeState extends TreeCommonPropsAndState {
+    /**
+     * Array of normalized tree nodes
+     */
+    normalizedNodes: NormalizedTreeItem[];
+    /**
+     * Getter of expanded state for each tree node
+     */
+    expandedMap: {
+        get(item: NormalizedTreeItem): boolean | undefined;
+    };
+}
+/**
+ * Interface representing the API for a Tree component.
+ */
+export interface TreeApi {
+}
+/**
+ * Interface representing various directives used in the Tree component.
+ */
+export interface TreeDirectives {
+    /**
+     * Directive to attach navManager for the tree
+     */
+    navigationDirective: Directive;
+    /**
+     * Directive to handle toggle for the tree item
+     */
+    itemToggleDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+    /**
+     * Directive to handle attributes for the tree item
+     */
+    itemAttributesDirective: Directive<{
+        item: NormalizedTreeItem;
+    }>;
+}
+/**
+ * Represents a Tree widget component.
+ */
+export type TreeWidget = Widget<TreeProps, TreeState, TreeApi, TreeDirectives>;
+/**
+ * Retrieve a shallow copy of the default Tree config
+ * @returns the default Tree config
+ */
+export declare function getTreeDefaultConfig(): TreeProps;
+/**
+ * Create a tree widget with given config props
+ * @param config - an optional tree config
+ * @returns a TreeWidget
+ */
+export declare function createTree(config?: PropsConfig<TreeProps>): TreeWidget;
+export {};

package/config.d.ts

@@ -8,6 +8,7 @@ import type { AccordionProps } from './components/accordion/accordion';
 import type { ProgressbarProps } from './components/progressbar/progressbar';
 import type { SliderProps } from './components/slider/slider';
 import type { ToastProps } from './components/toast/toast';
+import type { TreeProps } from './components/tree/tree';
 /**
  * A utility type that makes all properties of an object type `T` optional,
  * and also makes all properties of the nested objects within `T` optional.
@@ -99,4 +100,8 @@ export type WidgetsConfig = {
      * toast widget config
      */
     toast: ToastProps;
+    /**
+     * tree widget config
+     */
+    tree: TreeProps;
 };

package/index.cjs

@@ -10,6 +10,7 @@ const rating = require("./rating-DlfOuwuX.cjs");
 const select = require("./select-LBVhNdrd.cjs");
 const slider = require("./slider-DlOAawbZ.cjs");
 const toast = require("./toast-D_uSrRZL.cjs");
+const tree = require("./tree-Bh1WO63V.cjs");
 const config = require("./config.cjs");
 const services_extendWidget = require("./services/extendWidget.cjs");
 const services_floatingUI = require("./services/floatingUI.cjs");
@@ -50,6 +51,8 @@ exports.createSlider = slider.createSlider;
 exports.getSliderDefaultConfig = slider.getSliderDefaultConfig;
 exports.createToast = toast.createToast;
 exports.getToastDefaultConfig = toast.getToastDefaultConfig;
+exports.createTree = tree.createTree;
+exports.getTreeDefaultConfig = tree.getTreeDefaultConfig;
 exports.createWidgetsConfig = config.createWidgetsConfig;
 exports.mergeInto = config.mergeInto;
 exports.extendWidgetProps = services_extendWidget.extendWidgetProps;

package/index.d.ts

@@ -8,6 +8,7 @@ export * from './components/rating';
 export * from './components/select';
 export * from './components/slider';
 export * from './components/toast';
+export * from './components/tree';
 export * from './config';
 export * from './services/extendWidget';
 export * from './services/floatingUI';

package/index.js

@@ -8,6 +8,7 @@ import { c as c6, g as g6 } from "./rating-Da38uaZz.js";
 import { c as c7, g as g7 } from "./select-CAEPqdz1.js";
 import { c as c8, g as g8 } from "./slider-DYrwS7Mv.js";
 import { c as c9, g as g9 } from "./toast-CpvsibAI.js";
+import { c as c10, g as g10 } from "./tree-C4v9rTQl.js";
 import { createWidgetsConfig, mergeInto } from "./config.js";
 import { extendWidgetProps } from "./services/extendWidget.js";
 import { createFloatingUI } from "./services/floatingUI.js";
@@ -22,15 +23,15 @@ import { hash$ } from "./services/hash.js";
 import { createTransition, noAnimation } from "./services/transitions/baseTransitions.js";
 import { createCSSTransition, getTransitionDurationMs, hasTransition } from "./services/transitions/cssTransitions.js";
 import { createSimpleClassTransition } from "./services/transitions/simpleClassTransition.js";
-import { o, a as a3, c as c10, b, p, n, g as g10, j, f as f2, h, q, d, e, i, m as m2, k, l, r, s } from "./directive-CKEccryv.js";
+import { o, a as a3, c as c11, b, p, n, g as g11, j, f as f2, h, q, d, e, i, m as m2, k, l, r, s } from "./directive-CKEccryv.js";
 import { bindableDerived, bindableProp, createPatch, findChangedProperties, isStore, mergeConfigStores, normalizeConfigStores, stateStores, toReadableStore, toWritableStore, writableWithDefault, writablesForProps, writablesWithDefault } from "./utils/stores.js";
-import { i as i2, t, h as h2, c as c11, d as d2, f as f3, g as g11, a as a4, b as b2, e as e2 } from "./writables-DCiBdIBK.js";
+import { i as i2, t, h as h2, c as c12, d as d2, f as f3, g as g12, a as a4, b as b2, e as e2 } from "./writables-DCiBdIBK.js";
 export {
   INVALID_VALUE,
   activeElement$,
   o as attributesData,
   a3 as bindDirective,
-  c10 as bindDirectiveNoArg,
+  c11 as bindDirectiveNoArg,
   bindableDerived,
   bindableProp,
   b as browserDirective,
@@ -39,7 +40,7 @@ export {
   c as createAccordionItem,
   c2 as createAlert,
   n as createAttributesDirective,
-  g10 as createBrowserStoreArrayDirective,
+  g11 as createBrowserStoreArrayDirective,
   j as createBrowserStoreDirective,
   createCSSTransition,
   createFloatingUI,
@@ -60,6 +61,7 @@ export {
   h as createStoreDirective,
   c9 as createToast,
   createTransition,
+  c10 as createTree,
   i2 as createTypeEnum,
   createWidgetsConfig,
   q as directiveAttributes,
@@ -79,6 +81,7 @@ export {
   g8 as getSliderDefaultConfig,
   g9 as getToastDefaultConfig,
   getTransitionDurationMs,
+  g10 as getTreeDefaultConfig,
   hasTransition,
   hash$,
   i as isBrowserHTMLElement,
@@ -102,10 +105,10 @@ export {
   toReadableStore,
   toWritableStore,
   h2 as typeArray,
-  c11 as typeBoolean,
+  c12 as typeBoolean,
   d2 as typeBooleanOrNull,
   f3 as typeFunction,
-  g11 as typeHTMLElementOrNull,
+  g12 as typeHTMLElementOrNull,
   a4 as typeNumber,
   b2 as typeNumberInRangeFactory,
   e2 as typeString,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless component library.",
-	"version": "0.5.0",
+	"version": "0.6.0-next.1",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",
@@ -46,7 +46,7 @@
 	"peerDependencies": {
 		"@amadeus-it-group/tansu": "^1.0.0",
 		"@floating-ui/dom": "^1.6.12",
-		"esm-env": "^1.1.4"
+		"esm-env": "^1.2.1"
 	},
 	"sideEffects": false,
 	"homepage": "https://www.agnosui.dev/latest/",

package/services/floatingUI.d.ts

@@ -42,6 +42,9 @@ export interface FloatingUIState {
      */
     middlewareData: MiddlewareData | undefined;
 }
+/**
+ * Interface representing the directives used to enable floating ui.
+ */
 export interface FloatingUIDirectives {
     /**
      * Directive to attach to the reference element

package/services/transitions/baseTransitions.cjs

@@ -38,7 +38,6 @@ const createTransition = (config) => {
   const currentTransition$ = tansu.writable(
     null
   );
-  const transitioning$ = tansu.computed(() => !!currentTransition$());
   const stop = () => {
     let context;
     currentTransition$.update((currentTransition) => {
@@ -80,8 +79,6 @@ const createTransition = (config) => {
     );
     return currentTransition;
   });
-  const shown$ = tansu.computed(() => !transitioning$() && visible$() && elementPresent$());
-  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
   const effectiveAnimation$ = tansu.computed(() => initDone$() ? animated$() : animatedOnInit$());
   const animationFromToggle$ = tansu.writable(null);
   let previousElement;
@@ -145,6 +142,14 @@ const createTransition = (config) => {
       }
     }
   };
+  const transitioning$ = tansu.computed(() => {
+    if (elementPresent$()) {
+      void visibleAction$();
+    }
+    return !!currentTransition$();
+  });
+  const shown$ = tansu.computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = tansu.computed(() => !transitioning$() && !visible$());
   const directive = utils_directive.mergeDirectives(storeDirective, utils_directive.directiveSubscribe(visibleAction$));
   return {
     ...utils_stores.stateStores({

package/services/transitions/baseTransitions.js

@@ -36,7 +36,6 @@ const createTransition = (config) => {
   const currentTransition$ = writable(
     null
   );
-  const transitioning$ = computed(() => !!currentTransition$());
   const stop = () => {
     let context;
     currentTransition$.update((currentTransition) => {
@@ -78,8 +77,6 @@ const createTransition = (config) => {
     );
     return currentTransition;
   });
-  const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
-  const hidden$ = computed(() => !transitioning$() && !visible$());
   const effectiveAnimation$ = computed(() => initDone$() ? animated$() : animatedOnInit$());
   const animationFromToggle$ = writable(null);
   let previousElement;
@@ -143,6 +140,14 @@ const createTransition = (config) => {
       }
     }
   };
+  const transitioning$ = computed(() => {
+    if (elementPresent$()) {
+      void visibleAction$();
+    }
+    return !!currentTransition$();
+  });
+  const shown$ = computed(() => !transitioning$() && visible$() && elementPresent$());
+  const hidden$ = computed(() => !transitioning$() && !visible$());
   const directive = mergeDirectives(storeDirective, directiveSubscribe(visibleAction$));
   return {
     ...stateStores({

package/tree-Bh1WO63V.cjs

@@ -0,0 +1,221 @@
+"use strict";
+const tansu = require("@amadeus-it-group/tansu");
+const services_navManager = require("./services/navManager.cjs");
+const utils_directive = require("./directive-DdlwGFtf.cjs");
+const func = require("./func-Qd3cD9a3.cjs");
+const utils_stores = require("./utils/stores.cjs");
+const utils_writables = require("./writables-BPAJvaL_.cjs");
+function getTreeDefaultConfig() {
+  return {
+    ...defaultTreeConfig
+  };
+}
+const defaultTreeConfig = {
+  className: "",
+  nodes: [],
+  onExpandToggle: func.noop,
+  navSelector: (node) => node.querySelectorAll("button"),
+  ariaLabelToggleFn: (label) => `Toggle ${label}`
+};
+const configValidator = {
+  className: utils_writables.typeString,
+  nodes: utils_writables.typeArray,
+  onExpandToggle: utils_writables.typeFunction,
+  navSelector: utils_writables.typeFunction,
+  ariaLabelToggleFn: utils_writables.typeFunction
+};
+function createTree(config) {
+  const [{ nodes$, onExpandToggle$, navSelector$, ariaLabelToggleFn$, ...stateProps }, patch] = utils_stores.writablesForProps(
+    defaultTreeConfig,
+    config,
+    configValidator
+  );
+  const treeMap = /* @__PURE__ */ new Map();
+  const _expandedMap = {
+    get(item) {
+      return item.isExpanded;
+    }
+  };
+  const _toggleChange$ = tansu.writable({});
+  const expandedMap$ = tansu.computed(() => {
+    normalizedNodes$();
+    _toggleChange$();
+    return _expandedMap;
+  });
+  const {
+    elementsInDomOrder$,
+    directive: navDirective,
+    refreshElements,
+    focusIndex,
+    focusPrevious,
+    focusNext,
+    focusFirst,
+    focusLast
+  } = services_navManager.createNavManager();
+  const navManagerConfig$ = tansu.computed(() => ({
+    keys: {
+      ArrowUp: focusPrevious,
+      ArrowDown: focusNext,
+      Home: focusFirst,
+      End: focusLast
+    },
+    selector: navSelector$()
+  }));
+  const traverseTree = (node, level, parent) => {
+    var _a;
+    const copyNode = {
+      ...node,
+      ariaLabel: node.ariaLabel ?? node.label,
+      level,
+      children: [],
+      isExpanded: ((_a = node.children) == null ? void 0 : _a.length) ? node.isExpanded ?? false : void 0
+    };
+    treeMap.set(copyNode, {
+      parent
+    });
+    if (node.children) {
+      copyNode.children = node.children.map((child) => traverseTree(child, level + 1, copyNode));
+    }
+    return copyNode;
+  };
+  const normalizedNodes$ = tansu.computed(() => {
+    treeMap.clear();
+    return nodes$().map((node) => traverseTree(node, 0, void 0));
+  });
+  const _lastFocusedTreeItem$ = tansu.writable(normalizedNodes$()[0]);
+  const getTreeItemInfo = (item) => {
+    const treeItem = treeMap.get(item);
+    if (!treeItem) {
+      console.error(`Node ${item.label} doesn't exist in the map`);
+    }
+    return treeItem;
+  };
+  const treeItemElementDirective = utils_directive.browserDirective(
+    (toggleItem, args) => {
+      let treeItemInfo;
+      const destroy = () => {
+        if (treeItemInfo && treeItemInfo.htmlElement === toggleItem) {
+          treeItemInfo.htmlElement = void 0;
+        }
+        treeItemInfo = void 0;
+      };
+      const update = (args2) => {
+        destroy();
+        treeItemInfo = getTreeItemInfo(args2.item);
+        if (treeItemInfo) {
+          if (treeItemInfo.htmlElement) {
+            console.warn(`The tree item directive should be used once per element`);
+          }
+          treeItemInfo.htmlElement = toggleItem;
+        }
+      };
+      update(args);
+      return {
+        update,
+        destroy
+      };
+    }
+  );
+  const focusElementIfExists = (itemToFocus) => {
+    var _a;
+    if (itemToFocus) {
+      const mapItemHtml = (_a = getTreeItemInfo(itemToFocus)) == null ? void 0 : _a.htmlElement;
+      if (mapItemHtml) {
+        const index = elementsInDomOrder$().indexOf(mapItemHtml);
+        focusIndex(index, 0);
+      }
+    }
+  };
+  const itemToggleAttributesDirective = utils_directive.createAttributesDirective((treeItemContext$) => ({
+    events: {
+      focus: () => {
+        const { item } = treeItemContext$();
+        _lastFocusedTreeItem$.set(item);
+      },
+      click: () => {
+        const { item } = treeItemContext$();
+        toggleExpanded(item);
+      },
+      keydown: (event) => {
+        var _a, _b;
+        const { key } = event;
+        const { item } = treeItemContext$();
+        const isExpanded = item.isExpanded;
+        refreshElements();
+        switch (key) {
+          case "ArrowLeft":
+            if (isExpanded) {
+              toggleExpanded(item);
+            } else {
+              focusElementIfExists((_a = getTreeItemInfo(item)) == null ? void 0 : _a.parent);
+            }
+            break;
+          case "ArrowRight":
+            if (!isExpanded) {
+              toggleExpanded(item);
+            } else {
+              focusElementIfExists((_b = item.children) == null ? void 0 : _b[0]);
+            }
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    attributes: {
+      "aria-label": tansu.computed(() => {
+        const { item } = treeItemContext$();
+        return ariaLabelToggleFn$()(item.ariaLabel);
+      }),
+      tabindex: tansu.computed(() => {
+        const { item } = treeItemContext$();
+        return item === _lastFocusedTreeItem$() ? "0" : "-1";
+      }),
+      type: "button"
+    },
+    classNames: {
+      "au-tree-expand-icon": true,
+      "au-tree-expand-icon-expanded": tansu.computed(() => {
+        _toggleChange$();
+        const { item } = treeItemContext$();
+        return item.isExpanded ?? false;
+      })
+    }
+  }));
+  const toggleExpanded = (node) => {
+    const treeItemInfo = getTreeItemInfo(node);
+    if (treeItemInfo === void 0 || node.isExpanded === void 0) {
+      return;
+    }
+    node.isExpanded = !node.isExpanded;
+    _toggleChange$.set({});
+    onExpandToggle$()(node);
+  };
+  const widget = {
+    ...utils_stores.stateStores({ normalizedNodes$, expandedMap$, ...stateProps }),
+    patch,
+    api: {},
+    directives: {
+      navigationDirective: utils_directive.bindDirective(navDirective, navManagerConfig$),
+      itemToggleDirective: utils_directive.mergeDirectives(treeItemElementDirective, itemToggleAttributesDirective),
+      itemAttributesDirective: utils_directive.createAttributesDirective((treeItemContext$) => ({
+        attributes: {
+          role: "treeitem",
+          "aria-selected": "false",
+          // TODO: adapt aria-selected to the actual selected state
+          "aria-expanded": tansu.computed(() => {
+            var _a;
+            const { item } = treeItemContext$();
+            _toggleChange$();
+            return (_a = item.isExpanded) == null ? void 0 : _a.toString();
+          })
+        }
+      }))
+    }
+  };
+  return widget;
+}
+exports.createTree = createTree;
+exports.getTreeDefaultConfig = getTreeDefaultConfig;

package/tree-C4v9rTQl.js

@@ -0,0 +1,222 @@
+import { writable, computed } from "@amadeus-it-group/tansu";
+import { createNavManager } from "./services/navManager.js";
+import { a as bindDirective, k as mergeDirectives, n as createAttributesDirective, b as browserDirective } from "./directive-CKEccryv.js";
+import { n as noop } from "./func-DR0n-ShK.js";
+import { writablesForProps, stateStores } from "./utils/stores.js";
+import { e as typeString, h as typeArray, f as typeFunction } from "./writables-DCiBdIBK.js";
+function getTreeDefaultConfig() {
+  return {
+    ...defaultTreeConfig
+  };
+}
+const defaultTreeConfig = {
+  className: "",
+  nodes: [],
+  onExpandToggle: noop,
+  navSelector: (node) => node.querySelectorAll("button"),
+  ariaLabelToggleFn: (label) => `Toggle ${label}`
+};
+const configValidator = {
+  className: typeString,
+  nodes: typeArray,
+  onExpandToggle: typeFunction,
+  navSelector: typeFunction,
+  ariaLabelToggleFn: typeFunction
+};
+function createTree(config) {
+  const [{ nodes$, onExpandToggle$, navSelector$, ariaLabelToggleFn$, ...stateProps }, patch] = writablesForProps(
+    defaultTreeConfig,
+    config,
+    configValidator
+  );
+  const treeMap = /* @__PURE__ */ new Map();
+  const _expandedMap = {
+    get(item) {
+      return item.isExpanded;
+    }
+  };
+  const _toggleChange$ = writable({});
+  const expandedMap$ = computed(() => {
+    normalizedNodes$();
+    _toggleChange$();
+    return _expandedMap;
+  });
+  const {
+    elementsInDomOrder$,
+    directive: navDirective,
+    refreshElements,
+    focusIndex,
+    focusPrevious,
+    focusNext,
+    focusFirst,
+    focusLast
+  } = createNavManager();
+  const navManagerConfig$ = computed(() => ({
+    keys: {
+      ArrowUp: focusPrevious,
+      ArrowDown: focusNext,
+      Home: focusFirst,
+      End: focusLast
+    },
+    selector: navSelector$()
+  }));
+  const traverseTree = (node, level, parent) => {
+    var _a;
+    const copyNode = {
+      ...node,
+      ariaLabel: node.ariaLabel ?? node.label,
+      level,
+      children: [],
+      isExpanded: ((_a = node.children) == null ? void 0 : _a.length) ? node.isExpanded ?? false : void 0
+    };
+    treeMap.set(copyNode, {
+      parent
+    });
+    if (node.children) {
+      copyNode.children = node.children.map((child) => traverseTree(child, level + 1, copyNode));
+    }
+    return copyNode;
+  };
+  const normalizedNodes$ = computed(() => {
+    treeMap.clear();
+    return nodes$().map((node) => traverseTree(node, 0, void 0));
+  });
+  const _lastFocusedTreeItem$ = writable(normalizedNodes$()[0]);
+  const getTreeItemInfo = (item) => {
+    const treeItem = treeMap.get(item);
+    if (!treeItem) {
+      console.error(`Node ${item.label} doesn't exist in the map`);
+    }
+    return treeItem;
+  };
+  const treeItemElementDirective = browserDirective(
+    (toggleItem, args) => {
+      let treeItemInfo;
+      const destroy = () => {
+        if (treeItemInfo && treeItemInfo.htmlElement === toggleItem) {
+          treeItemInfo.htmlElement = void 0;
+        }
+        treeItemInfo = void 0;
+      };
+      const update = (args2) => {
+        destroy();
+        treeItemInfo = getTreeItemInfo(args2.item);
+        if (treeItemInfo) {
+          if (treeItemInfo.htmlElement) {
+            console.warn(`The tree item directive should be used once per element`);
+          }
+          treeItemInfo.htmlElement = toggleItem;
+        }
+      };
+      update(args);
+      return {
+        update,
+        destroy
+      };
+    }
+  );
+  const focusElementIfExists = (itemToFocus) => {
+    var _a;
+    if (itemToFocus) {
+      const mapItemHtml = (_a = getTreeItemInfo(itemToFocus)) == null ? void 0 : _a.htmlElement;
+      if (mapItemHtml) {
+        const index = elementsInDomOrder$().indexOf(mapItemHtml);
+        focusIndex(index, 0);
+      }
+    }
+  };
+  const itemToggleAttributesDirective = createAttributesDirective((treeItemContext$) => ({
+    events: {
+      focus: () => {
+        const { item } = treeItemContext$();
+        _lastFocusedTreeItem$.set(item);
+      },
+      click: () => {
+        const { item } = treeItemContext$();
+        toggleExpanded(item);
+      },
+      keydown: (event) => {
+        var _a, _b;
+        const { key } = event;
+        const { item } = treeItemContext$();
+        const isExpanded = item.isExpanded;
+        refreshElements();
+        switch (key) {
+          case "ArrowLeft":
+            if (isExpanded) {
+              toggleExpanded(item);
+            } else {
+              focusElementIfExists((_a = getTreeItemInfo(item)) == null ? void 0 : _a.parent);
+            }
+            break;
+          case "ArrowRight":
+            if (!isExpanded) {
+              toggleExpanded(item);
+            } else {
+              focusElementIfExists((_b = item.children) == null ? void 0 : _b[0]);
+            }
+            break;
+          default:
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    attributes: {
+      "aria-label": computed(() => {
+        const { item } = treeItemContext$();
+        return ariaLabelToggleFn$()(item.ariaLabel);
+      }),
+      tabindex: computed(() => {
+        const { item } = treeItemContext$();
+        return item === _lastFocusedTreeItem$() ? "0" : "-1";
+      }),
+      type: "button"
+    },
+    classNames: {
+      "au-tree-expand-icon": true,
+      "au-tree-expand-icon-expanded": computed(() => {
+        _toggleChange$();
+        const { item } = treeItemContext$();
+        return item.isExpanded ?? false;
+      })
+    }
+  }));
+  const toggleExpanded = (node) => {
+    const treeItemInfo = getTreeItemInfo(node);
+    if (treeItemInfo === void 0 || node.isExpanded === void 0) {
+      return;
+    }
+    node.isExpanded = !node.isExpanded;
+    _toggleChange$.set({});
+    onExpandToggle$()(node);
+  };
+  const widget = {
+    ...stateStores({ normalizedNodes$, expandedMap$, ...stateProps }),
+    patch,
+    api: {},
+    directives: {
+      navigationDirective: bindDirective(navDirective, navManagerConfig$),
+      itemToggleDirective: mergeDirectives(treeItemElementDirective, itemToggleAttributesDirective),
+      itemAttributesDirective: createAttributesDirective((treeItemContext$) => ({
+        attributes: {
+          role: "treeitem",
+          "aria-selected": "false",
+          // TODO: adapt aria-selected to the actual selected state
+          "aria-expanded": computed(() => {
+            var _a;
+            const { item } = treeItemContext$();
+            _toggleChange$();
+            return (_a = item.isExpanded) == null ? void 0 : _a.toString();
+          })
+        }
+      }))
+    }
+  };
+  return widget;
+}
+export {
+  createTree as c,
+  getTreeDefaultConfig as g
+};

package/types.d.ts

@@ -170,6 +170,8 @@ export type DirectivesAndOptParam<T extends any[], U extends SSRHTMLElement = SS
  * - `null`
  * - A `string`
  * - A function that takes `props` of type `Props` and returns a `string`
+ *
+ * @template Props - The type of the props when the slot is a function
  */
 export type SlotContent<Props extends object = object> = undefined | null | string | ((props: Props) => string);
 /**

package/utils/internal/checks.d.ts

@@ -49,6 +49,8 @@ export declare const isHTMLElement: (value: any) => value is HTMLElement;
 export declare const allowNull: <T>(isType: (value: any) => value is T) => (value: any) => value is T | null;
 /**
  * Builds a new type guard to check if an element belongs to an enum list
+ *
+ * @template T - the type of the enum
  * @param list - the list of all enum values
  * @returns the type guard
  */

package/utils/internal/promise.d.ts

@@ -12,6 +12,8 @@ export interface PromisePendingResult {
 export declare const promisePending: PromisePendingResult;
 /**
  * Represents the state of a promise, which can be either fulfilled, rejected, or pending.
+ *
+ * @template T - The type of the value promised
  */
 export type PromiseState<T> = PromiseFulfilledResult<T> | PromiseRejectedResult | PromisePendingResult;
 /**