open-index/open-npm huggingface dataset:
npm package: @maggioli-design-system/mds-accordion
Description: mds-accordion is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 4.14.6

# mds-accordion


This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description                                                | Type                   | Default |
| ---------- | ---------- | ---------------------------------------------------------- | ---------------------- | ------- |
| `closable` | `closable` | Specifies if an item can be closed by user                 | `boolean \| undefined` | `true`  |
| `multiple` | `multiple` | Choose if multiple siblings can be selected simultaneously | `boolean \| undefined` | `false` |


## Events

| Event                | Description                                            | Type                                   |
| -------------------- | ------------------------------------------------------ | -------------------------------------- |
| `mdsAccordionChange` | Emits when the component attribute selected is changed | `CustomEvent<MdsAccordionEventDetail>` |


## Slots

| Slot        | Description                         |
| ----------- | ----------------------------------- |
| `"default"` | Add `mds-accordion-item` element/s. |


## CSS Custom Properties

| Name                                 | Description                                                                                           |
| ------------------------------------ | ----------------------------------------------------------------------------------------------------- |
| `--mds-accordion-border-color`       | Sets the border-color of the component children mds-accordion-item                                    |
| `--mds-accordion-color`              | Sets the text-color of the component children mds-accordion-item                                      |
| `--mds-accordion-description-color`  | Sets the color of the always visible title description                                                |
| `--mds-accordion-duration`           | Sets the transition duration of the close/open animation of the component children mds-accordion-item |
| `--mds-accordion-padding-selected`   | Sets the vertical padding of the component children mds-accordion-item when it's selected             |
| `--mds-accordion-padding-unselected` | Sets the vertical padding of the component children mds-accordion-item when it's unselected           |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-accordion-timer
Description: mds-accordion-timer is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 4.2.7

# mds-accordion-timer



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description                                    | Type                   | Default     |
| ---------- | ---------- | ---------------------------------------------- | ---------------------- | ----------- |
| `duration` | `duration` | Sets the duration of the single accordion item | `number`               | `10000`     |
| `paused`   | `paused`   | When paused is defined, the timer stops run    | `boolean \| undefined` | `undefined` |


## Events

| Event                     | Description                                | Type                                        |
| ------------------------- | ------------------------------------------ | ------------------------------------------- |
| `mdsAccordionTimerChange` | Emits when the accordion changes it's item | `CustomEvent<MdsAccordionTimerEventDetail>` |


## Slots

| Slot        | Description                               |
| ----------- | ----------------------------------------- |
| `"default"` | Add `mds-accordion-timer-item` element/s. |


## CSS Custom Properties

| Name                                            | Description                                                                                 |
| ----------------------------------------------- | ------------------------------------------------------------------------------------------- |
| `--mds-accordion-timer-color`                   | Sets the text color of the component mds-accordion-timer-item                               |
| `--mds-accordion-timer-duration`                | Sets the transition duration of open/close animation of the mds-accordion-timer-item        |
| `--mds-accordion-timer-progress-bar-background` | Sets the background-color of the progress bar when the mds-accordion-timer-item is selected |
| `--mds-accordion-timer-progress-bar-color`      | Sets the color of the progress bar when the mds-accordion-timer-item is selected            |
| `--mds-accordion-timer-progress-bar-thickness`  | Sets thickness of the progress bar of the mds-accordion-timer-item                          |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-avatar-stack
Description: mds-avatar-stack is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.0

# mds-avatar-stack



<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                                        | Type                                | Default     |
| -------- | --------- | -------------------------------------------------- | ----------------------------------- | ----------- |
| `size`   | `size`    | Specifies the size of the slotted avatars elements | `"lg" \| "md" \| "sm" \| undefined` | `undefined` |
| `total`  | `total`   | Specifies the size of the slotted avatars elements | `number \| undefined`               | `undefined` |


## Dependencies

### Depends on

- [mds-avatar-stack-item](../mds-avatar-stack-item)

### Graph
```mermaid
graph TD;
  mds-avatar-stack --> mds-avatar-stack-item
  mds-avatar-stack-item --> mds-avatar
  mds-avatar --> mds-img
  mds-avatar --> mds-icon
  mds-img --> mds-icon
  mds-img --> mds-text
  mds-img --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-avatar-stack fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-benchmark-bar
Description: mds-benchmark-bar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 3.3.0

# mds-benchmark-bar



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property     | Attribute    | Description                                             | Type                                                                                                 | Default     |
| ------------ | ------------ | ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- | ----------- |
| `alias`      | `alias`      | An alias to custom how value is represented             | `string \| undefined`                                                                                | `undefined` |
| `typography` | `typography` | The typography of the component                         | `"label" \| "option" \| undefined`                                                                   | `'label'`   |
| `value`      | `value`      | A value between 0 and 100 that rapresents the benchmark | `number`                                                                                             | `0`         |
| `variant`    | `variant`    | Sets the theme variant colors                           | `"ai" \| "dark" \| "error" \| "info" \| "light" \| "primary" \| "success" \| "warning" \| undefined` | `'dark'`    |


## Slots

| Slot        | Description                                                                            |
| ----------- | -------------------------------------------------------------------------------------- |
| `"default"` | Add `text string` to this slot, **avoid** to add `HTML elements` or `components` here. |


## Shadow Parts

| Part    | Description                                                       |
| ------- | ----------------------------------------------------------------- |
| `"bar"` | Selects the `mds-progress` element that contains the progress bar |


## Dependencies

### Depends on

- [mds-text](../mds-text)
- [mds-progress](../mds-progress)

### Graph
```mermaid
graph TD;
  mds-benchmark-bar --> mds-text
  mds-benchmark-bar --> mds-progress
  style mds-benchmark-bar fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-button-group
Description: mds-button-group is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.3

# mds-button-group



<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-calendar
Description: mds-calendar is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.1

# mds-calendar



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute      | Description                                 | Type             | Default |
| ------------- | -------------- | ------------------------------------------- | ---------------- | ------- |
| `endDate`     | `end-date`     | Specifies the end date of the selection     | `null \| string` | `null`  |
| `max`         | `max`          | Specifies the minimum date of the selection | `null \| string` | `null`  |
| `min`         | `min`          | Specifies the minimum date of the selection | `null \| string` | `null`  |
| `rangePicker` | `range-picker` |                                             | `boolean`        | `true`  |
| `startDate`   | `start-date`   | Specifies the start date of the selection   | `null \| string` | `null`  |


## Events

| Event                  | Description | Type                                                                 |
| ---------------------- | ----------- | -------------------------------------------------------------------- |
| `mdsCalendarChange`    |             | `CustomEvent<{ startDate: string; endDate?: string \| undefined; }>` |
| `mdsCalendarPreselect` |             | `CustomEvent<void>`                                                  |


## Methods

### `updateCurrentDate(date: string) => Promise<void>`



#### Parameters

| Name   | Type     | Description |
| ------ | -------- | ----------- |
| `date` | `string` |             |

#### Returns

Type: `Promise<void>`



### `updateLang() => Promise<void>`



#### Returns

Type: `Promise<void>`




## Dependencies

### Used by

 - [mds-input-date](../mds-input-date)
 - [mds-input-date-range](../mds-input-date-range)

### Depends on

- [mds-button](../mds-button)
- [mds-calendar-cell](../mds-calendar-cell)

### Graph
```mermaid
graph TD;
  mds-calendar --> mds-button
  mds-calendar --> mds-calendar-cell
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-calendar-cell --> mds-button
  mds-input-date --> mds-calendar
  mds-input-date-range --> mds-calendar
  style mds-calendar fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-calendar-cell
Description: mds-calendar-cell is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.1

# mds-calendar-cell



<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description                                                    | Type                                                              | Default        |
| ------------- | ------------- | -------------------------------------------------------------- | ----------------------------------------------------------------- | -------------- |
| `date`        | `date`        | Specifies the date of the cell                                 | `string \| undefined`                                             | `undefined`    |
| `disabled`    | `disabled`    | Specifies if the cell is disabled                              | `boolean \| undefined`                                            | `undefined`    |
| `month`       | `month`       | Specifies if the current month or a weekend                    | `"current" \| "other" \| "weekend" \| undefined`                  | `'current'`    |
| `orientation` | `orientation` | Specifies the selection orientation of the cell                | `"both" \| "horizontal" \| "vertical" \| undefined`               | `'horizontal'` |
| `preview`     | `preview`     | Specifies if the selection is a preview or the final selection | `boolean \| undefined`                                            | `false`        |
| `selection`   | `selection`   | Specifies the point of selection of the cell                   | `"end" \| "middle" \| "none" \| "single" \| "start" \| undefined` | `undefined`    |
| `today`       | `today`       | Specifies if the cell is today                                 | `boolean \| undefined`                                            | `undefined`    |


## Dependencies

### Used by

 - [mds-calendar](../mds-calendar)

### Depends on

- [mds-button](../mds-button)

### Graph
```mermaid
graph TD;
  mds-calendar-cell --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-calendar --> mds-calendar-cell
  style mds-calendar-cell fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-card-content
Description: mds-card-content is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.5.3

# mds-card-content



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot. |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-card-footer
Description: mds-card-footer is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.5.3

# mds-card-footer



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                                                      |
| ----------- | ---------------------------------------------------------------- |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot. |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-card-header
Description: mds-card-header is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.5.4

# mds-card-header



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                                                                             |
| ----------- | --------------------------------------------------------------------------------------- |
| `"action"`  | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element. |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot.                        |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-card-media
Description: mds-card-media is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.5.3

# mds-card-media



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Slots

| Slot        | Description                                                                                                                                          |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"content"` | Add `text string`, `HTML elements` or `components` to this slot, contents will be shown in front of the media element.                               |
| `"default"` | Add `HTML elements` or `components` to this slot, it is **recommended** to add `mds-img` element or other component which represents media contents. |


## Shadow Parts

| Part        | Description |
| ----------- | ----------- |
| `"content"` |             |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-details
Description: mds-details is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 4.2.5

# mds-details



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description                          | Type      | Default |
| -------- | --------- | ------------------------------------ | --------- | ------- |
| `opened` | `opened`  | Specifies if the component is opened | `boolean` | `false` |


## Events

| Event              | Description                        | Type                   |
| ------------------ | ---------------------------------- | ---------------------- |
| `mdsDetailsChange` | Emits when the component is opened | `CustomEvent<boolean>` |


## Slots

| Slot        | Description                                                                                                       |
| ----------- | ----------------------------------------------------------------------------------------------------------------- |
| `"action"`  | Add `HTML elements` or `components`, it is **recommended** to use `mds-button` element.                           |
| `"default"` | Add `text string`, `HTML elements` or `components` to this slot.                                                  |
| `"icon"`    | Insert an icon image, it can be `HTML elements` or `components`, it is **recommended** to add `mds-icon` element. |
| `"title"`   | Add a `text string`, `HTML elements` or `components`, it is **recommended** to use `mds-text` element.            |


## Shadow Parts

| Part        | Description                                              |
| ----------- | -------------------------------------------------------- |
| `"content"` | The content wrapper of the `default` and `content` slots |
| `"header"`  | The header of the component                              |


## CSS Custom Properties

| Name                              | Description                                         |
| --------------------------------- | --------------------------------------------------- |
| `--mds-details-helper-icon-color` | Sets icon color of the helper icon of the component |
| `--mds-details-icon-color`        | Sets the icon color the component                   |


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-emoji
Description: mds-emoji is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.1.0

# mds-emoji



<!-- Auto Generated Below -->


## Properties

| Property | Attribute | Description | Type     | Default     |
| -------- | --------- | ----------- | -------- | ----------- |
| `name`   | `name`    |             | `string` | `'hexabot'` |


## Methods

### `agree() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Emoji agrees, useful for confirm actions.

### `disagree(turnHappyDelay?: number) => Promise<void>`



#### Parameters

| Name             | Type     | Description |
| ---------------- | -------- | ----------- |
| `turnHappyDelay` | `number` |             |

#### Returns

Type: `Promise<void>`

Promise<void>
Emoji disagrees, useful for errors or unwanted results.

### `startBlinking() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Eyes start blinking.

### `startFollowMouse() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Starts following mouse with CSS 3D transform.

### `startThinking() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Emoji start thinking, useful for pending requests.

### `stopBlinking() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Eyes stop blinking.

### `stopFollowMouse() => Promise<void>`



#### Returns

Type: `Promise<void>`

Promise<void>
Stops following mouse with CSS 3D transform.

### `stopThinking() => Promise<void>`



#### Returns

Type: `Promise<void>`




----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-flex-table
Description: mds-flex-table is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 3.0.0

# mds-flex-table

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description                                                  | Type      | Default     |
| ------------- | ------------- | ------------------------------------------------------------ | --------- | ----------- |
| `interactive` | `interactive` | Specifies if the table row are higlighted on mouseover event | `boolean` | `undefined` |
| `template`    | `template`    | Specifies the template for flex children elements            | `string`  | `undefined` |


## Events

| Event                           | Description                                 | Type                   |
| ------------------------------- | ------------------------------------------- | ---------------------- |
| `mdsFlexTableInteractiveChange` | Dispatces when interactive property changes | `CustomEvent<boolean>` |
| `mdsFlexTableTemplateChange`    | Dispatces when template property changes    | `CustomEvent<string>`  |


## CSS Custom Properties

| Name                     | Description                                                                          |
| ------------------------ | ------------------------------------------------------------------------------------ |
| `--background`           | The cell background-color of the table body                                          |
| `--background-hover`     | The background-color of the table body when the mouse go over the table body element |
| `--background-row-hover` | The cell background-color when the mouse go over the table row element               |
| `--border-color`         | The border color between table rows                                                  |
| `--cell-align-items`     | The cell vertical align, based on flex align-items CSS property                      |
| `--cell-padding`         | The cell padding used on table cell                                                  |
| `--radius`               | The radius of the table (header and footer excluded)                                 |
| `--shadow`               | The box-shadow used on the table (header and footer excluded)                        |


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-flex-table-body
Description: mds-flex-table-body is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 3.0.0

# mds-flex-table-body

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description | Type      | Default     |
| ------------- | ------------- | ----------- | --------- | ----------- |
| `interactive` | `interactive` |             | `boolean` | `undefined` |


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-flex-table-cell
Description: mds-flex-table-cell is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 1.3.0

# mds-flex-table-cell

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute   | Description                                       | Type     | Default |
| ---------- | ----------- | ------------------------------------------------- | -------- | ------- |
| `flexGrow` | `flex-grow` | Specifies the template for flex children elements | `string` | `'1'`   |


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-flex-table-footer
Description: mds-flex-table-footer is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 2.0.0

# mds-flex-table-footer

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-flex-table-header
Description: mds-flex-table-header is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 2.0.0

# mds-flex-table-header

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-flex-table-row
Description: mds-flex-table-row is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 3.0.0

# mds-flex-table-row

This component is **deprecated** in favor of [mds-table][mds-table].

[mds-table]: https://www.npmjs.com/package/@maggioli-design-system/mds-table

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description | Type      | Default     |
| ------------- | ------------- | ----------- | --------- | ----------- |
| `interactive` | `interactive` |             | `boolean` | `undefined` |


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-grid
Description: mds-grid is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 1.2.0

# mds-grid

This component is **deprecated** as it is enough to use plain HTML with the help of frameworks like [TailwindCSS][tailwind] like in the example below:

```html
<div class="grid grid-cols-2 gap-2">
  <div>Column 1</div>
  <div>Column 2</div>
</div>
```

[tailwind]: https://tailwindcss.com/docs/grid-template-columns

<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-help
Description: mds-help is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.7.3

# mds-help

This component does not have shadow DOM enabled.

This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property        | Attribute        | Description                                                            | Type                                                                                                                                                                              | Default     |
| --------------- | ---------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| `autoPlacement` | `auto-placement` | If set, the component will be placed automatically near it's caller.   | `boolean \| undefined`                                                                                                                                                            | `true`      |
| `icon`          | `icon`           | Set the name of the icon.                                              | `string \| undefined`                                                                                                                                                             | `undefined` |
| `placement`     | `placement`      | Specifies where the component should be placed relative to the caller. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start" \| undefined` | `'top'`     |


## Slots

| Slot        | Description                                                                |
| ----------- | -------------------------------------------------------------------------- |
| `"default"` | Add `text string` to this slot, **avoid** `HTML elements` or `components`. |


## Shadow Parts

| Part     | Description |
| -------- | ----------- |
| `"icon"` |             |


## Dependencies

### Used by

 - [mds-policy-ai](../mds-policy-ai)

### Depends on

- [mds-icon](../mds-icon)
- [mds-tooltip](../mds-tooltip)

### Graph
```mermaid
graph TD;
  mds-help --> mds-icon
  mds-help --> mds-tooltip
  mds-tooltip --> mds-text
  mds-policy-ai --> mds-help
  style mds-help fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-hr
Description: mds-hr is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 2.10.3

# mds-hr



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-input-button
Description: mds-input-button is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.
Author: Vittorio Vittori
Latest version: 2.1.0

# mds-input-button



<!-- Auto Generated Below -->


## Properties

| Property       | Attribute       | Description                                                           | Type                                                                            | Default     |
| -------------- | --------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------- |
| `active`       | `active`        | Specifies if the button is active or not                              | `boolean`                                                                       | `undefined` |
| `icon`         | `icon`          | The icon displayed in the button                                      | `string`                                                                        | `undefined` |
| `iconPosition` | `icon-position` | Specifies the horizontal position of the icon displayed in the button | `"left" \| "right"`                                                             | `'left'`    |
| `size`         | `size`          | Specifies the size for the button                                     | `"lg" \| "md" \| "sm" \| "xl"`                                                  | `'md'`      |
| `tone`         | `tone`          | Specifies the tone variant for the button                             | `"ghost" \| "quiet" \| "strong" \| "weak"`                                      | `'strong'`  |
| `type`         | `type`          | The type of the button element                                        | `"a" \| "button" \| "reset" \| "submit"`                                        | `'submit'`  |
| `variant`      | `variant`       | Specifies the color variant for the button                            | `"dark" \| "error" \| "info" \| "light" \| "primary" \| "success" \| "warning"` | `'primary'` |


## CSS Custom Properties

| Name             | Description                                |
| ---------------- | ------------------------------------------ |
| `--background`   | Sets the background-color of the component |
| `--border-color` | Sets the border-color of the component     |
| `--color`        | Sets the text color of the component       |
| `--icon-color`   | Sets the icon color of the component       |
| `--radius`       | Sets the border-radius of the component    |


## Dependencies

### Depends on

- [mds-icon](../mds-icon)
- [mds-text](../mds-text)

### Graph
```mermaid
graph TD;
  mds-input-button --> mds-icon
  mds-input-button --> mds-text
  style mds-input-button fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ **Maggioli Informatica / R&D Department**
npm package: @maggioli-design-system/mds-input-date-range-preselection
Description: mds-input-date-range-preselection is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.5

# mds-input-date-range-preselection



<!-- Auto Generated Below -->


## Properties

| Property             | Attribute  | Description                             | Type                   | Default     |
| -------------------- | ---------- | --------------------------------------- | ---------------------- | ----------- |
| `end`                | `end`      | Sets the end date of the preselection   | `string \| undefined`  | `undefined` |
| `selected`           | `selected` | Sets the preselection date range        | `boolean \| undefined` | `undefined` |
| `start` _(required)_ | `start`    | Sets the start date of the preselection | `string`               | `undefined` |


## Dependencies

### Depends on

- [mds-button](../mds-button)

### Graph
```mermaid
graph TD;
  mds-input-date-range-preselection --> mds-button
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  style mds-input-date-range-preselection fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-input-field
Description: mds-input-field is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.0.2

# mds-input-field



This is a web-component from Maggioli Design System [Magma](https://magma.maggiolicloud.it), built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.

<!-- Auto Generated Below -->


## Properties

| Property  | Attribute | Description                                                            | Type                                                                            | Default     |
| --------- | --------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ----------- |
| `label`   | `label`   | Display a text on the top of the input text field                      | `string \| undefined`                                                           | `undefined` |
| `message` | `message` | Display a message at the bottom of the input text field                | `string \| undefined`                                                           | `undefined` |
| `variant` | `variant` | Display the variant of a message at the bottom of the input text field | `"ai" \| "error" \| "info" \| "primary" \| "success" \| "warning" \| undefined` | `'primary'` |


## Shadow Parts

| Part        | Description |
| ----------- | ----------- |
| `"content"` |             |


## CSS Custom Properties

| Name                                   | Description                                                                                                                      |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `--mds-input-field-message-background` | Sets the message background color of the component, will be visible only if there is a text defined by `tip` component attribute |
| `--mds-input-field-message-color`      | Sets the message text color of the component                                                                                     |


## Dependencies

### Depends on

- [mds-text](../mds-text)

### Graph
```mermaid
graph TD;
  mds-input-field --> mds-text
  style mds-input-field fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)
npm package: @maggioli-design-system/mds-input-otp
Description: mds-input-otp is a web-component from Magma Design System, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScript framework you are using.
Author: Vittorio Vittori
Latest version: 1.1.6

# mds-input-otp



<!-- Auto Generated Below -->


## Properties

| Property     | Attribute    | Description                                                  | Type                  | Default |
| ------------ | ------------ | ------------------------------------------------------------ | --------------------- | ------- |
| `autosubmit` | `autosubmit` | Automatically submits the form when the OTP code is complete | `boolean`             | `false` |
| `length`     | `length`     | Number of digits in the OTP code                             | `number`              | `6`     |
| `value`      | `value`      | The current value of the OTP code                            | `string \| undefined` | `''`    |


## Dependencies

### Depends on

- [mds-input](../mds-input)

### Graph
```mermaid
graph TD;
  mds-input-otp --> mds-input
  mds-input --> mds-button
  mds-input --> mds-input-tip
  mds-input --> mds-input-tip-item
  mds-input --> mds-icon
  mds-input --> mds-spinner
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-input-tip-item --> mds-text
  style mds-input-otp fill:#f9f,stroke:#333,stroke-width:4px
```

----------------------------------------------

Built with love @ [Gruppo Maggioli](https://www.maggioli.com) from [R&D Department](https://www.maggioli.com/it-it/chi-siamo/ricerca-sviluppo)