@maggioli-design-system/magma 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/types/components/mds-accordion/mds-accordion.d.ts

@@ -2,7 +2,7 @@ import { MdsAccordionItemEventDetail } from "../mds-accordion-item/meta/event-de
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionEventDetail } from './meta/event-detail';
 /**
- * @slot default - Add `mds-accordion-item` element/s.
+ * @slot - Add `mds-accordion-item` element/s.
  */
 export declare class MdsAccordion {
     private element;

package/dist/types/components/mds-accordion-item/mds-accordion-item.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { TypographyTitleType } from "../../type/typography";
 import { MdsAccordionItemEventDetail } from './meta/event-detail';
 /**
- * @slot default - Add contents like `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add contents like `text string`, `HTML elements` or `components` to this slot.
  * @part content - the content wrapper of the `default` slot
  * @part icon - The arrow icon of the component
  * @part label - The text label of the component

package/dist/types/components/mds-accordion-timer/mds-accordion-timer.d.ts

@@ -2,7 +2,7 @@ import { MdsAccordionTimerItemEventDetail } from "../mds-accordion-timer-item/me
 import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionTimerEventDetail } from './meta/event-detail';
 /**
- * @slot default - Add `mds-accordion-timer-item` element/s.
+ * @slot - Add `mds-accordion-timer-item` element/s.
  */
 export declare class MdsAccordionTimer {
     private timeChecker;

package/dist/types/components/mds-accordion-timer-item/mds-accordion-timer-item.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsAccordionTimerItemEventDetail } from './meta/event-detail';
 import { TypographyTitleType } from "../../type/typography";
 /**
- * @slot default - Add content like `text string`, `HTML elements` or `components` to this slot
+ * @slot - Add content like `text string`, `HTML elements` or `components` to this slot
  * @part content - the content wrapper of the `default` slot
  * @part icon - The arrow icon of the component
  * @part label - The text label of the component

package/dist/types/components/mds-author/mds-author.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot. Insert author information, name, role or other useful author infos.
  * @slot avatar - Insert an avatar image, it is **recommended** to add `mds-avatar` element.
  */
 export declare class MdsAuthor {

package/dist/types/components/mds-avatar-stack/mds-avatar-stack.d.ts

@@ -1,4 +1,7 @@
 import { AvatarSizeType } from './meta/types';
+/**
+ * @slot - Add `mds-avatar-stack-item` elements to display in the stack.
+ */
 export declare class MdsAvatarStack {
     host: HTMLMdsAvatarStackElement;
     private items;

package/dist/types/components/mds-badge/mds-badge.d.ts

@@ -2,7 +2,7 @@ import { TypographyLabelType } from "../../type/typography";
 import { ThemeFullVariantType } from "../../type/variant";
 import { ToneSmartVariantType } from "../../type/tone";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  */
 export declare class MdsBadge {
     host: HTMLMdsBadgeElement;

package/dist/types/components/mds-banner/mds-banner.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { ThemeVariantType } from "../../type/variant";
 import { ToneMinimalBoxVariantType } from "../../type/tone";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @part text - The text wrapper of the `default` and `content` slots
  */
@@ -12,6 +12,9 @@ export declare class MdsBanner {
     private km;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     closeButtonVariant: ThemeVariantType;
     /**

package/dist/types/components/mds-benchmark-bar/mds-benchmark-bar.d.ts

@@ -2,7 +2,7 @@ import { ThemeVariantType } from "../../type/variant";
 import { BenchmarkBarTypographyType } from './meta/types';
 import { ProgressBarSizeType } from "../../type/progress";
 /**
- * @slot default - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - **Deprecated**, use the `label` property instead. Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @part progress-bar - The progress bar element
  */
 export declare class MdsBenchmarkBar {

package/dist/types/components/mds-breadcrumb/mds-breadcrumb.d.ts

@@ -2,13 +2,16 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsBreadcrumbEventDetail } from './meta/event-detail';
 import { MdsBreadcrumbItemEventDetail } from "../mds-breadcrumb-item/meta/event-detail";
 /**
- * @slot default - Add `mds-breadcrumb-item` element/s.
+ * @slot - Add `mds-breadcrumb-item` element/s.
  */
 export declare class MdsBreadcrumb {
     private element;
     private kb;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Choose to display or not the back arrow button

package/dist/types/components/mds-button/mds-button.d.ts

@@ -3,7 +3,7 @@ import { ToneBoxVariantType } from "../../type/tone";
 import { TypographyTruncateType } from "../../type/text";
 import { TextAnimationType } from "../mds-text/meta/types";
 /**
- * @slot default - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
+ * @slot - Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here.
  * @slot notification - Add `HTML elements` or `components`, it is **recommended** to use `mds-notification` element.
  * @part icon - The icon inside the component
  */

package/dist/types/components/mds-button-dropdown/mds-button-dropdown.d.ts

@@ -1,6 +1,9 @@
 import { ButtonSizeType, ButtonTargetType, ButtonType, ButtonDropdownVariantType } from "../../type/button";
 import { ToneMinimalVariantType } from "../../type/tone";
 import { TypographyTruncateType } from "../../type/text";
+/**
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
+ */
 export declare class MdsButtonDropdown {
     /**
      * Specifies le text label of the component

package/dist/types/components/mds-button-group/mds-button-group.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @slot - Add `mds-button` elements to this slot.
+ */
 export declare class MdsButtonGroup {
     render(): any;
 }

package/dist/types/components/mds-calendar/mds-calendar.d.ts

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { DateTime } from 'luxon';
 import { ISO8601Date } from "../../type/date";
+/**
+ * @slot preselection - Add `HTML elements` or `components` shown in the calendar preselection area.
+ */
 export declare class MdsCalendar {
     private host;
     hasPreselection: boolean;
@@ -14,8 +17,42 @@ export declare class MdsCalendar {
     selectedYear: number;
     private readonly t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
+    /**
+     * Enables selecting a date range (start and end date) instead of a single date.
+     */
     readonly rangePicker: boolean;
+    /**
+     * Shows the previous navigation button in the calendar header.
+     */
+    readonly showPreviousButton: boolean;
+    /**
+     * Shows the next navigation button in the calendar header.
+     */
+    readonly showNextButton: boolean;
+    /**
+     * Disables switching to month or year selection views from the calendar header.
+     */
+    readonly disableMonthYearSelection: boolean;
+    /**
+     * Shows the preselection area above the calendar view.
+     */
+    readonly showPreselection: boolean;
+    /**
+     * Specifies the date used to determine the visible month without changing the selection.
+     * @description It's in ISO format (YYYY-MM-DD).
+     * @example '2023-10-01'
+     */
+    readonly viewDate: string | null;
+    /**
+     * Specifies the date used to preview the range selection across multiple visible calendars.
+     * @description It's in ISO format (YYYY-MM-DD).
+     * @example '2023-10-15'
+     */
+    readonly hoverDate: string | null;
     /**
      * Specifies the start date of the selection
      * @description It's in ISO format (YYYY-MM-DD).
@@ -42,31 +79,61 @@ export declare class MdsCalendar {
     readonly max: string | null;
     internalStartDate: string | null;
     internalEndDate: string | null;
+    /**
+     * Emitted when the selected date or date range changes.
+     */
     datesEmitter: EventEmitter<{
         startDate: string;
         endDate?: string;
     }>;
+    /**
+     * Emitted when the user navigates to a different month or year.
+     */
+    navigationEmitter: EventEmitter<{
+        currentDate: string;
+        delta: number;
+    }>;
+    /**
+     * Emitted when the user hovers over a day, used to preview a range selection.
+     */
+    hoverEmitter: EventEmitter<{
+        hoverDate: string | null;
+    }>;
+    /**
+     * Emitted when the calendar's preselection options need to be re-evaluated.
+     */
     checkPreselectionsEmitter: EventEmitter<void>;
     handleStartDate(newValue: ISO8601Date | null): void;
     handleEndDate(newValue: ISO8601Date | null): void;
-    startDateTime: DateTime;
-    endDateTime: DateTime;
+    handleViewDate(newValue: ISO8601Date | null): void;
+    handleHoverDate(): void;
+    private startDateTime;
+    private endDateTime;
     currentMonth: string;
-    currentMonthNumber: number;
+    private currentMonthNumber;
     currentYear: string;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Sets the calendar's current date and re-renders the calendar accordingly.
+     * @param date the date to display, in ISO format (YYYY-MM-DD)
+     */
     updateCurrentDate(date: string): Promise<void>;
+    private readonly handleMouseOver;
+    private readonly handleMouseLeave;
     private updateDates;
-    updateCalendar(): Promise<void>;
-    setDates(): void;
+    private updateCalendar;
+    private setDates;
+    private clearSelectionState;
     private setRangeSelection;
+    private setHoverSelection;
     private setSingleSelection;
-    changeMonth(delta: number): void;
-    calculateWeekDaysInMonth(): void;
+    private changeMonth;
+    private readonly handleMonthActionClick;
+    private readonly handleYearActionClick;
+    private calculateWeekDaysInMonth;
     private handleRange;
-    private handleHover;
     private handleSingleSelection;
     render(): any;
 }

package/dist/types/components/mds-card-content/mds-card-content.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export declare class MdsCardContent {
     render(): any;

package/dist/types/components/mds-card-footer/mds-card-footer.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export declare class MdsCardFooter {
     render(): any;

package/dist/types/components/mds-card-header/mds-card-header.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  */
 export declare class MdsCardHeader {

package/dist/types/components/mds-card-media/mds-card-media.d.ts

@@ -1,5 +1,5 @@
 /**
- * @slot default - Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents.
+ * @slot - Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents.
  * @slot content - Add `text string`, `HTML elements` or `components` to this slot, contents will be shown in front of the media element.
  */
 export declare class MdsCardMedia {

package/dist/types/components/mds-chip/mds-chip.d.ts

@@ -7,6 +7,9 @@ export declare class MdsChip {
     private km;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Adds ARIA support to the element if has interaction

package/dist/types/components/mds-details/mds-details.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @slot icon - Insert an icon image, it can be `HTML elements` or `components`, it is **recommended** to add `mds-icon` element.
  * @slot title - Add a `text string`, `HTML elements` or `components`, it is **recommended** to use `mds-text` element.

package/dist/types/components/mds-dropdown/mds-dropdown.d.ts

@@ -4,7 +4,7 @@ import { MdsDropdownEventDetail } from './meta/event-detail';
 import { DropdownInteractionType } from './meta/types';
 import { FloatingElement } from "../../common/floating-controller";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot, elements will be shown when the component is triggered.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot, elements will be shown when the component is triggered.
  */
 export declare class MdsDropdown implements FloatingElement {
     private readonly km;
@@ -98,9 +98,9 @@ export declare class MdsDropdown implements FloatingElement {
     strategyChanged(): void;
     targetChanged(): void;
     visibleChanged(newValue: boolean): void;
-    onClickTarget(ev: Event): void;
-    onMouseOverTarget(): void;
-    onMouseOutTarget(): void;
+    private onClickTarget;
+    private onMouseOverTarget;
+    private onMouseOutTarget;
     private readonly updateCSSCustomProps;
     private readonly handleCloseDropdown;
     private readonly setInteractionBehaviour;

package/dist/types/components/mds-emoji/mds-emoji.d.ts

@@ -1,6 +1,9 @@
 import type { EmojiNames } from './meta/types';
 export declare class MdsEmoji {
     host: HTMLMdsEmojiElement;
+    /**
+     * Specifies which emoji to display.
+     */
     readonly name: EmojiNames;
     private emojiOriginalSize;
     private isFollowingMouse;
@@ -73,6 +76,10 @@ export declare class MdsEmoji {
      * Emoji start thinking, useful for pending requests.
      */
     startThinking(duration?: number): Promise<void>;
+    /**
+     * Stops the "thinking" animation after the given duration.
+     * @param duration the animation duration, in seconds
+     */
     stopThinking(duration?: number): Promise<void>;
     /**
      * @returns Promise<void>

package/dist/types/components/mds-entity/mds-entity.d.ts

@@ -1,7 +1,7 @@
 import { ThemeFullVariantAvatarType } from "../../type/variant";
 import { ToneMinimalVariantType } from "../../type/tone";
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  * @slot action - Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  * @slot detail - Add `HTML elements` or `components` to this slot.
  * @part spinner - The spinner element

package/dist/types/components/mds-file/mds-file.d.ts

@@ -5,6 +5,9 @@ export declare class MdsFile {
     private host;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     private wasDownloaded;
     /**

package/dist/types/components/mds-file-preview/mds-file-preview.d.ts

@@ -7,6 +7,9 @@ export declare class MdsFilePreview {
     host: HTMLMdsFilePreviewElement;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Enables the cross icon to perform cancel/delete action on element

package/dist/types/components/mds-filter/mds-filter.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
 import { MdsFilterEventDetail } from './meta/event-detail';
 import { MdsFilterItemEventDetail } from "../mds-filter-item/meta/event-detail";
 /**
- * @slot default - Add `mds-filter-item` element/s.
+ * @slot - Add `mds-filter-item` element/s.
  */
 export declare class MdsFilter {
     private element;

package/dist/types/components/mds-filter-item/mds-filter-item.d.ts

@@ -33,6 +33,6 @@ export declare class MdsFilterItem {
      */
     selectedEvent: EventEmitter<MdsFilterItemEventDetail>;
     componentDidLoad(): void;
-    disconnectedCallback: () => void;
+    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/mds-header/mds-header.d.ts

@@ -3,7 +3,7 @@ import { MdsHeaderEventDetail, MdsHeaderVisibilityEventDetail } from './meta/eve
 import { HeaderBarMenuType, HeaderBarNavType } from "../../type/header-bar";
 /**
  * @part menu - The container element of the modal
- * @slot default - Add `mds-header-bar` element/s.
+ * @slot - Add `mds-header-bar` element/s.
  * @slot menu - Put actions and other contents that will be shown as mobile menu. Add `text string`, `HTML elements` or `components` to this slot.
  */
 export declare class MdsHeader {
@@ -61,6 +61,10 @@ export declare class MdsHeader {
      * Emits when the component mds-header-bar is shown or hidden
      */
     visibleEvent: EventEmitter<MdsHeaderVisibilityEventDetail>;
+    /**
+     * Opens or closes the header.
+     * @param isOpened whether the header should be opened
+     */
     setOpened(isOpened?: boolean): Promise<void>;
     private mobileMenu;
     private close;

package/dist/types/components/mds-header-bar/mds-header-bar.d.ts

@@ -4,7 +4,7 @@ import { HeaderBarMenuType, HeaderBarNavType } from "../../type/header-bar";
  * @part actions - Selects the element which wraps `nav` and `hamburger` parts
  * @part hamburger - Selects the `hamburger` menu action element
  * @part nav - Selects the `nav` element that contains the horizontal menu
- * @slot default - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Put contents, like logo and a small description shown on the left of the component. Add `text string`, `HTML elements` or `components` to this slot.
  * @slot nav - Put the actions shown when the component is on desktop mode. Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.
  */
 export declare class MdsHeaderBar {
@@ -25,6 +25,10 @@ export declare class MdsHeaderBar {
      */
     openedEvent: EventEmitter<void>;
     private open;
+    /**
+     * Opens or closes the header bar.
+     * @param isOpened whether the header bar should be opened
+     */
     setOpened(isOpened?: boolean): Promise<void>;
     render(): any;
 }

package/dist/types/components/mds-help/mds-help.d.ts

@@ -1,6 +1,6 @@
 import { FloatingUIPlacement } from "../../type/floating-ui";
 /**
- * @slot default - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
+ * @slot - Add `text string` to this slot, **avoid** `HTML elements` or `components`.
  */
 export declare class MdsHelp {
     /**

package/dist/types/components/mds-horizontal-scroll/mds-horizontal-scroll.d.ts

@@ -1,6 +1,6 @@
 import { SnapType, NavigationType, ViewportType } from './meta/types';
 /**
- * @slot default - Add `text string`, `HTML elements` or `components` to this slot.
+ * @slot - Add `text string`, `HTML elements` or `components` to this slot.
  */
 export declare class MdsHorizontalScroll {
     private host;

package/dist/types/components/mds-icon/services/icons-set.service.d.ts

@@ -5,9 +5,10 @@ declare class IconsSetController {
     private readonly _svgPathUpdate;
     private readonly cacheExp;
     private readonly listeners;
-    private _svgPath;
     private memoryCache;
     constructor();
+    private get _svgPath();
+    private set _svgPath(value);
     addIconSet(name: string, path: string, resolveIconName: IconNameResolverFn): boolean;
     getIconSet(iconName: string): {
         set: null;

package/dist/types/components/mds-img/mds-img.d.ts

@@ -11,6 +11,9 @@ export declare class MdsImg {
     private srcsetConsumptionData?;
     private t;
     language: string;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Specifies an alternate text for an image

package/dist/types/components/mds-input/mds-input.d.ts

@@ -48,6 +48,9 @@ export declare class MdsInput {
     countVariant: InputTipItemVariantType;
     isPasswordVisible: boolean;
     private t;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     internals: ElementInternals;
     /**
@@ -189,7 +192,15 @@ export declare class MdsInput {
     protected valueChanged(): void;
     protected variantChanged(newValue: ThemeInputVariantType): void;
     private maxLengthChanged;
+    /**
+     * Adds a validator to the input.
+     * @param validator the validator function to add
+     */
     addValidator(validator: MdsValidatorFn): Promise<void>;
+    /**
+     * Removes a previously added validator from the input.
+     * @param validator the validator function to remove
+     */
     removeValidator(validator: MdsValidatorFn): Promise<void>;
     /**
      * Returns if validator is presen
@@ -197,6 +208,10 @@ export declare class MdsInput {
      * @returns if a validator is present or not, if no validator given, return if there are at least one validator
      */
     hasValidator(validator?: MdsValidatorFn): Promise<boolean>;
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     getErrors(): Promise<MdsValidationErrors | null>;
     private validateInput;
     private countMaxLength;

package/dist/types/components/mds-input-date/mds-input-date.d.ts

@@ -5,10 +5,14 @@ export declare class MdsInputDate {
     host: HTMLMdsInputDateElement;
     internals: ElementInternals;
     private isSlotted;
+    empty: boolean | undefined;
     isValid: boolean;
     private t;
     language: string;
     touched: boolean;
+    /**
+     * Updates the component's texts to the locale currently set on the host element.
+     */
     updateLang(): Promise<void>;
     /**
      * Specifies the value of the input
@@ -57,15 +61,29 @@ export declare class MdsInputDate {
     calendarKey: number;
     dropdownRef?: HTMLMdsDropdownElement;
     hasFocus: boolean;
+    /**
+     * Emitted when the selected date value changes.
+     */
     valueChange: EventEmitter<string>;
     handleValue(): void;
     private validateValue;
+    /**
+     * Sets focus on the underlying input element.
+     */
     focusInput(): Promise<void>;
+    /**
+     * Sets the input value.
+     * @param value the value to set, in ISO format (YYYY-MM-DD)
+     */
     setValue(value: string): Promise<void>;
+    /**
+     * Returns the current validation errors, or `null` if the value is valid.
+     * @returns the validation errors, or `null` when valid
+     */
     getErrors(): Promise<MdsValidationErrors | null>;
     formResetCallback(): void;
     componentWillLoad(): void;
-    handleChange: (event: Event) => void;
+    private handleChange;
     private onBlur;
     private onFocus;
     render(): any;