@agnos-ui/core 0.10.0-next.0 → 0.10.0-next.2

package/{accordion-yD-czBna.cjs → accordion-DRIm0xHf.cjs}

@@ -34,7 +34,7 @@ const defaultAccordionConfig = {
   itemDestroyOnHide: true,
   itemAnimated: true,
   itemTransition: utils_func.noop,
-  itemHeadingTag: "",
+  itemHeadingLevel: 2,
   itemClassName: "",
   itemHeaderClassName: "",
   itemButtonClassName: "",
@@ -56,7 +56,7 @@ const defaultItemConfig = {
   buttonClassName: defaultAccordionConfig.itemButtonClassName,
   bodyContainerClassName: defaultAccordionConfig.itemBodyContainerClassName,
   bodyClassName: defaultAccordionConfig.itemBodyClassName,
-  headingTag: defaultAccordionConfig.itemHeadingTag
+  headingLevel: defaultAccordionConfig.itemHeadingLevel
 };
 const coreAccordionItemProps = Object.keys(defaultItemConfig);
 function getAccordionDefaultConfig() {
@@ -75,7 +75,7 @@ const configAccordionValidator = {
   itemButtonClassName: utils_writables.typeString,
   itemBodyContainerClassName: utils_writables.typeString,
   itemBodyClassName: utils_writables.typeString,
-  itemHeadingTag: utils_writables.typeString
+  itemHeadingLevel: utils_writables.createTypeEnum([1, 2, 3, 4, 5, 6])
 };
 const configItemValidator = {
   id: utils_writables.typeString,
@@ -92,7 +92,7 @@ const configItemValidator = {
   buttonClassName: utils_writables.typeString,
   bodyContainerClassName: utils_writables.typeString,
   bodyClassName: utils_writables.typeString,
-  headingTag: utils_writables.typeString
+  headingLevel: utils_writables.createTypeEnum([1, 2, 3, 4, 5, 6])
 };
 function createAccordionItem(config) {
   const [
@@ -132,7 +132,7 @@ function createAccordionItem(config) {
       }
     }
   });
-  const shouldBeInDOM$ = tansu.computed(() => destroyOnHide$() === false || !transition.stores.hidden$());
+  const shouldBeInDOM$ = tansu.computed(() => !destroyOnHide$() || !transition.stores.hidden$());
   const toggleDirective = utils_directive.createAttributesDirective(() => ({
     attributes: {
       id: tansu.computed(() => `${id$()}-toggle`),
@@ -155,7 +155,8 @@ function createAccordionItem(config) {
     attributes: {
       id: tansu.computed(() => `${id$()}-body-container`),
       class: bodyContainerClassName$,
-      "aria-labelledby": tansu.computed(() => `${id$()}-toggle`)
+      "aria-labelledby": tansu.computed(() => `${id$()}-toggle`),
+      role: tansu.readable("region")
     }
   }));
   return {

package/{accordion-CcirvrjR.js → accordion-DqnKGmbS.js}

@@ -2,7 +2,7 @@ import { writablesForProps, idWithDefault, stateStores, true$, mergeConfigStores
 import { createTransition } from "./services/transitions/baseTransitions.js";
 import { writable, computed, readable, asWritable } from "@amadeus-it-group/tansu";
 import { noop } from "./utils/func.js";
-import { e as typeString, g as typeFunction, c as typeBoolean } from "./writables-e0tyaQpe.js";
+import { j as createTypeEnum, e as typeString, g as typeFunction, c as typeBoolean } from "./writables-e0tyaQpe.js";
 import { n as mergeDirectives, p as createAttributesDirective, r as registrationArray, d as directiveSubscribe } from "./dom-Bcg9ORcA.js";
 import { createWidgetFactory } from "./utils/widget.js";
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
@@ -33,7 +33,7 @@ const defaultAccordionConfig = {
   itemDestroyOnHide: true,
   itemAnimated: true,
   itemTransition: noop,
-  itemHeadingTag: "",
+  itemHeadingLevel: 2,
   itemClassName: "",
   itemHeaderClassName: "",
   itemButtonClassName: "",
@@ -55,7 +55,7 @@ const defaultItemConfig = {
   buttonClassName: defaultAccordionConfig.itemButtonClassName,
   bodyContainerClassName: defaultAccordionConfig.itemBodyContainerClassName,
   bodyClassName: defaultAccordionConfig.itemBodyClassName,
-  headingTag: defaultAccordionConfig.itemHeadingTag
+  headingLevel: defaultAccordionConfig.itemHeadingLevel
 };
 const coreAccordionItemProps = Object.keys(defaultItemConfig);
 function getAccordionDefaultConfig() {
@@ -74,7 +74,7 @@ const configAccordionValidator = {
   itemButtonClassName: typeString,
   itemBodyContainerClassName: typeString,
   itemBodyClassName: typeString,
-  itemHeadingTag: typeString
+  itemHeadingLevel: createTypeEnum([1, 2, 3, 4, 5, 6])
 };
 const configItemValidator = {
   id: typeString,
@@ -91,7 +91,7 @@ const configItemValidator = {
   buttonClassName: typeString,
   bodyContainerClassName: typeString,
   bodyClassName: typeString,
-  headingTag: typeString
+  headingLevel: createTypeEnum([1, 2, 3, 4, 5, 6])
 };
 function createAccordionItem(config) {
   const [
@@ -131,7 +131,7 @@ function createAccordionItem(config) {
       }
     }
   });
-  const shouldBeInDOM$ = computed(() => destroyOnHide$() === false || !transition.stores.hidden$());
+  const shouldBeInDOM$ = computed(() => !destroyOnHide$() || !transition.stores.hidden$());
   const toggleDirective = createAttributesDirective(() => ({
     attributes: {
       id: computed(() => `${id$()}-toggle`),
@@ -154,7 +154,8 @@ function createAccordionItem(config) {
     attributes: {
       id: computed(() => `${id$()}-body-container`),
       class: bodyContainerClassName$,
-      "aria-labelledby": computed(() => `${id$()}-toggle`)
+      "aria-labelledby": computed(() => `${id$()}-toggle`),
+      role: readable("region")
     }
   }));
   return {

package/components/accordion/accordion.d.ts

@@ -86,11 +86,11 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     itemBodyClassName: string;
     /**
-     * The html tag to use for the accordion-item-header.
+     * The html heading level to use for the accordion-item-header.
      *
-     * @defaultValue `''`
+     * @defaultValue `2`
      */
-    itemHeadingTag: string;
+    itemHeadingLevel: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /**
  * Represents the state of an Accordion component.
@@ -244,9 +244,9 @@ interface AccordionItemCommonPropsAndState extends WidgetsCommonPropsAndState {
      */
     bodyClassName: string;
     /**
-     * The html tag to use for the accordion-item-header.
+     * The html heading level to use for the accordion-item-header.
      */
-    headingTag: string;
+    headingLevel: 1 | 2 | 3 | 4 | 5 | 6;
 }
 /**
  * Properties for an AccordionItem component.
@@ -305,7 +305,7 @@ export declare function getAccordionDefaultConfig(): AccordionProps;
  */
 export declare function createAccordionItem(config?: PropsConfig<AccordionItemProps>): AccordionItemWidget;
 /**
- * Create an accordion WidgetFactory based on a item factory and the list of item props that should inherit from the parent accordion
+ * Create an accordion WidgetFactory based on an item factory and the list of item props that should inherit from the parent accordion
  *
  * @param itemFactory - the item factory
  * @param accordionItemProps - the list of item props

package/components/accordion/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const accordion = require("../../accordion-yD-czBna.cjs");
+const accordion = require("../../accordion-DRIm0xHf.cjs");
 exports.createAccordion = accordion.createAccordion;
 exports.createAccordionItem = accordion.createAccordionItem;
 exports.factoryCreateAccordion = accordion.factoryCreateAccordion;

package/components/accordion/index.js

@@ -1,4 +1,4 @@
-import { a, c, f, g } from "../../accordion-CcirvrjR.js";
+import { a, c, f, g } from "../../accordion-DqnKGmbS.js";
 export {
   a as createAccordion,
   c as createAccordionItem,

package/components/carousel/carousel.d.ts

@@ -16,6 +16,8 @@ interface EmblaOptions {
      * Enables choosing a custom container element which holds the slides. By default, Embla will choose the first direct child element of the root element. Provide a valid CSS selector string.
      *
      * @see {@link https://www.embla-carousel.com/api/options/#container}
+     *
+     * @defaultValue `null`
      */
     container: string | null;
     /**
@@ -71,10 +73,14 @@ interface EmblaOptions {
 interface CarouselCommonPropsState extends Pick<EmblaOptions, 'direction'> {
     /**
      * If `true`, 'previous' and 'next' navigation arrows will be visible.
+     *
+     * @defaultValue `true`
      */
     showNavigationArrows: boolean;
     /**
      * If `true`, navigation indicators at the bottom of the slide will be visible.
+     *
+     * @defaultValue `true`
      */
     showNavigationIndicators: boolean;
 }
@@ -89,14 +95,23 @@ export interface CarouselProps extends EmblaOptions, CarouselCommonPropsState {
     plugins: EmblaPluginType[];
     /**
      * Aria label for navigation indicators
+     *
+     * @defaultValue
+     * ```ts
+     * (index: number) => `Select slide ${index + 1}`
+     * ```
      */
     ariaIndicatorLabel: (index: number) => string;
     /**
      * Aria label for previous button
+     *
+     * @defaultValue `'Select previous slide'`
      */
     ariaPrevLabel: string;
     /**
      * Aria label for next button
+     *
+     * @defaultValue `'Select next slide'`
      */
     ariaNextLabel: string;
 }

package/components/collapse/collapse.d.ts

@@ -7,7 +7,7 @@ interface CollapseCommonPropsAndState {
     /**
      * If `true` the collapse is visible to the user
      *
-     * @defaultValue `true`
+     * @defaultValue `false`
      */
     visible: boolean;
 }
@@ -75,7 +75,10 @@ export interface CollapseProps extends CollapseCommonPropsAndState {
      *
      * Depending on the value of `animatedOnInit`, the animation can be optionally skipped during the showing process.
      *
-     * @defaultValue `() => {}`
+     * @defaultValue
+     * ```ts
+     * () => {}
+     * ```
      */
     transition: TransitionFn;
 }

package/components/drawer/drawer.d.ts

@@ -7,6 +7,12 @@ import type { WidgetsCommonPropsAndState } from '../commonProps';
  */
 export type DrawerPositions = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
 interface DrawerCommonPropsAndState extends WidgetsCommonPropsAndState {
+    /**
+     * CSS classes to be applied on the widget main container
+     *
+     * @defaultValue `'w-full'`
+     */
+    className: string;
     /**
      * Which element should contain the drawer and backdrop DOM elements.
      * If it is not null, the drawer and backdrop DOM elements are moved to the specified container.
@@ -70,30 +76,44 @@ export interface DrawerProps extends DrawerCommonPropsAndState {
     backdropTransition: TransitionFn;
     /**
      * If `true` opening and closing will be animated.
+     *
+     * @defaultValue `true`
      */
     animated: boolean;
     /**
      * aria-labelledby attribute to use for the drawer element.
+     *
+     * @defaultValue `''`
      */
     ariaLabelledBy: string;
     /**
      * aria-describedby attribute to use for the drawer element.
+     *
+     * @defaultValue `''`
      */
     ariaDescribedBy: string;
     /**
      * The width of the drawer in pixels.
+     *
+     * @defaultValue `200`
      */
     width: number;
     /**
      * The height of the drawer in pixels.
+     *
+     * @defaultValue `200`
      */
     height: number;
     /**
      * If `true` displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable
+     *
+     * @defaultValue `true`
      */
     backdrop: boolean;
     /**
      * If `true` allows body scrolling when the drawer is open.
+     *
+     * @defaultValue `false`
      */
     bodyScroll: boolean;
     /**

package/components/slider/slider.d.ts

@@ -248,7 +248,7 @@ export interface SliderProps extends SliderCommonPropsAndState {
      *
      * @defaultValue
      * ```ts
-     * (value: number) => ''
+     * () => ''
      * ```
      */
     ariaValueText: (value: number, sortedIndex: number) => string;
@@ -280,21 +280,21 @@ export interface SliderProps extends SliderCommonPropsAndState {
      * Minimum distance between two values.
      * When set to 0, no minimum distance constraint is applied.
      *
-     * @defaultValue 0
+     * @defaultValue `0`
      */
     minRange: number;
     /**
      * Maximum distance between two values
      * When set to 0, no maximum distance constraint is applied.
      *
-     * @defaultValue 0
+     * @defaultValue `0`
      */
     maxRange: number;
     /**
      * When true, if moving a value would break the minRange or maxRange constraint,
      * it will instead push or pull the neighboring values to keep the allowed range rather than just stopping.
      *
-     * @defaultValue false
+     * @defaultValue `false`
      */
     pushRange: boolean;
 }

package/components/tree/tree.d.ts

@@ -40,12 +40,6 @@ export interface NormalizedTreeItem extends TreeItem {
     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.

package/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const types = require("./types.cjs");
-const accordion = require("./accordion-yD-czBna.cjs");
+const accordion = require("./accordion-DRIm0xHf.cjs");
 const alert = require("./alert-B-jQDQcB.cjs");
 const collapse = require("./collapse-gLiT080Y.cjs");
 const modal = require("./modal-DiXZXYjR.cjs");

package/index.js

@@ -1,5 +1,5 @@
 import { FACTORY_WIDGET_NAME, INVALID_VALUE } from "./types.js";
-import { a, c, f, g } from "./accordion-CcirvrjR.js";
+import { a, c, f, g } from "./accordion-DqnKGmbS.js";
 import { c as c2, g as g2 } from "./alert-gGz2CDS9.js";
 import { c as c3, g as g3 } from "./collapse-BV4kD3j9.js";
 import { c as c4, g as g4, a as a2, b, m } from "./modal-CAvQW-vo.js";

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@agnos-ui/core",
 	"description": "Framework-agnostic headless component library.",
-	"version": "0.10.0-next.0",
+	"version": "0.10.0-next.2",
 	"type": "module",
 	"main": "./index.cjs",
 	"module": "./index.js",

package/utils/internal/dom.d.ts

@@ -32,6 +32,8 @@ export declare const removeClasses: (element: SSRHTMLElement, classes?: string[]
  * @param type - A string representing the event type to listen for.
  * @param fn - The event listener function or object.
  * @param options - An options object that specifies characteristics about the event listener.
+ * @template K - event type
+ * @template T - event object type
  * @returns A function that removes the event listener from the element.
  */
 export declare function addEvent<K extends keyof HTMLElementEventMap, T extends HTMLElementEventMap[K]>(element: EventTarget, type: K, fn: (this: EventTarget, ev: T) => any, options?: boolean | AddEventListenerOptions): () => void;