@maggioli-design-system/magma 1.0.0-beta → 1.0.1

package/dist/esm/mds-chip.entry.js

@@ -1,9 +1,31 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { m as miBaselineCancel } from './cancel-8698c6fc.js';
-import { s as setAttributeIfEmpty } from './aria-0e390d9c.js';
-import { K as KeyboardManager } from './keyboard-manager-f3d273fc.js';
+import { s as setAttributeIfEmpty } from './aria-ed9d415d.js';
+import { K as KeyboardManager } from './keyboard-manager-9f287ab7.js';
+import { L as Locale } from './locale-149207d6.js';
+import './_commonjsHelpers-bdec4bbd.js';
 
-const mdsChipCss = "@tailwind utilities;\n\n/**\n * @prop --mds-chip-background: Sets the `background-color` of the component\n * @prop --mds-chip-color: Sets the `color` of the component\n * @prop --mds-chip-icon-background: Sets the `background-color` of the icon\n * @prop --mds-chip-icon-background-selected: Sets the `background-color` color of the icon when the component is selected\n * @prop --mds-chip-icon-color: Sets the `fill` color of the icon of the component\n * @prop --mds-chip-opacity-disabled: Sets the `opacity` of the component when it's disabled\n * @prop --mds-chip-backgroud-selected: Sets the `background-color` of the component when it's selected\n * @prop --mds-chip-color-selected: Sets the `color` of the component when it's selected\n * @prop --mds-chip-icon-color-selected: Sets the `fill` color of the icon of the component when it's selected\n */\n\n:host {\n\n  --mds-chip-background: rgb(var(--tone-neutral-09));\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--brand-maggioli-06));\n  --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-opacity-disabled: var(--opacity-disabled, 0.5);\n  --mds-chip-backgroud-selected: rgb(var(--tone-neutral-08));\n  --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n  --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n  height: 2.25rem;\n  gap: 0.375rem;\n  border-radius: 9999px;\n  padding: 0.375rem;\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-background);\n  color: var(--mds-chip-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, opacity;\n  transition-property: background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;\n}\n\n\n:host( [disabled]:not([disabled=\"false\"]) ) {\n  opacity: var(--mds-chip-opacity-disabled);\n  pointer-events: none;\n}\n\n:host( [selected]:not([selected=\"false\"]) ) {\n\n  --mds-chip-color: var(--mds-chip-color-selected);\n  --mds-chip-background: var(--mds-chip-backgroud-selected);\n  --mds-chip-icon-color: var(--mds-chip-icon-color-selected);\n  --mds-chip-icon-background: var(--mds-chip-icon-background-selected);\n}\n\n.label{\n\n  border-radius: 9999px;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  -webkit-text-decoration-color: transparent;\n  text-decoration-color: transparent;\n  -webkit-transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, text-decoration-color, outline, outline-offset;\n  transition-property: color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color;\n}\n\n:host( [clickable]:not([clickable=\"false\"]) ) .label {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host( [clickable]:not([clickable=\"false\"]) ) .label:hover {\n  -webkit-text-decoration-color: unset;\n  text-decoration-color: unset;\n}\n\n.label:first-child{\n\n  padding-left: 0.5rem;\n}\n\n.label:last-child{\n\n  padding-right: 0.5rem;\n}\n\n.icon-area{\n\n  height: 1.5rem;\n\n  width: 1.5rem;\n\n  -ms-flex-pack: center;\n\n  justify-content: center;\n\n  border-radius: 9999px;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-icon-background);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-timing-function: inherit;\n  transition-timing-function: inherit;\n}\n\n.icon{\n\n  height: 1rem;\n\n  width: 1rem;\n\n  -webkit-transition-duration: 200ms;\n\n  transition-duration: 200ms;\n\n  fill: var(--mds-chip-icon-color);\n  -webkit-transition: fill;\n  transition: fill;\n}\n\n.button-delete {\n  border-radius: 100px;\n  height: auto;\n  padding: 0;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .label,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .label,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-chip-background: rgb(var(--tone-neutral));\n    --mds-chip-color: rgb(var(--tone-neutral-02));\n    --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-03));\n    --mds-chip-icon-color: rgb(var(--tone-neutral));\n    --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n    --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n    --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n    --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-chip-background: rgb(var(--tone-neutral));\n      --mds-chip-color: rgb(var(--tone-neutral-02));\n      --mds-chip-icon-background-selected: rgb(var(--brand-maggioli-03));\n      --mds-chip-icon-color: rgb(var(--tone-neutral));\n      --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n      --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n      --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n      --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n";
+const deleteLabel$3 = "Αφαίρεση";
+const localeEl = {
+	deleteLabel: deleteLabel$3
+};
+
+const deleteLabel$2 = "Remove";
+const localeEn = {
+	deleteLabel: deleteLabel$2
+};
+
+const deleteLabel$1 = "Eliminar";
+const localeEs = {
+	deleteLabel: deleteLabel$1
+};
+
+const deleteLabel = "Rimuovi";
+const localeIt = {
+	deleteLabel: deleteLabel
+};
+
+const mdsChipCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-chip-background: Sets the `background-color` of the component\n * @prop --mds-chip-color: Sets the `color` of the component\n * @prop --mds-chip-icon-background: Sets the `background-color` of the icon\n * @prop --mds-chip-icon-background-selected: Sets the `background-color` color of the icon when the component is selected\n * @prop --mds-chip-icon-color: Sets the `fill` color of the icon of the component\n * @prop --mds-chip-opacity-disabled: Sets the `opacity` of the component when it's disabled\n * @prop --mds-chip-backgroud-selected: Sets the `background-color` of the component when it's selected\n * @prop --mds-chip-color-selected: Sets the `color` of the component when it's selected\n * @prop --mds-chip-icon-color-selected: Sets the `fill` color of the icon of the component when it's selected\n */\n\n:host {\n\n  /* --mds-chip-backgroud-selected: theme('colors.tone-neutral-08');\n  --mds-chip-border-selected: theme('colors.variant-primary-04');\n  --mds-chip-color-selected: theme('colors.tone-neutral-01');\n  --mds-chip-icon-background-selected: theme('colors.variant-primary-04');\n  --mds-chip-icon-color-selected: theme('colors.tone-neutral'); */\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-06));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-opacity-disabled: var(--opacity-disabled, 0.5);\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  height: 2.25rem;\n  gap: 0.375rem;\n  border-radius: 9999px;\n  padding-top: 0.375rem;\n  padding-bottom: 0.375rem;\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n  -webkit-transition-duration: 150ms;\n  transition-duration: 150ms;\n  -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-background);\n  border: 2px solid var(--mds-chip-border);\n  -webkit-box-shadow: var(--mds-chip-shadow);\n  box-shadow: var(--mds-chip-shadow);\n  color: var(--mds-chip-color);\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  -ms-flex-pack: center;\n  justify-content: center;\n  -webkit-transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, color, opacity, -webkit-box-shadow;\n  transition-property: background-color, border-color, box-shadow, color, opacity;\n  transition-property: background-color, border-color, box-shadow, color, opacity, -webkit-box-shadow;\n}\n\n\n:host( [disabled]:not([disabled=\"false\"]) ) {\n  opacity: var(--mds-chip-opacity-disabled);\n  pointer-events: none;\n}\n\n.label {\n  border-radius: 9999px;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n  -webkit-transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n\n  -ms-flex-positive: 1;\n\n  flex-grow: 1;\n  -webkit-text-decoration-color: transparent;\n  text-decoration-color: transparent;\n  -webkit-transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, outline, outline-offset, -webkit-text-decoration-color;\n  transition-property: color, text-decoration-color, outline, outline-offset;\n  transition-property: color, text-decoration-color, outline, outline-offset, -webkit-text-decoration-color;\n}\n\n:host( [clickable]:not([clickable=\"false\"]) ) .label {\n  cursor: pointer;\n  text-decoration: underline;\n}\n\n:host( [clickable]:not([clickable=\"false\"]) ) .label:hover {\n  -webkit-text-decoration-color: unset;\n  text-decoration-color: unset;\n}\n\n.label:first-child {\n  padding-left: 0.5rem;\n}\n\n.label:last-child {\n  padding-right: 0.5rem;\n}\n\n.label--interactive {\n    -webkit-animation-duration: var(--magma-outline-animation-duration, 1s);\n    animation-duration: var(--magma-outline-animation-duration, 1s);\n    -webkit-animation-fill-mode: forwards;\n    animation-fill-mode: forwards;\n    -webkit-animation-iteration-count: infinite;\n    animation-iteration-count: infinite;\n    -webkit-animation-name: focus-bounce;\n    animation-name: focus-bounce;\n    -webkit-animation-play-state: paused;\n    animation-play-state: paused;\n    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);\n    outline: var(--magma-outline-blur);\n    -webkit-transition-duration: 200ms;\n    transition-duration: 200ms;\n    -webkit-transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;\n    transition-property: background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;\n    -webkit-transition-timing-function: ease-in-out;\n    transition-timing-function: ease-in-out;\n  }\n\n.label--interactive:focus-visible {\n\n    --magma-outline-blur: var(--magma-outline-focus);\n\n    -webkit-animation-play-state: running;\n\n    animation-play-state: running;\n\n    z-index: 10;\n  }\n\n.icon-area {\n  height: 1.5rem;\n  width: 1.5rem;\n  -ms-flex-pack: center;\n  justify-content: center;\n  border-radius: 9999px;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  background-color: var(--mds-chip-icon-background);\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  -webkit-transition-duration: inherit;\n  transition-duration: inherit;\n  -webkit-transition-timing-function: inherit;\n  transition-timing-function: inherit;\n}\n\n.icon {\n  height: 1rem;\n  width: 1rem;\n  -webkit-transition-duration: 200ms;\n  transition-duration: 200ms;\n\n  fill: var(--mds-chip-icon-color);\n  -webkit-transition: fill;\n  transition: fill;\n}\n\n.button-delete {\n  border-radius: 100px;\n  height: auto;\n  padding: 0;\n}\n\n:host([variant=\"primary\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"secondary\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-secondary-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"dark\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral-04));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--tone-neutral-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"info\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-info-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"success\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-success-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"warning\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-warning-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n:host([variant=\"error\"][tone=\"strong\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-error-05));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: 0 0 1px 1px rgb(0 0 0 / 0.06), 0 1px 3px 0 rgb(0 0 0 / 0.1);\n}\n\n\n:host([variant=\"primary\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--variant-primary-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-primary-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"secondary\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--variant-secondary-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--variant-secondary-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"dark\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--tone-neutral-08));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"info\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--status-info-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-info-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"success\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--status-success-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-success-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"warning\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--status-warning-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-warning-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"error\"][tone=\"weak\"]) {\n\n  --mds-chip-background: rgb(var(--status-error-09));\n  --mds-chip-border: transparent;\n  --mds-chip-color: rgb(var(--tone-neutral-03));\n  --mds-chip-icon-background: rgb(var(--status-error-04));\n  --mds-chip-icon-color: rgb(var(--tone-neutral));\n  --mds-chip-shadow: none;\n}\n\n:host([variant=\"primary\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--variant-primary-04));\n}\n\n:host([variant=\"secondary\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--variant-secondary-04));\n}\n\n:host([variant=\"dark\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--tone-neutral-05));\n}\n\n:host([variant=\"info\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--status-info-04));\n}\n\n:host([variant=\"success\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--status-success-04));\n}\n\n:host([variant=\"warning\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--status-warning-04));\n}\n\n:host([variant=\"error\"][selected]:not([selected=\"false\"])) {\n\n  --mds-chip-border: rgb(var(--status-error-04));\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host,\n  .label,\n  .icon {\n    -webkit-transition-duration: 0s;\n    transition-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host,\n    .label,\n    .icon {\n      -webkit-transition-duration: 0s;\n      transition-duration: 0s;\n    }\n  }\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-theme: dark) {\n  :host {\n    -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-theme: system) {\n\n  @media (prefers-color-scheme: dark) {\n    :host {\n      -webkit-box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n      box-shadow: 0 0 0 1px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-chip-background: rgb(var(--tone-neutral));\n    --mds-chip-color: rgb(var(--tone-neutral-02));\n    --mds-chip-icon-background-selected: rgb(var(--variant-primary-03));\n    --mds-chip-icon-color: rgb(var(--tone-neutral));\n    --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n    --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n    --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n    --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n    -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n    box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-chip-background: rgb(var(--tone-neutral));\n      --mds-chip-color: rgb(var(--tone-neutral-02));\n      --mds-chip-icon-background-selected: rgb(var(--variant-primary-03));\n      --mds-chip-icon-color: rgb(var(--tone-neutral));\n      --mds-chip-opacity-disabled: var(--opacity-disabled, 0.6);\n      --mds-chip-backgroud-selected: rgb(var(--tone-neutral-09));\n      --mds-chip-color-selected: rgb(var(--tone-neutral-01));\n      --mds-chip-icon-color-selected: rgb(var(--tone-neutral));\n\n      -webkit-box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n\n      box-shadow: 0 0 0 2px rgb(var(--tone-neutral-01) / 0.3);\n    }\n  }\n}\n\n\n";
 const MdsChipStyle0 = mdsChipCss;
 
 const MdsChip = class {
@@ -12,9 +34,15 @@ const MdsChip = class {
         this.clickLabelEvent = createEvent(this, "mdsChipClickLabel", 7);
         this.deleteEvent = createEvent(this, "mdsChipDelete", 7);
         this.km = new KeyboardManager();
-        this.handleClickableKeyboard = () => {
+        this.t = new Locale({
+            el: localeEl,
+            en: localeEn,
+            es: localeEs,
+            it: localeIt,
+        });
+        this.handleClickableKeyboard = (isClickable) => {
             var _a;
-            if (this.clickable) {
+            if (isClickable) {
                 const label = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label');
                 this.km.addElement(label, 'label');
                 this.km.attachClickBehavior('label');
@@ -22,9 +50,9 @@ const MdsChip = class {
             }
             this.km.detachClickBehavior('label');
         };
-        this.handleDeletableKeyboard = () => {
+        this.handleDeletableKeyboard = (isDeletable) => {
             var _a;
-            if (this.deletable) {
+            if (isDeletable) {
                 const deleteElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button-delete');
                 this.km.addElement(deleteElement, 'delete');
                 this.km.attachClickBehavior('delete');
@@ -32,13 +60,13 @@ const MdsChip = class {
             }
             this.km.detachClickBehavior('delete');
         };
-        this.handleClickableElement = () => {
+        this.handleClickableElement = (isClickable) => {
             var _a;
             const label = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.label');
             if (!label) {
                 return;
             }
-            if (this.clickable) {
+            if (isClickable) {
                 setAttributeIfEmpty(label, 'role', 'button');
                 label.addEventListener('click', this.onClickLabelHandler.bind(this));
                 return;
@@ -46,57 +74,84 @@ const MdsChip = class {
             label.removeAttribute('role');
             label.removeEventListener('click', this.onClickLabelHandler.bind(this));
         };
-        this.handleDeletableElement = () => {
+        this.handleDeletableElement = (isDeletable) => {
             var _a;
             const deleteElement = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.button-delete');
             if (!deleteElement) {
                 return;
             }
-            if (this.deletable) {
-                setAttributeIfEmpty(deleteElement, 'aria-hidden', 'true');
+            if (isDeletable) {
                 deleteElement.addEventListener('click', this.onDeleteHandler.bind(this));
                 return;
             }
             deleteElement.removeAttribute('aria-hidden');
             deleteElement.removeEventListener('click', this.onDeleteHandler.bind(this));
         };
+        this.language = undefined;
         this.clickable = undefined;
         this.deletable = undefined;
-        this.deleteLabel = 'Rimuovi';
         this.disabled = false;
         this.icon = undefined;
         this.label = undefined;
         this.selected = false;
+        this.selectable = false;
+        this.variant = 'primary';
+        this.tone = 'strong';
+    }
+    async updateLang() {
+        this.language = this.t.lang(this.host);
+    }
+    handleSelectableProp(newValue) {
+        if (newValue) {
+            this.clickable = true;
+        }
+    }
+    handleClickableProp(newValue) {
+        this.handleClickableElement(newValue);
+        this.handleClickableKeyboard(newValue);
+    }
+    handleDeletableProp(newValue) {
+        this.handleDeletableElement(newValue);
+        this.handleDeletableKeyboard(newValue);
     }
     onClickLabelHandler(event) {
         this.clickLabelEvent.emit({ event, element: this.host });
+        if (this.selectable) {
+            this.selected = !this.selected;
+        }
     }
     onDeleteHandler(event) {
         this.deleteEvent.emit({ event, element: this.host });
     }
-    componentDidLoad() {
-        this.handleClickableElement();
-        this.handleClickableKeyboard();
-        this.handleDeletableElement();
-        this.handleDeletableKeyboard();
+    componentWillLoad() {
+        this.t.lang(this.host);
     }
-    componentDidUpdate() {
-        this.handleClickableElement();
-        this.handleClickableKeyboard();
-        this.handleDeletableElement();
-        this.handleDeletableKeyboard();
+    componentDidLoad() {
+        if (this.clickable) {
+            this.handleClickableElement(true);
+            this.handleClickableKeyboard(true);
+        }
+        if (this.deletable) {
+            this.handleDeletableElement(true);
+            this.handleDeletableKeyboard(true);
+        }
     }
     disconnectedCallback() {
         this.km.detachClickBehavior('label');
         this.km.detachClickBehavior('delete');
     }
     render() {
-        return (h(Host, { key: '22f2fbd25b4d673e396568e4edb3e1449e8fcc43', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
-            h("div", { key: '283e098da89df91f6d1296cc2f90b2a5861de6f4', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '4bb9e7e7abe4d14d1c897d5b27e5114a912388d9', class: "icon", name: this.icon })), this.clickable
-            ? h("mds-text", { class: "label focus-bounce", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
-            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '9e56e6e92ef10da0eb5d777ec7031a47bb4888af', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.deleteLabel} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
+        return (h(Host, { key: '67d05d7b187efe97dd8127ff49c32356553500d2', "aria-disabled": this.disabled ? 'true' : 'false' }, this.icon &&
+            h("div", { key: '10583c909ef3d3f346a65904c763cbc5582c1666', "aria-hidden": "true", class: "icon-area" }, h("mds-icon", { key: '5d6c3afd28d26951be06eaeee5a0b5414629b70f', class: "icon", name: this.icon })), this.clickable
+            ? h("mds-text", { class: "label label--interactive", tabindex: "0", typography: "caption", truncate: "word" }, this.label)
+            : h("mds-text", { class: "label", typography: "caption", truncate: "word" }, this.label), this.deletable && h("mds-button", { key: '9a865e47188bd6433019e5ac0ca43c67d6495cec', class: "button-delete", icon: miBaselineCancel, onClick: this.onDeleteHandler.bind(this), title: `${this.t.get('deleteLabel')} ${this.label}`, variant: "dark", tone: "quiet", size: "sm" })));
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "selectable": ["handleSelectableProp"],
+        "clickable": ["handleClickableProp"],
+        "deletable": ["handleDeletableProp"]
+    }; }
 };
 MdsChip.style = MdsChipStyle0;
 

package/dist/esm/mds-details.entry.js

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-f08bac5f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-44fd80a1.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { m as miBaselineArrowDown } from './keyboard-arrow-down-fa82970e.js';
-import { K as KeyboardManager } from './keyboard-manager-f3d273fc.js';
+import { K as KeyboardManager } from './keyboard-manager-9f287ab7.js';
 
-const mdsDetailsCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-details-icon-color: Sets the icon color the component\n * @prop --mds-details-helper-icon-color: Sets icon color of the helper icon of the component\n */\n\n:host {\n\n  --mds-details-duration: 300ms;\n  --mds-details-icon-color: rgb(var(--brand-maggioli-04));\n  --mds-details-helper-icon-color: rgb(var(--tone-neutral-03));\n  gap: 0.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.content {\n  display: grid;\n}\n\n.details {\n  gap: 1rem;\n  padding-top: 0rem;\n  opacity: 0;\n\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-details-duration);\n  transition-duration: var(--mds-details-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  gap: 1rem;\n\n  display: grid;\n  min-height: 0;\n}\n\n.details.opened {\n  padding-top: 1rem;\n\n  grid-template-rows: 1fr;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.header {\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.icon {\n  cursor: pointer;\n  fill: var(--mds-details-icon-color);\n}\n\n.title {\n  cursor: pointer;\n}\n\n.helper-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.helper-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.helper-icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  cursor: pointer;\n  fill: var(--mds-details-helper-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  rotate: 0deg;\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n.helper-icon.opened {\n  rotate: 180deg;\n}\n\n.actions {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-details-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-details-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-details-icon-color: rgb(var(--brand-maggioli-03));\n    --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-details-icon-color: rgb(var(--brand-maggioli-03));\n      --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n\n";
+const mdsDetailsCss = "@-webkit-keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n @keyframes focus-bounce {\n  0%, 75%, 100% {\n    outline-offset: var(--magma-outline-focus-offset, 6px);\n  }\n\n  50% {\n    outline-offset: var(--magma-outline-blur-offset, 2px);\n  }\n}\n /* included for focus effect */\n@tailwind components;\n@tailwind utilities;\n\n/**\n * @prop --mds-details-icon-color: Sets the icon color the component\n * @prop --mds-details-helper-icon-color: Sets icon color of the helper icon of the component\n */\n\n:host {\n\n  --mds-details-duration: 300ms;\n  --mds-details-icon-color: rgb(var(--variant-primary-04));\n  --mds-details-helper-icon-color: rgb(var(--tone-neutral-03));\n  gap: 0.5rem;\n\n  -ms-flex-align: start;\n\n  align-items: flex-start;\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.content {\n  display: grid;\n}\n\n.details {\n  gap: 1rem;\n  padding-top: 0rem;\n  opacity: 0;\n\n  display: grid;\n  grid-template-rows: 0fr;\n  overflow: hidden;\n  pointer-events: none;\n  -webkit-transition-duration: var(--mds-details-duration);\n  transition-duration: var(--mds-details-duration);\n  -webkit-transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding;\n  transition-property: grid-template-rows opacity padding, -ms-grid-rows opacity padding;\n}\n\n.content-expander {\n  gap: 1rem;\n\n  display: grid;\n  min-height: 0;\n}\n\n.details.opened {\n  padding-top: 1rem;\n\n  grid-template-rows: 1fr;\n  opacity: 1;\n  overflow: visible;\n  pointer-events: auto;\n}\n\n.header {\n  gap: 0.5rem;\n\n  -ms-flex-align: center;\n\n  align-items: center;\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n}\n\n.icon {\n  cursor: pointer;\n  fill: var(--mds-details-icon-color);\n}\n\n.title {\n  cursor: pointer;\n}\n\n.helper-icon {\n  display: -ms-flexbox;\n  display: flex;\n}\n\n.helper-icon svg {\n  aspect-ratio: 1/1;\n  height: 100%;\n  width: 100%;\n}\n\n.helper-icon {\n  -webkit-transition-duration: 300ms;\n  transition-duration: 300ms;\n  -webkit-transition-timing-function: cubic-bezier(1, 0, 0, 1);\n  transition-timing-function: cubic-bezier(1, 0, 0, 1);\n\n  cursor: pointer;\n  fill: var(--mds-details-helper-icon-color);\n  -ms-flex-negative: 0;\n  flex-shrink: 0;\n  rotate: 0deg;\n  -webkit-transition-property: -webkit-transform;\n  transition-property: -webkit-transform;\n  transition-property: transform;\n  transition-property: transform, -webkit-transform;\n}\n\n.helper-icon.opened {\n  rotate: 180deg;\n}\n\n.actions {\n  gap: 1rem;\n\n  display: -ms-flexbox;\n\n  display: flex;\n}\n\n@tailwind utilities;\n\n@container style(--magma-pref-animation: reduce) {\n  :host {\n\n    --mds-details-duration: 0s;\n  }\n}\n\n@container style(--magma-pref-animation: system) {\n\n  @media (prefers-reduced-motion) {\n    :host {\n\n      --mds-details-duration: 0s;\n    }\n  }\n}\n\n@container style(--magma-pref-contrast: more) {\n  :host {\n\n    --mds-details-icon-color: rgb(var(--variant-primary-03));\n    --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n  }\n}\n\n@container style(--magma-pref-contrast: system) {\n\n  @media (prefers-contrast: more) {\n    :host {\n\n      --mds-details-icon-color: rgb(var(--variant-primary-03));\n      --mds-details-helper-icon-color: rgb(var(--tone-neutral-02));\n    }\n  }\n}\n\n\n";
 const MdsDetailsStyle0 = mdsDetailsCss;
 
 const MdsDetails = class {