@zanichelli/albe-web-components 9.2.0 → 9.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/cjs/z-accordion.cjs.entry.js +2 -2
  2. package/dist/cjs/z-app-header_11.cjs.entry.js +5 -2
  3. package/dist/collection/components/inputs/z-input/index.js +5 -2
  4. package/dist/collection/components/z-accordion/index.js +1 -1
  5. package/dist/collection/components/z-accordion/styles.css +244 -228
  6. package/dist/esm/z-accordion.entry.js +2 -2
  7. package/dist/esm/z-app-header_11.entry.js +5 -2
  8. package/dist/types/components/inputs/z-input/index.d.ts +1 -0
  9. package/dist/web-components-library/p-1b7b10fe.entry.js +1 -0
  10. package/dist/web-components-library/p-f69bfda5.entry.js +1 -0
  11. package/dist/web-components-library/web-components-library.css +1 -1
  12. package/dist/web-components-library/web-components-library.esm.js +1 -1
  13. package/package.json +1 -1
  14. package/www/build/p-1b7b10fe.entry.js +1 -0
  15. package/www/build/{p-a40d8aad.css → p-39ac174d.css} +1 -1
  16. package/www/build/{p-fc889040.js → p-99586661.js} +1 -1
  17. package/www/build/p-f69bfda5.entry.js +1 -0
  18. package/www/build/web-components-library.css +1 -1
  19. package/www/build/web-components-library.esm.js +1 -1
  20. package/www/index.html +1 -1
  21. package/dist/web-components-library/p-14f41eb8.entry.js +0 -1
  22. package/dist/web-components-library/p-9be87865.entry.js +0 -1
  23. package/www/build/p-14f41eb8.entry.js +0 -1
  24. package/www/build/p-9be87865.entry.js +0 -1
package/dist/cjs/z-accordion.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-e3299e0a.js');
6
6
  const index$1 = require('./index-419ee40f.js');
7
7
 
8
- const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--z-accordion-bg);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);column-gap:var(--space-unit);cursor:pointer;list-style:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--color-surface03);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--color-text03)}summary>z-icon{fill:var(--color-text01)}:host([is-disabled]) summary>z-icon{fill:var(--color-text03)}.z-accordion-label{color:var(--color-text01);font-size:var(--font-size-3);font-weight:var(--font-sb)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--color-text03)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--color-text03) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--color-surface03)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
8
+ const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--z-accordion-bg);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);column-gap:var(--space-unit);cursor:pointer;list-style:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--color-surface03);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--color-text03)}summary>z-icon{fill:var(--color-text01)}:host([is-disabled]) summary>z-icon{fill:var(--color-text03)}.z-accordion-label{color:var(--color-text01);font-size:var(--font-size-3);font-weight:var(--font-sb)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--color-text03)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--color-text03) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--color-surface03)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
9
9
 
10
10
  const ZAccordion = class {
11
11
  constructor(hostRef) {
@@ -56,7 +56,7 @@ const ZAccordion = class {
56
56
  this.toggled.emit(this.open);
57
57
  }
58
58
  render() {
59
- return (index.h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, index.h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (index.h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), index.h("span", { class: "z-accordion-label" }, this.label), index.h("span", { class: "z-accordion-tags" }, index.h("slot", { name: "tag" })), index.h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (index.h("div", { class: "z-accordion-content" }, index.h("slot", null)))));
59
+ return (index.h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, index.h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (index.h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), index.h("span", { class: "z-accordion-label" }, this.label), index.h("span", { class: "z-accordion-tags" }, index.h("slot", { name: "tag" })), index.h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (index.h("div", { class: "z-accordion-content", part: "content" }, index.h("slot", null)))));
60
60
  }
61
61
  static get watchers() { return {
62
62
  "isDisabled": ["onDisabledChange"]
package/dist/cjs/z-app-header_11.cjs.entry.js CHANGED
@@ -404,7 +404,7 @@ const ZInput = class {
404
404
  if (this.hasclearicon && type != index$1.InputType.NUMBER) {
405
405
  Object.assign(attr.class, { "has-clear-icon": true });
406
406
  }
407
- return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === index$1.InputType.PASSWORD && !this.passwordHidden ? index$1.InputType.TEXT : type }, attr)), this.renderIcons()), this.renderMessage()));
407
+ return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === index$1.InputType.PASSWORD && !this.passwordHidden ? index$1.InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
408
408
  }
409
409
  renderLabel() {
410
410
  if (!this.label) {
@@ -429,7 +429,10 @@ const ZInput = class {
429
429
  if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == index$1.InputType.NUMBER) {
430
430
  hidden = true;
431
431
  }
432
- return (index.h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, index.h("z-icon", { name: "multiply", class: this.size })));
432
+ return (index.h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => {
433
+ this.inputRef.value = "";
434
+ this.emitInputChange("");
435
+ } }, index.h("z-icon", { name: "multiply", class: this.size })));
433
436
  }
434
437
  renderShowHidePassword() {
435
438
  return (index.h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, index.h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
package/dist/collection/components/inputs/z-input/index.js CHANGED
@@ -143,7 +143,7 @@ export class ZInput {
143
143
  if (this.hasclearicon && type != InputType.NUMBER) {
144
144
  Object.assign(attr.class, { "has-clear-icon": true });
145
145
  }
146
- return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr)), this.renderIcons()), this.renderMessage()));
146
+ return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
147
147
  }
148
148
  renderLabel() {
149
149
  if (!this.label) {
@@ -168,7 +168,10 @@ export class ZInput {
168
168
  if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
169
169
  hidden = true;
170
170
  }
171
- return (h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply", class: this.size })));
171
+ return (h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => {
172
+ this.inputRef.value = "";
173
+ this.emitInputChange("");
174
+ } }, h("z-icon", { name: "multiply", class: this.size })));
172
175
  }
173
176
  renderShowHidePassword() {
174
177
  return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));
package/dist/collection/components/z-accordion/index.js CHANGED
@@ -55,7 +55,7 @@ export class ZAccordion {
55
55
  this.toggled.emit(this.open);
56
56
  }
57
57
  render() {
58
- return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content" }, h("slot", null)))));
58
+ return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
59
59
  }
60
60
  static get is() { return "z-accordion"; }
61
61
  static get encapsulation() { return "shadow"; }
package/dist/collection/components/z-accordion/styles.css CHANGED
@@ -1,228 +1,244 @@
1
- :host,
2
- :host *,
3
- :host ::slotted(*) {
4
- box-sizing: border-box;
5
- }
6
-
7
- :host {
8
- --z-accordion-highlight-color: transparent;
9
- --z-accordion-bg: var(--color-surface01);
10
-
11
- display: block;
12
- border-top: var(--border-size-small) solid var(--color-surface03);
13
- border-bottom: var(--border-size-small) solid var(--color-surface03);
14
- background-color: var(--z-accordion-bg);
15
- font-family: var(--font-family-sans);
16
- font-weight: var(--font-rg);
17
- }
18
-
19
- :host([variant="background"]) {
20
- border: var(--border-size-small) solid var(--color-surface03);
21
- border-radius: var(--border-radius);
22
- }
23
-
24
- :host([variant="background"][shadow]) {
25
- box-shadow: var(--shadow-2);
26
- }
27
-
28
- details {
29
- background-color: transparent;
30
- }
31
-
32
- summary {
33
- --summary-x-small-height: 32px;
34
- --summary-small-height: 36px;
35
- --summary-big-height: 44px;
36
- --summary-height: var(--summary-big-height);
37
- --summary-y-padding: var(--space-unit);
38
-
39
- position: relative;
40
- display: flex;
41
- height: var(--summary-height);
42
- align-items: center;
43
- padding: var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);
44
- column-gap: var(--space-unit);
45
- cursor: pointer;
46
- list-style: none;
47
- }
48
-
49
- :host([size="x-small"]) summary {
50
- --summary-height: var(--summary-x-small-height);
51
- }
52
-
53
- :host([size="small"]) summary {
54
- --summary-height: var(--summary-small-height);
55
- }
56
-
57
- :host(:is([size="x-small"], [size="small"])) summary {
58
- --summary-y-padding: calc(var(--space-unit) / 2);
59
- }
60
-
61
- :host([variant="background"]) summary {
62
- padding-right: calc(var(--space-unit) * 2);
63
-
64
- /* border-radius of the accordion - border-width of the accordion */
65
- border-radius: calc(var(--border-radius) - var(--border-size-small));
66
- }
67
-
68
- :host([is-disabled]) summary {
69
- cursor: default;
70
- }
71
-
72
- summary:focus:focus-visible {
73
- background-color: var(--color-surface03);
74
- box-shadow: var(--shadow-focus-primary);
75
- outline: none;
76
- }
77
-
78
- summary::before,
79
- :host([highlight][variant="background"]) .z-accordion-content::before {
80
- position: absolute;
81
- top: 0;
82
- left: 0;
83
- display: block;
84
- width: var(--space-unit);
85
- height: 100%;
86
- content: "";
87
- }
88
-
89
- :host([highlight]) summary::before,
90
- :host([highlight][variant="background"]) .z-accordion-content::before {
91
- background-color: var(--z-accordion-highlight-color, transparent);
92
- }
93
-
94
- :host([is-disabled][highlight]) summary::before,
95
- :host([is-disabled][highlight][variant="background"]) .z-accordion-content::before {
96
- background-color: var(--color-text03);
97
- }
98
-
99
- summary > z-icon {
100
- fill: var(--color-text01);
101
- }
102
-
103
- :host([is-disabled]) summary > z-icon {
104
- fill: var(--color-text03);
105
- }
106
-
107
- .z-accordion-label {
108
- color: var(--color-text01);
109
- font-size: var(--font-size-3); /* for "small" and "big" sizes */
110
- font-weight: var(--font-sb);
111
- }
112
-
113
- :host([size="x-small"]) .z-accordion-label {
114
- font-size: var(--font-size-2);
115
- }
116
-
117
- :host([size="x-small"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
118
- --z-icon-width: 16px;
119
- --z-icon-height: 16px;
120
- }
121
-
122
- .z-accordion-tags {
123
- display: flex;
124
- align-items: center;
125
- column-gap: calc(var(--space-unit) / 2);
126
- }
127
-
128
- summary z-icon.z-accordion-chevron {
129
- margin-left: auto;
130
- }
131
-
132
- .z-accordion-content {
133
- position: relative;
134
- padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
135
- font-size: var(--font-size-2); /* for "small" and "big" sizes */
136
- }
137
-
138
- :host(:is([size="x-small"], [size="small"])) .z-accordion-content {
139
- padding-bottom: var(--space-unit);
140
- }
141
-
142
- :host([size="x-small"]) .z-accordion-content {
143
- font-size: var(--font-size-1);
144
- }
145
-
146
- :host([variant="background"]) .z-accordion-content {
147
- padding-right: calc(var(--space-unit) * 2);
148
- }
149
-
150
- :host([is-disabled]) .z-accordion-label {
151
- color: var(--color-text03);
152
- }
153
-
154
- :host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]) {
155
- --z-tag-bg: var(--color-text03) !important;
156
- --z-tag-text-color: var(--color-text-inverse) !important;
157
- }
158
-
159
- @media (hover: hover) {
160
- summary:focus:focus-visible {
161
- /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */
162
- position: relative;
163
- z-index: 1;
164
- }
165
-
166
- :host(:not([is-disabled])) summary:hover {
167
- background-color: var(--color-surface03);
168
- }
169
-
170
- :host(:not([is-disabled])) summary:hover .z-accordion-label {
171
- text-decoration: underline;
172
- }
173
- }
174
-
175
- /* force "big" variant on touch devices */
176
- @media (hover: none) {
177
- :host([size]) summary {
178
- --summary-height: var(--summary-big-height);
179
- --summary-y-padding: var(--space-unit);
180
- }
181
-
182
- :host([size]) .z-accordion-label {
183
- font-size: var(--font-size-3);
184
- }
185
-
186
- :host([size]) .z-accordion-content {
187
- font-size: var(--font-size-2);
188
- }
189
-
190
- :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
191
- --z-icon-width: 18px;
192
- --z-icon-height: 18px;
193
- }
194
- }
195
-
196
- /* Style for sibling accordions in a stack context */
197
-
198
- z-accordion + z-accordion {
199
- border-top: none;
200
- }
201
-
202
- z-accordion[variant="background"] + z-accordion[variant="background"] {
203
- border-radius: 0;
204
- }
205
-
206
- z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
207
- border-bottom-left-radius: 0;
208
- border-bottom-right-radius: 0;
209
- }
210
-
211
- z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
212
- border-bottom-left-radius: var(--border-radius);
213
- border-bottom-right-radius: var(--border-radius);
214
- }
215
-
216
- z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
217
- border-bottom-left-radius: 0;
218
- border-bottom-right-radius: 0;
219
- }
220
-
221
- z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
222
- border-radius: 0;
223
- }
224
-
225
- z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
226
- border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
227
- border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
228
- }
1
+ :host,
2
+ :host *,
3
+ :host ::slotted(*) {
4
+ box-sizing: border-box;
5
+ }
6
+
7
+ :host {
8
+ --z-accordion-highlight-color: transparent;
9
+ --z-accordion-bg: var(--color-surface01);
10
+
11
+ display: block;
12
+ border-top: var(--border-size-small) solid var(--color-surface03);
13
+ border-bottom: var(--border-size-small) solid var(--color-surface03);
14
+ background-color: var(--z-accordion-bg);
15
+ font-family: var(--font-family-sans);
16
+ font-weight: var(--font-rg);
17
+ }
18
+
19
+ :host([variant="background"]) {
20
+ border: var(--border-size-small) solid var(--color-surface03);
21
+ border-radius: var(--border-radius);
22
+ }
23
+
24
+ :host([variant="background"][shadow]) {
25
+ box-shadow: var(--shadow-2);
26
+ }
27
+
28
+ details {
29
+ background-color: transparent;
30
+ }
31
+
32
+ summary {
33
+ --summary-x-small-height: 32px;
34
+ --summary-small-height: 36px;
35
+ --summary-big-height: 44px;
36
+ --summary-height: var(--summary-big-height);
37
+ --summary-y-padding: var(--space-unit);
38
+
39
+ position: relative;
40
+ display: flex;
41
+ height: var(--summary-height);
42
+ align-items: center;
43
+ padding: var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);
44
+ column-gap: var(--space-unit);
45
+ cursor: pointer;
46
+ list-style: none;
47
+ }
48
+
49
+ :host([size="x-small"]) summary {
50
+ --summary-height: var(--summary-x-small-height);
51
+ }
52
+
53
+ :host([size="small"]) summary {
54
+ --summary-height: var(--summary-small-height);
55
+ }
56
+
57
+ :host(:is([size="x-small"], [size="small"])) summary {
58
+ --summary-y-padding: calc(var(--space-unit) / 2);
59
+ }
60
+
61
+ :host([variant="background"]) summary {
62
+ padding-right: calc(var(--space-unit) * 2);
63
+
64
+ /* border-radius of the accordion - width of the accordion's border */
65
+ border-radius: calc(var(--border-radius) - var(--border-size-small));
66
+ }
67
+
68
+ :host([variant="background"][open]) summary {
69
+ border-bottom-left-radius: 0;
70
+ border-bottom-right-radius: 0;
71
+ }
72
+
73
+ :host([is-disabled]) summary {
74
+ cursor: default;
75
+ }
76
+
77
+ summary:focus:focus-visible {
78
+ background-color: var(--color-surface03);
79
+ box-shadow: var(--shadow-focus-primary);
80
+ outline: none;
81
+ }
82
+
83
+ summary::before,
84
+ :host([highlight][variant="background"]) .z-accordion-content::before {
85
+ position: absolute;
86
+ top: 0;
87
+ left: 0;
88
+ display: block;
89
+ width: var(--space-unit);
90
+ height: 100%;
91
+ content: "";
92
+ }
93
+
94
+ :host([highlight][variant="background"]) summary::before {
95
+ /* border-radius of the accordion - width of the accordion's border */
96
+ border-top-left-radius: calc(var(--border-radius) - var(--border-size-small));
97
+ }
98
+
99
+ :host([highlight][variant="background"]:not([open])) summary::before,
100
+ :host([highlight][variant="background"][open]) .z-accordion-content::before {
101
+ /* border-radius of the accordion - width of the accordion's border */
102
+ border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
103
+ }
104
+
105
+ :host([highlight]) summary::before,
106
+ :host([highlight][variant="background"]) .z-accordion-content::before {
107
+ background-color: var(--z-accordion-highlight-color, transparent);
108
+ }
109
+
110
+ :host([is-disabled][highlight]) summary::before,
111
+ :host([is-disabled][highlight][variant="background"]) .z-accordion-content::before {
112
+ background-color: var(--color-text03);
113
+ }
114
+
115
+ summary > z-icon {
116
+ fill: var(--color-text01);
117
+ }
118
+
119
+ :host([is-disabled]) summary > z-icon {
120
+ fill: var(--color-text03);
121
+ }
122
+
123
+ .z-accordion-label {
124
+ color: var(--color-text01);
125
+ font-size: var(--font-size-3); /* for "small" and "big" sizes */
126
+ font-weight: var(--font-sb);
127
+ }
128
+
129
+ :host([size="x-small"]) .z-accordion-label {
130
+ font-size: var(--font-size-2);
131
+ }
132
+
133
+ :host([size="x-small"]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
134
+ --z-icon-width: 16px;
135
+ --z-icon-height: 16px;
136
+ }
137
+
138
+ .z-accordion-tags {
139
+ display: flex;
140
+ align-items: center;
141
+ column-gap: calc(var(--space-unit) / 2);
142
+ }
143
+
144
+ summary z-icon.z-accordion-chevron {
145
+ margin-left: auto;
146
+ }
147
+
148
+ .z-accordion-content {
149
+ position: relative;
150
+ padding: var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
151
+ font-size: var(--font-size-2); /* for "small" and "big" sizes */
152
+ }
153
+
154
+ :host(:is([size="x-small"], [size="small"])) .z-accordion-content {
155
+ padding-bottom: var(--space-unit);
156
+ }
157
+
158
+ :host([size="x-small"]) .z-accordion-content {
159
+ font-size: var(--font-size-1);
160
+ }
161
+
162
+ :host([variant="background"]) .z-accordion-content {
163
+ padding-right: calc(var(--space-unit) * 2);
164
+ }
165
+
166
+ :host([is-disabled]) .z-accordion-label {
167
+ color: var(--color-text03);
168
+ }
169
+
170
+ :host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot="tag"]) {
171
+ --z-tag-bg: var(--color-text03) !important;
172
+ --z-tag-text-color: var(--color-text-inverse) !important;
173
+ }
174
+
175
+ @media (hover: hover) {
176
+ summary:focus:focus-visible {
177
+ /* prevents the focus shadow to be covered by the background of an hovered sibling accordion */
178
+ position: relative;
179
+ z-index: 1;
180
+ }
181
+
182
+ :host(:not([is-disabled])) summary:hover {
183
+ background-color: var(--color-surface03);
184
+ }
185
+
186
+ :host(:not([is-disabled])) summary:hover .z-accordion-label {
187
+ text-decoration: underline;
188
+ }
189
+ }
190
+
191
+ /* force "big" variant on touch devices */
192
+ @media (hover: none) {
193
+ :host([size]) summary {
194
+ --summary-height: var(--summary-big-height);
195
+ --summary-y-padding: var(--space-unit);
196
+ }
197
+
198
+ :host([size]) .z-accordion-label {
199
+ font-size: var(--font-size-3);
200
+ }
201
+
202
+ :host([size]) .z-accordion-content {
203
+ font-size: var(--font-size-2);
204
+ }
205
+
206
+ :host([size]) :is(.z-accordion-label-icon, .z-accordion-chevron) {
207
+ --z-icon-width: 18px;
208
+ --z-icon-height: 18px;
209
+ }
210
+ }
211
+
212
+ /* Style for sibling accordions in a stack context */
213
+
214
+ z-accordion + z-accordion {
215
+ border-top: none;
216
+ }
217
+
218
+ z-accordion[variant="background"] + z-accordion[variant="background"] {
219
+ border-radius: 0;
220
+ }
221
+
222
+ z-accordion[variant="background"]:first-of-type:not(:last-of-type) {
223
+ border-bottom-left-radius: 0;
224
+ border-bottom-right-radius: 0;
225
+ }
226
+
227
+ z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type {
228
+ border-bottom-left-radius: var(--border-radius);
229
+ border-bottom-right-radius: var(--border-radius);
230
+ }
231
+
232
+ z-accordion[variant="background"]:first-of-type:not(:last-of-type)::part(summary) {
233
+ border-bottom-left-radius: 0;
234
+ border-bottom-right-radius: 0;
235
+ }
236
+
237
+ z-accordion[variant="background"] + z-accordion[variant="background"]::part(summary) {
238
+ border-radius: 0;
239
+ }
240
+
241
+ z-accordion[variant="background"] + z-accordion[variant="background"]:last-of-type:not([open])::part(summary) {
242
+ border-bottom-left-radius: calc(var(--border-radius) - var(--border-size-small));
243
+ border-bottom-right-radius: calc(var(--border-radius) - var(--border-size-small));
244
+ }
package/dist/esm/z-accordion.entry.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-a2ca4b97.js';
2
2
  import { e as ControlSize, _ as AccordionVariant } from './index-a8cda90b.js';
3
3
 
4
- const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--z-accordion-bg);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);column-gap:var(--space-unit);cursor:pointer;list-style:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--color-surface03);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--color-text03)}summary>z-icon{fill:var(--color-text01)}:host([is-disabled]) summary>z-icon{fill:var(--color-text03)}.z-accordion-label{color:var(--color-text01);font-size:var(--font-size-3);font-weight:var(--font-sb)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--color-text03)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--color-text03) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--color-surface03)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
4
+ const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);background-color:var(--z-accordion-bg);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host([variant=\"background\"]){border:var(--border-size-small) solid var(--color-surface03);border-radius:var(--border-radius)}:host([variant=\"background\"][shadow]){box-shadow:var(--shadow-2)}details{background-color:transparent}summary{--summary-x-small-height:32px;--summary-small-height:36px;--summary-big-height:44px;--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit);position:relative;display:flex;height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--space-unit) var(--summary-y-padding) calc(var(--space-unit) * 2);column-gap:var(--space-unit);cursor:pointer;list-style:none}:host([size=\"x-small\"]) summary{--summary-height:var(--summary-x-small-height)}:host([size=\"small\"]) summary{--summary-height:var(--summary-small-height)}:host(:is([size=\"x-small\"],[size=\"small\"])) summary{--summary-y-padding:calc(var(--space-unit) / 2)}:host([variant=\"background\"]) summary{padding-right:calc(var(--space-unit) * 2);border-radius:calc(var(--border-radius) - var(--border-size-small))}:host([variant=\"background\"][open]) summary{border-bottom-left-radius:0;border-bottom-right-radius:0}:host([is-disabled]) summary{cursor:default}summary:focus:focus-visible{background-color:var(--color-surface03);box-shadow:var(--shadow-focus-primary);outline:none}summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{position:absolute;top:0;left:0;display:block;width:var(--space-unit);height:100%;content:\"\"}:host([highlight][variant=\"background\"]) summary::before{border-top-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight][variant=\"background\"]:not([open])) summary::before,:host([highlight][variant=\"background\"][open]) .z-accordion-content::before{border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small))}:host([highlight]) summary::before,:host([highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--z-accordion-highlight-color, transparent)}:host([is-disabled][highlight]) summary::before,:host([is-disabled][highlight][variant=\"background\"]) .z-accordion-content::before{background-color:var(--color-text03)}summary>z-icon{fill:var(--color-text01)}:host([is-disabled]) summary>z-icon{fill:var(--color-text03)}.z-accordion-label{color:var(--color-text01);font-size:var(--font-size-3);font-weight:var(--font-sb)}:host([size=\"x-small\"]) .z-accordion-label{font-size:var(--font-size-2)}:host([size=\"x-small\"]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:16px;--z-icon-height:16px}.z-accordion-tags{display:flex;align-items:center;column-gap:calc(var(--space-unit) / 2)}summary z-icon.z-accordion-chevron{margin-left:auto}.z-accordion-content{position:relative;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);font-size:var(--font-size-2);}:host(:is([size=\"x-small\"],[size=\"small\"])) .z-accordion-content{padding-bottom:var(--space-unit)}:host([size=\"x-small\"]) .z-accordion-content{font-size:var(--font-size-1)}:host([variant=\"background\"]) .z-accordion-content{padding-right:calc(var(--space-unit) * 2)}:host([is-disabled]) .z-accordion-label{color:var(--color-text03)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--color-text03) !important;--z-tag-text-color:var(--color-text-inverse) !important}@media (hover: hover){summary:focus:focus-visible{position:relative;z-index:1}:host(:not([is-disabled])) summary:hover{background-color:var(--color-surface03)}:host(:not([is-disabled])) summary:hover .z-accordion-label{text-decoration:underline}}@media (hover: none){:host([size]) summary{--summary-height:var(--summary-big-height);--summary-y-padding:var(--space-unit)}:host([size]) .z-accordion-label{font-size:var(--font-size-3)}:host([size]) .z-accordion-content{font-size:var(--font-size-2)}:host([size]) :is(.z-accordion-label-icon,.z-accordion-chevron){--z-icon-width:18px;--z-icon-height:18px}}z-accordion+z-accordion{border-top:none}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]{border-radius:0}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type{border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}z-accordion[variant=\"background\"]:first-of-type:not(:last-of-type)::part(summary){border-bottom-left-radius:0;border-bottom-right-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]::part(summary){border-radius:0}z-accordion[variant=\"background\"]+z-accordion[variant=\"background\"]:last-of-type:not([open])::part(summary){border-bottom-left-radius:calc(var(--border-radius) - var(--border-size-small));border-bottom-right-radius:calc(var(--border-radius) - var(--border-size-small))}";
5
5
 
6
6
  const ZAccordion = class {
7
7
  constructor(hostRef) {
@@ -52,7 +52,7 @@ const ZAccordion = class {
52
52
  this.toggled.emit(this.open);
53
53
  }
54
54
  render() {
55
- return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content" }, h("slot", null)))));
55
+ return (h("details", { ref: (elm) => (this.detailsElm = elm), onToggle: this.onDetailsToggle.bind(this), open: this.open }, h("summary", { tabIndex: this.isDisabled ? -1 : null, part: "summary" }, this.icon && (h("z-icon", { class: "z-accordion-label-icon", name: this.icon })), h("span", { class: "z-accordion-label" }, this.label), h("span", { class: "z-accordion-tags" }, h("slot", { name: "tag" })), h("z-icon", { class: "z-accordion-chevron", name: this.open ? "chevron-up" : "chevron-down" })), !this.isDisabled && (h("div", { class: "z-accordion-content", part: "content" }, h("slot", null)))));
56
56
  }
57
57
  static get watchers() { return {
58
58
  "isDisabled": ["onDisabledChange"]
package/dist/esm/z-app-header_11.entry.js CHANGED
@@ -400,7 +400,7 @@ const ZInput = class {
400
400
  if (this.hasclearicon && type != InputType.NUMBER) {
401
401
  Object.assign(attr.class, { "has-clear-icon": true });
402
402
  }
403
- return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr)), this.renderIcons()), this.renderMessage()));
403
+ return (h("div", { class: "text-wrapper" }, this.renderLabel(), h("div", null, h("input", Object.assign({ type: type === InputType.PASSWORD && !this.passwordHidden ? InputType.TEXT : type }, attr, { ref: (el) => (this.inputRef = el) })), this.renderIcons()), this.renderMessage()));
404
404
  }
405
405
  renderLabel() {
406
406
  if (!this.label) {
@@ -425,7 +425,10 @@ const ZInput = class {
425
425
  if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == InputType.NUMBER) {
426
426
  hidden = true;
427
427
  }
428
- return (h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, h("z-icon", { name: "multiply", class: this.size })));
428
+ return (h("button", { type: "button", class: `icon-button reset-icon ${hidden ? "hidden" : ""}`, "aria-label": "cancella il contenuto dell'input", onClick: () => {
429
+ this.inputRef.value = "";
430
+ this.emitInputChange("");
431
+ } }, h("z-icon", { name: "multiply", class: this.size })));
429
432
  }
430
433
  renderShowHidePassword() {
431
434
  return (h("button", { type: "button", class: "icon-button toggle-password-icon", disabled: this.disabled, "aria-label": this.passwordHidden ? "mostra password" : "nascondi password", onClick: () => (this.passwordHidden = !this.passwordHidden) }, h("z-icon", { name: this.passwordHidden ? "view-filled" : "view-off-filled", class: this.size })));