@agnos-ui/core 0.1.0 → 0.2.0

package/components/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } f
 import type { WidgetsCommonPropsAndState } from '../commonProps';
 export interface AccordionProps extends WidgetsCommonPropsAndState {
     /**
-     * If `true`, only one item at the time can stay open.
+     * If `true`, only one accordion-item at the time can stay open.
      */
     closeOthers: boolean;
     /**
@@ -25,7 +25,7 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     itemId: string;
     /**
-     * If `true`, the content of the accordion-item collapse will be removed from the DOM. It will be just hidden otherwise.
+     * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
      *
      * It is a prop of the accordion-item.
      */
@@ -50,7 +50,7 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     itemAnimation: boolean;
     /**
-     * The transition to use for the accordion-item collapse when is toggled.
+     * The transition to use for the accordion-item body-container when the accordion-item is toggled.
      *
      * It is a prop of the accordion-item.
      */
@@ -77,8 +77,9 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
     onItemVisibleChange: (visible: boolean) => void;
     /**
      * Structure of the accordion-item. The default item structure is: accordion-item
-     * contains accordion header and accordion collapse; the accordion header contains the accordion button
-     * (that contains `slotItemHeader`), while the accordion collapse contains the accordion body (that contains slotItemBody).
+     * contains accordion header and accordion-item body container; the accordion header contains the accordion button
+     * (that contains `slotItemHeader`), while the accordion-item body container contains the accordion body (that contains `slotItemBody`).
+     * The itemTransition it applied on this element.
      *
      * It is a prop of the accordion-item.
      */
@@ -96,31 +97,32 @@ export interface AccordionProps extends WidgetsCommonPropsAndState {
      */
     slotItemHeader: SlotContent<AccordionItemContext>;
     /**
-     * Classes to add on the accordion-item DOM element.
+     * CSS classes to add on the accordion-item DOM element.
      *
      * It is a prop of the accordion-item.
      */
     itemClass: string;
     /**
-     * Classes to add on the accordion-item header DOM element.
+     * CSS classes to add on the accordion-item header DOM element.
      *
      * It is a prop of the accordion-item.
      */
     itemHeaderClass: string;
     /**
-     * Classes to add on the accordion-item toggle button DOM element.
+     * CSS classes to add on the accordion-item toggle button DOM element.
      *
      * It is a prop of the accordion-item.
      */
     itemButtonClass: string;
     /**
-     * Classes to add on the accordion-item collapse DOM element.
+     * CSS classes to add on the accordion-item body container DOM element.
+     * The accordion-item body container is the DOM element on what the itemTransition is applied.
      *
      * It is a prop of the accordion-item.
      */
-    itemCollapseClass: string;
+    itemBodyContainerClass: string;
     /**
-     * Classes to add on the accordion-item body DOM element.
+     * CSS classes to add on the accordion-item body DOM element.
      *
      * It is a prop of the accordion-item.
      */
@@ -244,28 +246,30 @@ export interface AccordionItemCommonPropsAndState {
     slotItemBody: SlotContent<AccordionItemContext>;
     /**
      * Structure of the accordion-item. The default item structure is: accordion-item
-     * contains accordion header and accordion collapse; the accordion header contains the accordion button
-     * (that contains `slotItemHeader`), while the accordion collapse contains the accordion body (that contains slotItemBody).
+     * contains accordion header and accordion-item body container; the accordion header contains the accordion button
+     * (that contains `slotItemHeader`), while the accordion-item body container contains the accordion body (that contains `slotItemBody`).
+     * The itemTransition it applied on this element.
      */
     slotItemStructure: SlotContent<AccordionItemContext>;
     /**
-     * Classes to add on the accordion-item DOM element.
+     * CSS classes to add on the accordion-item DOM element.
      */
     itemClass: string;
     /**
-     * Classes to add on the accordion-item header DOM element.
+     * CSS classes to add on the accordion-item header DOM element.
      */
     itemHeaderClass: string;
     /**
-     * Classes to add on the accordion-item collapse DOM element.
+     * CSS classes to add on the accordion-item collapse DOM element.
      */
     itemButtonClass: string;
     /**
-     * Classes to add on the accordion-item collapse DOM element.
+     * CSS classes to add on the accordion-item body container DOM element.
+     * The accordion-item body container is the DOM element on what the itemTransition is applied.
      */
-    itemCollapseClass: string;
+    itemBodyContainerClass: string;
     /**
-     * Classes to add on the accordion-item body DOM element.
+     * CSS classes to add on the accordion-item body DOM element.
      */
     itemBodyClass: string;
     /**
@@ -279,11 +283,11 @@ export interface AccordionItemProps extends AccordionItemCommonPropsAndState {
      */
     itemAnimation: boolean;
     /**
-     * The transition to use for the accordion-item collapse when is toggled.
+     * The transition to use for the accordion-item body-container when the accordion-item is toggled.
      */
     itemTransition: TransitionFn;
     /**
-     * If `true`, the content of the accordion-item collapse will be removed from the DOM. It will be just hidden otherwise.
+     * If `true`, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
      */
     itemDestroyOnHide: boolean;
     /**

package/components/accordion/accordion.js

@@ -5,10 +5,7 @@ import { computed, writable } from '@amadeus-it-group/tansu';
 import { noop } from '../../utils/internal/func';
 import { typeBoolean, typeFunction, typeString } from '../../utils/writables';
 import { bindDirectiveNoArg, directiveSubscribe, registrationArray } from '../../utils/directive';
-let itemId = 0;
-function getItemId() {
-    return `accordion-item-${itemId++}`;
-}
+import { generateId } from '../../utils/internal/dom';
 function adjustItemsCloseOthers(items, openItems, oldOpen) {
     let keepOpen;
     if (openItems.length == 2) {
@@ -52,7 +49,7 @@ const defaultAccordionConfig = {
     itemClass: '',
     itemHeaderClass: '',
     itemButtonClass: '',
-    itemCollapseClass: '',
+    itemBodyContainerClass: '',
     itemBodyClass: '',
 };
 const defaultItemConfig = {
@@ -71,7 +68,7 @@ const defaultItemConfig = {
     itemClass: defaultAccordionConfig.itemClass,
     itemHeaderClass: defaultAccordionConfig.itemHeaderClass,
     itemButtonClass: defaultAccordionConfig.itemButtonClass,
-    itemCollapseClass: defaultAccordionConfig.itemCollapseClass,
+    itemBodyContainerClass: defaultAccordionConfig.itemBodyContainerClass,
     itemBodyClass: defaultAccordionConfig.itemBodyClass,
     itemHeadingTag: defaultAccordionConfig.itemHeadingTag,
 };
@@ -99,7 +96,7 @@ const configAccordionValidator = {
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
-    itemCollapseClass: typeString,
+    itemBodyContainerClass: typeString,
     itemBodyClass: typeString,
     itemHeadingTag: typeString,
 };
@@ -116,14 +113,14 @@ const configItemValidator = {
     itemClass: typeString,
     itemHeaderClass: typeString,
     itemButtonClass: typeString,
-    itemCollapseClass: typeString,
+    itemBodyContainerClass: typeString,
     itemBodyClass: typeString,
     itemHeadingTag: typeString,
 };
 function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
     const [{ itemAnimation$, itemTransition$, itemDestroyOnHide$, onItemShown$, onItemHidden$, onItemVisibleChange$, itemVisible$, itemId$: _dirtyItemId$, itemDisabled$, ...stateProps }, patch,] = writablesForProps(defaultItemConfig, config, configItemValidator);
     const initDone$ = writable(false);
-    const _autoItemId$ = computed(() => getItemId());
+    const _autoItemId$ = computed(() => generateId());
     const itemId$ = computed(() => _dirtyItemId$() || _autoItemId$());
     const shouldBeInDOM$ = computed(() => itemDestroyOnHide$() === false || !itemTransition.state$().hidden);
     const itemTransition = createTransition({
@@ -183,7 +180,7 @@ function createAccordionItem(accordionOnShown, accordionOnHidden, config) {
  * @returns a new accordion widget instance
  */
 export function createAccordion(config) {
-    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemCollapseClass$, itemHeaderClass$, itemHeadingTag$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
+    const [{ closeOthers$, onShown$, onHidden$, itemId$, itemAnimation$, itemClass$, itemDisabled$, itemVisible$, itemTransition$, itemDestroyOnHide$, itemBodyClass$, itemButtonClass$, itemBodyContainerClass$, itemHeaderClass$, itemHeadingTag$, onItemVisibleChange$, onItemHidden$, onItemShown$, slotItemStructure$, slotItemBody$, slotItemHeader$, ...stateProps }, patch,] = writablesForProps(defaultAccordionConfig, config, configAccordionValidator);
     const accordionItemConfig = {
         itemId: itemId$,
         itemClass: itemClass$,
@@ -194,7 +191,7 @@ export function createAccordion(config) {
         itemDestroyOnHide: itemDestroyOnHide$,
         itemBodyClass: itemBodyClass$,
         itemButtonClass: itemButtonClass$,
-        itemCollapseClass: itemCollapseClass$,
+        itemBodyContainerClass: itemBodyContainerClass$,
         itemHeaderClass: itemHeaderClass$,
         itemHeadingTag: itemHeadingTag$,
         onItemVisibleChange: onItemVisibleChange$,

package/components/alert/alert.d.ts

@@ -9,9 +9,9 @@ export interface AlertExtraProps {
      */
     type: string;
 }
-export interface AlertState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, AlertExtraProps> {
+export interface AlertState extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertState, AlertExtraProps, object> {
 }
-export interface AlertProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, AlertExtraProps> {
+export interface AlertProps extends ExtendWidgetAdaptSlotWidgetProps<CommonAlertProps, AlertExtraProps, object> {
 }
 export interface AlertApi extends CommonAlertApi {
 }

package/components/pagination/pagination.d.ts

@@ -86,6 +86,14 @@ export interface PaginationCommonPropsAndState extends WidgetsCommonPropsAndStat
      * @defaultValue false
      */
     boundaryLinks: boolean;
+    /**
+     * The template to use for the structure of the pagination component
+     * The default structure uses {@link PaginationCommonPropsAndState.slotEllipsis|slotEllipsis}, {@link PaginationCommonPropsAndState.slotFirst|slotFirst},
+     * {@link PaginationCommonPropsAndState.slotPrevious|slotPrevious}, {@link PaginationCommonPropsAndState.slotNext|slotNext},
+     * {@link PaginationCommonPropsAndState.slotLast|slotLast}, {@link PaginationCommonPropsAndState.slotPages|slotPages},
+     * {@link PaginationCommonPropsAndState.slotNumberLabel|slotNumberLabel},
+     */
+    slotStructure: SlotContent<PaginationContext>;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration
@@ -201,6 +209,26 @@ export interface PaginationProps extends PaginationCommonPropsAndState {
      * ```
      */
     ariaPageLabel: (processPage: number, pageCount: number) => string;
+    /**
+     * Factory function providing the href for a "Page" page anchor,
+     * based on the current page number
+     * @param pageNumber - The index to use in the link
+     * @defaultValue
+     * ```ts
+     * (_pageNumber) => '#'
+     * ```
+     */
+    pageLink: (pageNumber: number) => string;
+}
+export interface DirectionsHrefs {
+    /**
+     * The href for the 'Previous' navigation link
+     */
+    previous: string;
+    /**
+     * The href for the 'Next' direction link
+     */
+    next: string;
 }
 export interface PaginationState extends PaginationCommonPropsAndState {
     /**
@@ -223,29 +251,33 @@ export interface PaginationState extends PaginationCommonPropsAndState {
      * The label for each "Page" page link.
      */
     pagesLabel: string[];
+    /** The hrefs for each "Page" page link */
+    pagesHrefs: string[];
+    /** The hrefs for the direction links  */
+    directionsHrefs: DirectionsHrefs;
 }
 export interface PaginationActions {
     /**
      * To "go" to a specific page
      * @param page - The page number to select
      */
-    select(page: number): void;
+    select(page: number, event?: MouseEvent): void;
     /**
      * To "go" to the first page
      */
-    first(): void;
+    first(event?: MouseEvent): void;
     /**
      * To "go" to the previous page
      */
-    previous(): void;
+    previous(event?: MouseEvent): void;
     /**
      * To "go" to the next page
      */
-    next(): void;
+    next(event?: MouseEvent): void;
     /**
      * To "go" to the last page
      */
-    last(): void;
+    last(event?: MouseEvent): void;
 }
 export interface PaginationApi {
     /**
@@ -321,6 +353,16 @@ export declare function getPaginationDefaultConfig(): {
      * ```
      */
     ariaPageLabel: (processPage: number, pageCount: number) => string;
+    /**
+     * Factory function providing the href for a "Page" page anchor,
+     * based on the current page number
+     * @param pageNumber - The index to use in the link
+     * @defaultValue
+     * ```ts
+     * (_pageNumber) => '#'
+     * ```
+     */
+    pageLink: (pageNumber: number) => string;
     /**
      * The current page.
      *
@@ -393,6 +435,14 @@ export declare function getPaginationDefaultConfig(): {
      * @defaultValue false
      */
     boundaryLinks: boolean;
+    /**
+     * The template to use for the structure of the pagination component
+     * The default structure uses {@link PaginationCommonPropsAndState.slotEllipsis|slotEllipsis}, {@link PaginationCommonPropsAndState.slotFirst|slotFirst},
+     * {@link PaginationCommonPropsAndState.slotPrevious|slotPrevious}, {@link PaginationCommonPropsAndState.slotNext|slotNext},
+     * {@link PaginationCommonPropsAndState.slotLast|slotLast}, {@link PaginationCommonPropsAndState.slotPages|slotPages},
+     * {@link PaginationCommonPropsAndState.slotNumberLabel|slotNumberLabel},
+     */
+    slotStructure: SlotContent<PaginationContext>;
     /**
      * The template to use for the ellipsis slot
      * for I18n, we suggest to use the global configuration

package/components/pagination/pagination.js

@@ -1,9 +1,10 @@
 import { computed } from '@amadeus-it-group/tansu';
 import { INVALID_VALUE } from '../../types';
-import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { bindableProp, stateStores, writablesForProps } from '../../utils/stores';
 import { clamp, isNumber } from '../../utils/internal/checks';
 import { typeBoolean, typeFunction, typeNumber, typeString } from '../../utils/writables';
 import { noop } from '../../utils/internal/func';
+const PAGE_LINK_DEFAULT = '#';
 const defaultConfig = {
     page: 1,
     collectionSize: 0,
@@ -35,7 +36,9 @@ const defaultConfig = {
     slotNext: '›',
     slotLast: '»',
     slotPages: undefined,
+    slotStructure: undefined,
     slotNumberLabel: ({ displayedPage }) => `${displayedPage}`,
+    pageLink: (_page) => PAGE_LINK_DEFAULT,
 };
 /**
  * Returns a shallow copy of the default pagination config
@@ -62,6 +65,7 @@ const configValidator = {
     ariaNextLabel: typeString,
     ariaLastLabel: typeString,
     className: typeString,
+    pageLink: typeFunction,
 };
 /**
  * Create a PaginationWidget with given config props
@@ -73,7 +77,7 @@ export function createPagination(config) {
     // dirty inputs that need adjustment:
     page$: _dirtyPage$, 
     // clean inputs with value validation:
-    collectionSize$, pageSize$, onPageChange$, pagesFactory$, ariaPageLabel$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
+    collectionSize$, pageSize$, onPageChange$, pagesFactory$, ariaPageLabel$, pageLink$, ...stateProps }, patch,] = writablesForProps(defaultConfig, config, configValidator);
     // computed
     // nb total of Pages.
     const pageCount$ = computed(() => {
@@ -85,7 +89,7 @@ export function createPagination(config) {
         return pageCount;
     });
     // current page
-    const page$ = bindableDerived(onPageChange$, [_dirtyPage$, pageCount$], ([dirtyPage, pageCount]) => clamp(dirtyPage, pageCount, 1));
+    const page$ = bindableProp(_dirtyPage$, onPageChange$, (dirtyPage) => clamp(dirtyPage, pageCount$(), 1));
     const pages$ = computed(() => pagesFactory$()(page$(), pageCount$()));
     const nextDisabled$ = computed(() => page$() === pageCount$() || stateProps.disabled$());
     const previousDisabled$ = computed(() => page$() === 1 || stateProps.disabled$());
@@ -94,6 +98,41 @@ export function createPagination(config) {
         const pageCount = pageCount$();
         return pages$().map((page) => ariaPageLabel(page, pageCount));
     });
+    const pagesHrefs$ = computed(() => {
+        const pageLinkFactory = pageLink$();
+        const pageCount = pageCount$();
+        return Array.from({ length: pageCount }, (_, index) => pageLinkFactory(index + 1));
+    });
+    const directionsHrefs$ = computed(() => {
+        const pagesHrefs = pagesHrefs$();
+        const pageIndex = page$() - 1;
+        return {
+            previous: pagesHrefs.at(pageIndex > 0 ? pageIndex - 1 : 0),
+            next: pagesHrefs.at(pageIndex + 1) ?? pagesHrefs.at(-1),
+        };
+    });
+    /**
+     * Stop event propagation when href is the default value;
+     * Update page number when navigation is in the same tab and stop the event propagation;
+     * For navigations outside current browser tab let the default behavior, without updating the page number;
+     * @param pageNumber current page number
+     * @param event UI event triggered when page changed
+     * @param pageNavigationHandler change handler callback for navigation elements
+     */
+    function handleNavigation(pageNumber, event, pageNavigationHandler) {
+        if (pagesHrefs$()[pageNumber - 1] === PAGE_LINK_DEFAULT) {
+            event?.preventDefault();
+        }
+        if (!event || !(event.ctrlKey || event.metaKey)) {
+            event?.preventDefault();
+            if (pageNavigationHandler) {
+                page$.update(pageNavigationHandler);
+            }
+            else {
+                page$.set(pageNumber);
+            }
+        }
+    }
     return {
         ...stateStores({
             pageCount$,
@@ -102,6 +141,8 @@ export function createPagination(config) {
             nextDisabled$,
             previousDisabled$,
             pagesLabel$,
+            pagesHrefs$,
+            directionsHrefs$,
             ...stateProps,
         }),
         patch,
@@ -110,33 +151,38 @@ export function createPagination(config) {
              * Set the current page pageNumber (starting from 1)
              * @param pageNumber - Current page number to set.
              * Value is normalized between 1 and the number of page
+             * @param event UI event that triggered the select
              */
-            select(pageNumber) {
-                patch({ page: pageNumber });
+            select(pageNumber, event) {
+                handleNavigation(pageNumber, event);
             },
             /**
              * Select the first page
+             * @param event Event triggering the action
              */
-            first() {
-                patch({ page: 1 });
+            first(event) {
+                handleNavigation(1, event);
             },
             /**
              * Select the previous page
+             * @param event Event triggering the action
              */
-            previous() {
-                patch({ page: page$() - 1 });
+            previous(event) {
+                handleNavigation(page$() - 1, event, (page) => page - 1);
             },
             /**
              * Select the next page
+             * @param event Event triggering the action
              */
-            next() {
-                patch({ page: page$() + 1 });
+            next(event) {
+                handleNavigation(page$() + 1, event, (page) => page + 1);
             },
             /**
              * Select the last page
+             * @param event Event triggering the action
              */
-            last() {
-                patch({ page: pageCount$() });
+            last(event) {
+                handleNavigation(pageCount$(), event);
             },
         },
         api: {

package/components/progressbar/progressbar.d.ts

@@ -22,9 +22,9 @@ export interface ProgressbarCommonPropsAndState extends WidgetsCommonPropsAndSta
      */
     ariaLabel: string;
     /**
-     * Global template for the Progressbar content.
+     * Global template for the Progressbar.
      */
-    slotContent: SlotContent<ProgressbarContext>;
+    slotStructure: SlotContent<ProgressbarContext>;
     /**
      * Label of the progress.
      */

package/components/progressbar/progressbar.js

@@ -8,7 +8,7 @@ const defaultConfig = {
     value: 0,
     ariaLabel: 'Progressbar',
     className: '',
-    slotContent: undefined,
+    slotStructure: undefined,
     slotDefault: undefined,
     height: '',
     striped: false,

package/components/rating/rating.js

@@ -1,6 +1,6 @@
 import { computed, writable } from '@amadeus-it-group/tansu';
 import { INVALID_VALUE } from '../../types';
-import { bindableDerived, stateStores, writablesForProps } from '../../utils/stores';
+import { bindableProp, stateStores, writablesForProps } from '../../utils/stores';
 import { clamp, isNumber } from '../../utils/internal/checks';
 import { typeBoolean, typeFunction, typeNumber, typeString } from '../../utils/writables';
 import { noop } from '../../utils/internal/func';
@@ -57,15 +57,14 @@ export function createRating(config) {
     const { maxRating$, disabled$, readonly$, resettable$ } = stateProps;
     // clean inputs adjustment to valid range
     const tabindex$ = computed(() => (disabled$() ? -1 : _dirtyTabindex$()));
-    const rating$ = bindableDerived(onRatingChange$, [_dirtyRating$, maxRating$], ([dirtyRating, maxRating]) => clamp(dirtyRating, maxRating));
+    const rating$ = bindableProp(_dirtyRating$, onRatingChange$, (dirtyRating) => clamp(dirtyRating, maxRating$()));
     // internal inputs
     const _hoveredRating$ = writable(0);
     // computed
     const isInteractive$ = computed(() => !disabled$() && !readonly$());
     const visibleRating$ = computed(() => {
-        const rating = rating$(); // call rating unconditionnally (for the bindableDerived to stay active)
         const hoveredRating = _hoveredRating$();
-        return hoveredRating !== 0 ? hoveredRating : rating;
+        return hoveredRating !== 0 ? hoveredRating : rating$();
     });
     const ariaValueText$ = computed(() => ariaValueTextFn$()(visibleRating$(), maxRating$()));
     const stars$ = computed(() => {
@@ -89,7 +88,7 @@ export function createRating(config) {
         actions: {
             click: (index) => {
                 if (isInteractive$() && index > 0 && index <= maxRating$()) {
-                    patch({ rating: rating$() === index && resettable$() ? 0 : index });
+                    rating$.update((rating) => (rating === index && resettable$() ? 0 : index));
                 }
             },
             hover: (index) => {
@@ -110,19 +109,19 @@ export function createRating(config) {
                     switch (key) {
                         case 'ArrowLeft':
                         case 'ArrowDown':
-                            patch({ rating: rating$() - 1 });
+                            rating$.update((rating) => rating - 1);
                             break;
                         case 'ArrowRight':
                         case 'ArrowUp':
-                            patch({ rating: rating$() + 1 });
+                            rating$.update((rating) => rating + 1);
                             break;
                         case 'Home':
                         case 'PageDown':
-                            patch({ rating: 0 });
+                            rating$.set(0);
                             break;
                         case 'End':
                         case 'PageUp':
-                            patch({ rating: maxRating$() });
+                            rating$.set(maxRating$());
                             break;
                         default:
                             return;

package/components/select/select.d.ts

@@ -1,7 +1,7 @@
 import type { Placement } from '@floating-ui/dom';
 import type { FloatingUI } from '../../services/floatingUI';
 import type { HasFocus } from '../../services/focustrack';
-import type { PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
+import type { Directive, PropsConfig, SlotContent, Widget, WidgetSlotContext } from '../../types';
 import type { WidgetsCommonPropsAndState } from '../commonProps';
 /**
  * A type for the slot context of the pagination widget
@@ -80,6 +80,12 @@ export interface SelectProps<T> extends SelectCommonPropsAndState<T> {
      * By default, the item is returned
      */
     itemIdFn(item: T): string;
+    /**
+     * Retrieves navigable elements within an HTML element containing badges and the input.
+     *
+     * @param node - HTMLElement that contains the badges and the input
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLSpanElement | HTMLInputElement>;
     /**
      * Callback called dropdown open state change
      * @param isOpen - updated open state
@@ -163,27 +169,6 @@ export interface SelectApi<Item> {
      * Highlight the last item among the visible list
      */
     highlightLast(): void;
-    /**
-     * Focus the provided item among the selected list.
-     * The focus feature is designed to know what item must be focused in the UI, i.e. among the badge elements.
-     */
-    focus(item: Item): void;
-    /**
-     * Focus the first element
-     */
-    focusFirst(): void;
-    /**
-     * Focus the previous element. If no element was focused before the call, nothing happens.
-     */
-    focusPrevious(): void;
-    /**
-     * Focus the next element. If no element was focused before the call, nothing happens.
-     */
-    focusNext(): void;
-    /**
-     * Focus the last element. If no element was focused before the call, nothing happens.
-     */
-    focusLast(): void;
     /**
      * Select the provided item.
      * The selected list is used to
@@ -228,8 +213,12 @@ export interface SelectDirectives {
      * A directive to be applied to the input group element serves as the base for menu positioning
      */
     referenceDirective: FloatingUI['directives']['referenceDirective'];
+    /**
+     * A directive to be applied to the element that contains the badges and the input
+     */
+    inputContainerDirective: Directive;
 }
-export interface SelectActions {
+export interface SelectActions<Item> {
     /**
      * Method to be plugged to on the 'input' event. The input text will be used as the filter text.
      */
@@ -237,12 +226,23 @@ export interface SelectActions {
         target: any;
     }) => void;
     /**
-     * Method to be plugged to on an keydown event, in order to control the keyboard interactions with the highlighted item.
+     * Method to be attached to the node element to close a badge on click.
+     */
+    onRemoveBadgeClick: (event: MouseEvent, item: Item) => void;
+    /**
+     * Method to be plugged to on an keydown event of the main input, in order to control the keyboard interactions with the highlighted item.
      * It manages arrow keys to move the highlighted item, or enter to toggle the item.
      */
-    onInputKeydown: (e: any) => void;
+    onInputKeydown: (event: KeyboardEvent) => void;
+    /**
+     * Method to be plugged to on an keydown event of a badge container, in order to manage main actions on badges.
+     *
+     * @param event - keyboard event
+     * @param item - corresponding item
+     */
+    onBadgeKeydown: (event: KeyboardEvent, item: Item) => void;
 }
-export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions, SelectDirectives>;
+export type SelectWidget<Item> = Widget<SelectProps<Item>, SelectState<Item>, SelectApi<Item>, SelectActions<Item>, SelectDirectives>;
 export declare const defaultConfig: SelectProps<any>;
 /**
  * Returns a shallow copy of the default select config.
@@ -263,6 +263,12 @@ export declare function getSelectDefaultConfig(): {
      * By default, the item is returned
      */
     itemIdFn(item: any): string;
+    /**
+     * Retrieves navigable elements within an HTML element containing badges and the input.
+     *
+     * @param node - HTMLElement that contains the badges and the input
+     */
+    navSelector(node: HTMLElement): NodeListOf<HTMLInputElement | HTMLSpanElement>;
     /**
      * Callback called dropdown open state change
      * @param isOpen - updated open state