@zanichelli/albe-web-components 18.7.7-RC1 → 18.8.0

package/dist/components/index6.js.map

@@ -1 +1 @@
-{"file":"index6.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+mBAA+mB,CAAC;AACloB,uBAAe,SAAS;;MCOX,QAAQ;;;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-divider/styles.css?tag=z-divider&encapsulation=scoped","src/components/z-divider/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: 0;\n  margin: 0;\n}\n\n:host.divider-horizontal {\n  width: 100%;\n}\n\n:host.divider-vertical {\n  height: 100%;\n}\n\n:host.divider-small.divider-horizontal {\n  height: var(--border-size-small);\n}\n\n:host.divider-medium.divider-horizontal {\n  height: var(--border-size-medium);\n}\n\n:host.divider-large.divider-horizontal {\n  height: var(--border-size-large);\n}\n\n:host.divider-small.divider-vertical {\n  width: var(--border-size-small);\n}\n\n:host.divider-medium.divider-vertical {\n  width: var(--border-size-medium);\n}\n\n:host.divider-large.divider-vertical {\n  width: var(--border-size-large);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n  tag: \"z-divider\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZDivider {\n  /** [optional] Divider size */\n  @Prop()\n  size?: DividerSize = DividerSize.SMALL;\n\n  /** [optional] Divider color */\n  @Prop()\n  color?: string = \"gray200\";\n\n  /** [optional] Divider orintation */\n  @Prop()\n  orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n  render(): HTMLZDividerElement {\n    return (\n      <Host\n        class={`divider-${this.size} divider-${this.orientation}`}\n        style={{backgroundColor: `var(--${this.color})`}}\n      />\n    );\n  }\n}\n"],"version":3}
+{"file":"index6.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,+jFAA+jF,CAAC;AACllF,oBAAe,SAAS;;MCQX,KAAK;;;;;;oBASG,SAAS,CAAC,OAAO;;wBAQf,KAAK;yBAId,EAAE;;IAMd,MAAM;QACJ,QACE,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ,IAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,EACzC,8DAAQ,EACP,IAAI,CAAC,eAAe,KACnB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-chip/styles.css?tag=z-chip&encapsulation=scoped","src/components/z-chip/index.tsx"],"sourcesContent":[":host > .z-chip-container {\n  display: inline-flex;\n  min-height: 28px;\n  align-items: center;\n  padding: 0 calc(var(--space-unit) * 1.5);\n  border: var(--border-size-small) solid var(--color-surface03);\n  background-color: var(--color-surface01);\n  border-radius: 14px;\n  color: var(--color-default-text);\n  fill: var(--color-default-icon);\n  font-family: var(--font-family-sans);\n  font-size: 14px;\n  line-height: 28px;\n}\n\n:host > .z-chip-interactive {\n  font-weight: var(--font-sb);\n}\n\n:host > .z-chip-container > button {\n  padding: 0;\n  border: none;\n  margin-left: var(--space-unit);\n  background-color: transparent;\n  cursor: pointer;\n}\n\n:host > .z-chip-container > z-icon:first-child {\n  margin-right: calc(var(--space-unit) / 2);\n}\n\n:host > .z-chip-container .interactive-icon {\n  fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {\n  color: var(--color-hover-primary);\n  fill: var(--color-hover-primary);\n}\n\n:host > .z-chip-container[aria-disabled],\n:host > .z-chip-container[aria-disabled] z-icon {\n  color: var(--color-disabled03);\n  cursor: auto;\n  fill: var(--color-disabled03);\n}\n\n:host > .z-chip-container[aria-disabled] {\n  border: var(--border-size-small) solid var(--color-disabled01);\n}\n\n:host > .z-chip-container > button:focus:focus-visible {\n  border-radius: 100%;\n  box-shadow: var(--shadow-focus-primary);\n  outline: none;\n}\n\n:host > button:not([disabled]):active:hover .interactive-icon {\n  color: var(--color-primary01);\n  fill: var(--color-primary01-icon);\n}\n\n:host > .z-chip-container > z-icon,\n:host > .z-chip-container .interactive-icon {\n  --z-icon-width: 22px;\n  --z-icon-height: 22px;\n}\n\n/* :host type */\n:host > .z-chip-container.default {\n  min-height: 44px;\n  border-radius: 22px;\n  line-height: 44px;\n}\n\n:host > .z-chip-container.medium {\n  min-height: 40px;\n  border-radius: 22px;\n  line-height: 40px;\n}\n\n:host > .z-chip-container.small {\n  min-height: 36px;\n  border-radius: 22px;\n  line-height: 36px;\n}\n\n/* Desktop breakpoint */\n@media (min-width: 1152px) {\n  :host > .z-chip-container {\n    font-size: 12px;\n  }\n\n  /* :host type */\n  :host > .z-chip-container.default {\n    min-height: 32px;\n    border-radius: 16px;\n    line-height: 32px;\n  }\n\n  :host > .z-chip-container.medium {\n    min-height: 28px;\n    border-radius: 16px;\n    line-height: 28px;\n  }\n\n  :host > .z-chip-container.small {\n    min-height: 24px;\n    border-radius: 16px;\n    line-height: 24px;\n  }\n\n  :host > .z-chip-container > z-icon,\n  :host > .z-chip-container .interactive-icon {\n    --z-icon-width: 14px;\n    --z-icon-height: 14px;\n  }\n}\n","import {Component, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip {\n  @Element() el: HTMLZChipElement;\n\n  /** Non interactive icon */\n  @Prop()\n  icon?: string;\n\n  /** z-chip size type, can be default, medium or small */\n  @Prop({reflect: true})\n  type?: ZChipType = ZChipType.DEFAULT;\n\n  /** z-chip interactive icon */\n  @Prop({reflect: true})\n  interactiveIcon?: string;\n\n  /** set z-chip as disabled */\n  @Prop({reflect: true})\n  disabled?: boolean = false;\n\n  /** z-chip aria-label string */\n  @Prop()\n  ariaLabel = \"\";\n\n  /** click on interactive icon */\n  @Event()\n  interactiveIconClick: EventEmitter;\n\n  render(): HTMLDivElement {\n    return (\n      <div\n        class={{\n          \"z-chip-container\": true,\n          \"z-chip-interactive\": !!this.interactiveIcon,\n          [this.type]: true,\n        }}\n        aria-disabled={this.disabled}\n      >\n        {this.icon && <z-icon name={this.icon} />}\n        <slot />\n        {this.interactiveIcon && (\n          <button\n            type=\"button\"\n            onClick={() => this.interactiveIconClick.emit()}\n            aria-label={this.ariaLabel}\n            disabled={this.disabled}\n          >\n            <z-icon\n              class=\"interactive-icon\"\n              name={this.interactiveIcon}\n            />\n          </button>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index7.js

@@ -1,63 +1,40 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './index4.js';
-import { d as defineCustomElement$1 } from './index9.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { D as DividerSize, h as DividerOrientation } from './index2.js';
 
-const stylesCss = ":host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );background-position:0 0,\n    0 0,\n    100% 0,\n    0 100%;background-repeat:no-repeat;background-size:2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}";
-const ZDragdropAreaStyle0 = stylesCss;
+const stylesCss = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
+const ZDividerStyle0 = stylesCss;
 
-const ZDragdropArea = /*@__PURE__*/ proxyCustomElement(class ZDragdropArea extends HTMLElement {
+const ZDivider = /*@__PURE__*/ proxyCustomElement(class ZDivider extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
-        this.fileDropped = createEvent(this, "fileDropped", 7);
-        this.dragAndDropLabel = undefined;
-        this.dragging = false;
-    }
-    onDrop(e) {
-        e.preventDefault();
-        this.dragging = false;
-        if (e.dataTransfer.files.length) {
-            this.fileDropped.emit(e.dataTransfer.files);
-        }
+        this.size = DividerSize.SMALL;
+        this.color = "gray200";
+        this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '190dcbcc79e4443895774274715076523f618cf2', class: { dragover: this.dragging }, onDragOver: (e) => {
-                e.preventDefault();
-                this.dragging = true;
-            }, onDragLeave: () => {
-                this.dragging = false;
-            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '4d80939d13543b91165c7fdb14f5ec8037464ffe', class: "dragover-container" }, h("z-button", { key: '0957633378fc64a9efa91e6cf3748480572f05b8' }, this.dragAndDropLabel)), h("slot", { key: '128c06ec19a231080cafc23108f5a82398626fc5' })));
+        return (h(Host, { key: '84826110c0a563d1b6f2654c540df49cdd0dfc7c', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
-    static get style() { return ZDragdropAreaStyle0; }
-}, [1, "z-dragdrop-area", {
-        "dragAndDropLabel": [1, "drag-and-drop-label"],
-        "dragging": [32]
+    static get style() { return ZDividerStyle0; }
+}, [2, "z-divider", {
+        "size": [1],
+        "color": [1],
+        "orientation": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-dragdrop-area", "z-button", "z-icon"];
+    const components = ["z-divider"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-dragdrop-area":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZDragdropArea);
-            }
-            break;
-        case "z-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "z-icon":
+        case "z-divider":
             if (!customElements.get(tagName)) {
-                defineCustomElement$1();
+                customElements.define(tagName, ZDivider);
             }
             break;
     } });
 }
 
-export { ZDragdropArea as Z, defineCustomElement as d };
+export { ZDivider as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index7.js.map

package/dist/components/index7.js.map

@@ -1 +1 @@
-{"file":"index7.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,+9CAA+9C,CAAC;AACl/C,4BAAe,SAAS;;MCMX,aAAa;;;;;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE;YAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtB,EACD,WAAW,EAAE;gBACX,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE9B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC,EACN,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index7.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,+mBAA+mB,CAAC;AACloB,uBAAe,SAAS;;MCOX,QAAQ;;;;oBAGE,WAAW,CAAC,KAAK;qBAIrB,SAAS;2BAIS,kBAAkB,CAAC,UAAU;;IAEhE,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,WAAW,EAAE,EACzD,KAAK,EAAE,EAAC,eAAe,EAAE,SAAS,IAAI,CAAC,KAAK,GAAG,EAAC,GAChD,EACF;KACH;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-divider/styles.css?tag=z-divider&encapsulation=scoped","src/components/z-divider/index.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: 0;\n  margin: 0;\n}\n\n:host.divider-horizontal {\n  width: 100%;\n}\n\n:host.divider-vertical {\n  height: 100%;\n}\n\n:host.divider-small.divider-horizontal {\n  height: var(--border-size-small);\n}\n\n:host.divider-medium.divider-horizontal {\n  height: var(--border-size-medium);\n}\n\n:host.divider-large.divider-horizontal {\n  height: var(--border-size-large);\n}\n\n:host.divider-small.divider-vertical {\n  width: var(--border-size-small);\n}\n\n:host.divider-medium.divider-vertical {\n  width: var(--border-size-medium);\n}\n\n:host.divider-large.divider-vertical {\n  width: var(--border-size-large);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {DividerOrientation, DividerSize} from \"../../beans\";\n@Component({\n  tag: \"z-divider\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZDivider {\n  /** [optional] Divider size */\n  @Prop()\n  size?: DividerSize = DividerSize.SMALL;\n\n  /** [optional] Divider color */\n  @Prop()\n  color?: string = \"gray200\";\n\n  /** [optional] Divider orintation */\n  @Prop()\n  orientation?: DividerOrientation = DividerOrientation.HORIZONTAL;\n\n  render(): HTMLZDividerElement {\n    return (\n      <Host\n        class={`divider-${this.size} divider-${this.orientation}`}\n        style={{backgroundColor: `var(--${this.color})`}}\n      />\n    );\n  }\n}\n"],"version":3}

package/dist/components/index8.js

@@ -1,33 +1,63 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './index5.js';
+import { d as defineCustomElement$1 } from './index10.js';
 
-const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );content:\"\";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
-const ZGhostLoadingStyle0 = stylesCss;
+const stylesCss = ":host{position:relative;display:flex;width:100%;height:232px;flex-direction:column;align-items:center;padding:calc(var(--space-unit) * 3);background-color:var(--color-surface02);background-image:repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );background-position:0 0,\n    0 0,\n    100% 0,\n    0 100%;background-repeat:no-repeat;background-size:2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;border-radius:var(--border-radius-small);color:var(--color-default-text);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host,*{box-sizing:border-box}:host(.dragover) *{pointer-events:none}.dragover-container{position:absolute;z-index:1;top:0;left:0;display:none;width:100%;height:100%;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}:host(.dragover) .dragover-container{display:flex;align-items:center;justify-content:center}";
+const ZDragdropAreaStyle0 = stylesCss;
 
-const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading extends HTMLElement {
+const ZDragdropArea = /*@__PURE__*/ proxyCustomElement(class ZDragdropArea extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.fileDropped = createEvent(this, "fileDropped", 7);
+        this.dragAndDropLabel = undefined;
+        this.dragging = false;
+    }
+    onDrop(e) {
+        e.preventDefault();
+        this.dragging = false;
+        if (e.dataTransfer.files.length) {
+            this.fileDropped.emit(e.dataTransfer.files);
+        }
     }
     render() {
-        return h(Host, { key: '92040be77ff2741acd6f13352ff13c550524c78b' });
+        return (h(Host, { key: '190dcbcc79e4443895774274715076523f618cf2', class: { dragover: this.dragging }, onDragOver: (e) => {
+                e.preventDefault();
+                this.dragging = true;
+            }, onDragLeave: () => {
+                this.dragging = false;
+            }, onDrop: this.onDrop.bind(this) }, h("div", { key: '4d80939d13543b91165c7fdb14f5ec8037464ffe', class: "dragover-container" }, h("z-button", { key: '0957633378fc64a9efa91e6cf3748480572f05b8' }, this.dragAndDropLabel)), h("slot", { key: '128c06ec19a231080cafc23108f5a82398626fc5' })));
     }
-    static get style() { return ZGhostLoadingStyle0; }
-}, [1, "z-ghost-loading"]);
+    static get style() { return ZDragdropAreaStyle0; }
+}, [1, "z-dragdrop-area", {
+        "dragAndDropLabel": [1, "drag-and-drop-label"],
+        "dragging": [32]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-ghost-loading"];
+    const components = ["z-dragdrop-area", "z-button", "z-icon"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-ghost-loading":
+        case "z-dragdrop-area":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ZDragdropArea);
+            }
+            break;
+        case "z-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "z-icon":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZGhostLoading);
+                defineCustomElement$1();
             }
             break;
     } });
 }
 
-export { ZGhostLoading as Z, defineCustomElement as d };
+export { ZDragdropArea as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index8.js.map

package/dist/components/index8.js.map

@@ -1 +1 @@
-{"file":"index8.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8gBAA8gB,CAAC;AACjiB,4BAAe,SAAS;;MCKX,aAAa;;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"version":3}
+{"file":"index8.js","mappings":";;;;AAAA,MAAM,SAAS,GAAG,+9CAA+9C,CAAC;AACl/C,4BAAe,SAAS;;MCMX,aAAa;;;;;;;wBAOb,KAAK;;IAMR,MAAM,CAAC,CAAY;QACzB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,EAAE;YAC/B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;SAC7C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAC,EAChC,UAAU,EAAE,CAAC,CAAC;gBACZ,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;aACtB,EACD,WAAW,EAAE;gBACX,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;aACvB,EACD,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAE9B,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,mEAAW,IAAI,CAAC,gBAAgB,CAAY,CACxC,EACN,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/file-upload/z-dragdrop-area/styles.css?tag=z-dragdrop-area&encapsulation=shadow","src/components/file-upload/z-dragdrop-area/index.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 232px;\n  flex-direction: column;\n  align-items: center;\n  padding: calc(var(--space-unit) * 3);\n  background-color: var(--color-surface02);\n  background-image:\n    repeating-linear-gradient(\n      0deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      90deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      180deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    ),\n    repeating-linear-gradient(\n      270deg,\n      var(--color-surface03),\n      var(--color-surface03) 12px,\n      transparent 12px,\n      transparent 20px\n    );\n  background-position:\n    0 0,\n    0 0,\n    100% 0,\n    0 100%;\n  background-repeat: no-repeat;\n  background-size:\n    2px 100%,\n    100% 2px,\n    2px 100%,\n    100% 2px;\n  border-radius: var(--border-radius-small);\n  color: var(--color-default-text);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-rg);\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\n/* https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element */\n:host(.dragover) * {\n  pointer-events: none;\n}\n\n.dragover-container {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  left: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  background-color: var(--color-primary03);\n  box-shadow: var(--shadow-focus-primary);\n}\n\n:host(.dragover) .dragover-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","import {Component, Event, EventEmitter, Host, Prop, State, h} from \"@stencil/core\";\n\n@Component({\n  tag: \"z-dragdrop-area\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZDragdropArea {\n  /** drag & drop button label */\n  @Prop()\n  dragAndDropLabel: string;\n\n  /** State that indicates if the user is dragging a file over the drag & drop area */\n  @State()\n  dragging = false;\n\n  /** Emitted when user drop one or more files */\n  @Event()\n  fileDropped: EventEmitter;\n\n  private onDrop(e: DragEvent): void {\n    e.preventDefault();\n    this.dragging = false;\n    if (e.dataTransfer.files.length) {\n      this.fileDropped.emit(e.dataTransfer.files);\n    }\n  }\n\n  render(): HTMLZDragdropAreaElement {\n    return (\n      <Host\n        class={{dragover: this.dragging}}\n        onDragOver={(e) => {\n          e.preventDefault();\n          this.dragging = true;\n        }}\n        onDragLeave={() => {\n          this.dragging = false;\n        }}\n        onDrop={this.onDrop.bind(this)}\n      >\n        <div class=\"dragover-container\">\n          <z-button>{this.dragAndDropLabel}</z-button>\n        </div>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/index9.js

@@ -1,51 +1,33 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { I as ICONS } from './iconset.js';
 
-const stylesCss = ":host{margin-right:var(--z-icon-right-margin, 0);margin-left:var(--z-icon-left-margin, 0);line-height:0;vertical-align:middle}:host svg:not([width]){width:var(--z-icon-width, 1.125rem)}:host svg:not([height]){height:var(--z-icon-height, 1.125rem)}";
-const ZIconStyle0 = stylesCss;
+const stylesCss = ":host{display:inline-block;overflow:hidden;width:100%;height:100%;background:var(--color-surface02);border-radius:var(--border-radius);transform:translate3d(0, 0, 0)}:host::after{display:block;width:100%;height:100%;animation:progress 1.6s ease-in-out infinite;background-image:linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );content:\"\";filter:blur(6px)}@keyframes progress{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}";
+const ZGhostLoadingStyle0 = stylesCss;
 
-const ZIcon = /*@__PURE__*/ proxyCustomElement(class ZIcon extends HTMLElement {
+const ZGhostLoading = /*@__PURE__*/ proxyCustomElement(class ZGhostLoading extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.name = undefined;
-        this.height = undefined;
-        this.width = undefined;
-        this.iconid = undefined;
-        this.fill = undefined;
-    }
-    selectPathOrPolygon(iconValue) {
-        if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
-            return h("path", { d: ICONS[this.name] });
-        }
-        return h("polygon", { points: ICONS[this.name] });
     }
     render() {
-        return (h(Host, { key: '427cac0797fc718938ee45da5999b8a2bf70e570', "aria-hidden": "true" }, h("svg", { key: '23275947c49b69095acbec1df2ecec0f04da3525', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+        return h(Host, { key: 'b91e3e3bce067ebad27d70f6c1d209e98f045a8e' });
     }
-    static get style() { return ZIconStyle0; }
-}, [1, "z-icon", {
-        "name": [1],
-        "height": [8],
-        "width": [8],
-        "iconid": [1],
-        "fill": [1]
-    }]);
+    static get style() { return ZGhostLoadingStyle0; }
+}, [1, "z-ghost-loading"]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["z-icon"];
+    const components = ["z-ghost-loading"];
     components.forEach(tagName => { switch (tagName) {
-        case "z-icon":
+        case "z-ghost-loading":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, ZIcon);
+                customElements.define(tagName, ZGhostLoading);
             }
             break;
     } });
 }
 
-export { ZIcon as Z, defineCustomElement as d };
+export { ZGhostLoading as Z, defineCustomElement as d };
 
 //# sourceMappingURL=index9.js.map

package/dist/components/index9.js.map

@@ -1 +1 @@
-{"file":"index9.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,yPAAyP,CAAC;AAC5Q,oBAAe,SAAS;;MCOX,KAAK;;;;;;;;;;;IAqBR,mBAAmB,CAAC,SAAiB;QAC3C,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,UAAU,CAAC,GAAG,CAAC,EAAE;YAC9B,OAAO,YAAM,CAAC,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAS,CAAC;SAC3C;QAED,OAAO,eAAS,MAAM,EAAE,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,GAAY,CAAC;KACtD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,oEAAa,MAAM,IACtB,4DACE,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,EAAE,EAAE,IAAI,CAAC,MAAM,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,SAAS,IAAI,CAAC,IAAI,GAAG,GAAG,EAAE,IAE3C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CACvC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-icon/styles.css?tag=z-icon&encapsulation=shadow","src/components/z-icon/index.tsx"],"sourcesContent":[":host {\n  margin-right: var(--z-icon-right-margin, 0);\n  margin-left: var(--z-icon-left-margin, 0);\n  line-height: 0;\n  vertical-align: middle;\n}\n\n:host svg:not([width]) {\n  width: var(--z-icon-width, 1.125rem);\n}\n\n:host svg:not([height]) {\n  height: var(--z-icon-height, 1.125rem);\n}\n","import {Component, Host, Prop, h} from \"@stencil/core\";\nimport {ICONS} from \"../../constants/iconset\";\n\n@Component({\n  tag: \"z-icon\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZIcon {\n  /** icon name */\n  @Prop()\n  name: string;\n\n  /** icon height (optional) */\n  @Prop()\n  height?: number | string;\n\n  /** icon width (optional) */\n  @Prop()\n  width?: number | string;\n\n  /** icon id (optional) */\n  @Prop()\n  iconid?: string;\n\n  /** icon fill (optional) */\n  @Prop()\n  fill?: string;\n\n  private selectPathOrPolygon(iconValue: string): SVGPathElement | SVGPolygonElement {\n    if (iconValue?.startsWith(\"M\")) {\n      return <path d={ICONS[this.name]}></path>;\n    }\n\n    return <polygon points={ICONS[this.name]}></polygon>;\n  }\n\n  render(): SVGElement {\n    return (\n      <Host aria-hidden=\"true\">\n        <svg\n          viewBox=\"0 0 1000 1000\"\n          width={this.width}\n          height={this.height}\n          id={this.iconid}\n          fill={this.fill ? `var(--${this.fill})` : \"\"}\n        >\n          {this.selectPathOrPolygon(ICONS[this.name])}\n        </svg>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"index9.js","mappings":";;AAAA,MAAM,SAAS,GAAG,8gBAA8gB,CAAC;AACjiB,4BAAe,SAAS;;MCKX,aAAa;;;;;;IACxB,MAAM;QACJ,OAAO,EAAC,IAAI,sDAAG,CAAC;KACjB;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/z-ghost-loading/styles.css?tag=z-ghost-loading&encapsulation=shadow","src/components/z-ghost-loading/index.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  background: var(--color-surface02);\n  border-radius: var(--border-radius);\n  transform: translate3d(0, 0, 0);\n}\n\n:host::after {\n  display: block;\n  width: 100%;\n  height: 100%;\n  animation: progress 1.6s ease-in-out infinite;\n  background-image: linear-gradient(\n    90deg,\n    var(--color-surface02) 0%,\n    var(--color-surface03) 95%,\n    var(--color-surface02) 100%\n  );\n  content: \"\";\n  filter: blur(6px);\n}\n\n@keyframes progress {\n  0% {\n    transform: translateX(-100%);\n  }\n\n  100% {\n    transform: translateX(100%);\n  }\n}\n","import {Component, h, Host} from \"@stencil/core\";\n@Component({\n  tag: \"z-ghost-loading\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZGhostLoading {\n  render(): HTMLZGhostLoadingElement {\n    return <Host />;\n  }\n}\n"],"version":3}

package/dist/components/z-accordion.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { e as ControlSize, _ as AccordionVariant } from './index2.js';
-import { d as defineCustomElement$2 } from './index9.js';
+import { d as defineCustomElement$2 } from './index10.js';
 
 const stylesCss = ":host,:host *,:host ::slotted(*){box-sizing:border-box}:host{--z-accordion-highlight-color:transparent;--z-accordion-bg:var(--color-surface01);--z-accordion-label-color:var(--color-default-text);--z-accordion-disabled-label-color:var(--color-text03);--z-accordion-content-bg:var(--color-surface01);--z-accordion-content-fg:var(--color-default-text);--z-accordion-hover-color:var(--color-surface02);--z-accordion-left-padding:calc(var(--space-unit) * 2);--z-accordion-right-padding:var(--space-unit);--z-accordion-label-font-weight:var(--font-sb);display:block;border-top:var(--border-size-small) solid var(--color-surface03);border-bottom:var(--border-size-small) solid var(--color-surface03);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;min-height:var(--summary-height);align-items:center;padding:var(--summary-y-padding) var(--z-accordion-right-padding) var(--summary-y-padding)\n    var(--z-accordion-left-padding);background-color:var(--z-accordion-bg);column-gap:var(--space-unit);cursor:pointer;list-style:none}summary::-webkit-details-marker{display: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(--z-accordion-hover-color);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(--z-accordion-disabled-label-color)}summary>z-icon{fill:var(--z-accordion-label-color)}:host([is-disabled]) summary>z-icon{fill:var(--z-accordion-disabled-label-color)}.z-accordion-label{color:var(--z-accordion-label-color);font-size:var(--font-size-3);font-weight:var(--z-accordion-label-font-weight)}: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);background-color:var(--z-accordion-content-bg);color:var(--z-accordion-content-fg);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(--z-accordion-disabled-label-color)}:host([is-disabled]) .z-accordion-tags ::slotted(z-tag[slot=\"tag\"]){--z-tag-bg:var(--z-accordion-disabled-label-color) !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(--z-accordion-hover-color)}: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))}";
 const ZAccordionStyle0 = stylesCss;

package/dist/components/z-anchor-navigation.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { e as ControlSize, B as ButtonVariant } from './index2.js';
-import { d as defineCustomElement$3 } from './index4.js';
-import { d as defineCustomElement$2 } from './index9.js';
+import { d as defineCustomElement$3 } from './index5.js';
+import { d as defineCustomElement$2 } from './index10.js';
 
 const stylesCss = "html{scroll-behavior:smooth}z-anchor-navigation nav{display:none;flex-direction:column;justify-content:flex-start;row-gap:calc(var(--space-unit) / 2)}z-anchor-navigation[collapsed] nav{display:flex;margin-top:var(--space-unit)}z-anchor-navigation nav a{display:-webkit-box;overflow:clip;width:100%;box-sizing:border-box;padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 2);-webkit-box-orient:vertical;font-weight:inherit;-webkit-line-clamp:2;line-clamp:2;overflow-clip-margin:content-box;text-decoration:none}z-anchor-navigation nav>* a{color:inherit}z-anchor-navigation nav * a:not(:only-child){padding-right:calc(var(--space-unit) * 5)}@supports not (overflow-clip-margin: content-box){z-anchor-navigation nav a{display:inline-block;overflow:hidden;-webkit-line-clamp:none;line-clamp:none;text-overflow:ellipsis;white-space:nowrap}}z-anchor-navigation nav>*{position:relative;border-left:var(--border-size-large) solid var(--color-default-icon);color:var(--color-default-text);font-family:var(--font-family-sans);transition:background-color 0.3s ease-in-out,\n    border-color 0.3s ease-in-out,\n    color 0.3s ease-in-out}z-anchor-navigation nav>[data-current]{border-left-color:var(--color-primary01);color:var(--color-primary01);font-weight:var(--font-sb)}z-anchor-navigation nav>*>*:is(z-button,button){position:absolute;top:50%;right:0;transform:translateY(-50%);transition:opacity 0.3s ease-in-out}z-anchor-navigation nav>*:focus:focus-visible,z-anchor-navigation nav>*>*:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}z-anchor-navigation nav button{padding:0;border:none;margin:0;background-color:transparent}@media (min-width: 768px){z-anchor-navigation:not([is-collapsed]) z-button.toggle{display:none !important}z-anchor-navigation:not([is-collapsed]) nav{display:flex}z-anchor-navigation nav>*>:is(z-button,button){opacity:0;pointer-events:none}@media (hover: hover){z-anchor-navigation nav>:is([data-current],:hover,:focus,:focus-within)>:is(z-button,button){fill:var(--color-default-icon);opacity:1;pointer-events:unset}z-anchor-navigation nav>*:hover{border-left-color:var(--color-hover-primary);background-color:var(--color-background);color:var(--color-hover-primary)}}z-anchor-navigation[hide-unselected] nav>*:not([data-current],:hover,:focus,:focus-within){color:transparent;fill:transparent}}";
 const ZAnchorNavigationStyle0 = stylesCss;

package/dist/components/z-app-header-deprecated.js

@@ -1,16 +1,16 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
-import { d as defineCustomElement$c } from './index4.js';
-import { d as defineCustomElement$b } from './index6.js';
-import { d as defineCustomElement$a } from './index9.js';
-import { d as defineCustomElement$9 } from './index11.js';
-import { d as defineCustomElement$8 } from './index12.js';
-import { d as defineCustomElement$7 } from './index13.js';
-import { d as defineCustomElement$6 } from './index14.js';
-import { d as defineCustomElement$5 } from './index15.js';
-import { d as defineCustomElement$4 } from './index22.js';
-import { d as defineCustomElement$3 } from './index24.js';
-import { d as defineCustomElement$2 } from './index25.js';
+import { d as defineCustomElement$c } from './index5.js';
+import { d as defineCustomElement$b } from './index7.js';
+import { d as defineCustomElement$a } from './index10.js';
+import { d as defineCustomElement$9 } from './index12.js';
+import { d as defineCustomElement$8 } from './index13.js';
+import { d as defineCustomElement$7 } from './index14.js';
+import { d as defineCustomElement$6 } from './index15.js';
+import { d as defineCustomElement$5 } from './index16.js';
+import { d as defineCustomElement$4 } from './index23.js';
+import { d as defineCustomElement$3 } from './index25.js';
+import { d as defineCustomElement$2 } from './index26.js';
 
 const stylesCss = ":host{--app-header-typography-1-size:24px;--app-header-typography-2-size:28px;--app-header-typography-3-size:32px;--app-header-typography-4-size:36px;--app-header-typography-5-size:42px;--app-header-typography-6-size:48px;--app-header-typography-7-size:54px;--app-header-typography-8-size:60px;--app-header-typography-9-size:68px;--app-header-typography-10-size:76px;--app-header-typography-11-size:84px;--app-header-typography-12-size:92px;--app-header-typography-1-lineheight:1.33;--app-header-typography-2-lineheight:1.29;--app-header-typography-3-lineheight:1.25;--app-header-typography-4-lineheight:1.24;--app-header-typography-5-lineheight:1.24;--app-header-typography-6-lineheight:1.25;--app-header-typography-7-lineheight:1.2;--app-header-typography-8-lineheight:1.26;--app-header-typography-9-lineheight:1.24;--app-header-typography-10-lineheight:1.26;--app-header-typography-11-lineheight:1.2;--app-header-typography-12-lineheight:1.2;--app-header-typography-1-tracking:calc(-0.2 / 1em);--app-header-typography-2-tracking:calc(-0.4 / 1em);--app-header-typography-3-tracking:calc(-0.6 / 1em);--app-header-typography-4-tracking:calc(-0.8 / 1em);--app-header-typography-5-tracking:calc(-1 / 1em);--app-header-typography-6-tracking:calc(-1.2 / 1em);--app-header-typography-7-tracking:calc(-1.4 / 1em);--app-header-typography-8-tracking:calc(-1.6 / 1em);--app-header-typography-9-tracking:calc(-1.8 / 1em);--app-header-typography-10-tracking:calc(-2 / 1em);--app-header-typography-11-tracking:calc(-2.2 / 1em);--app-header-typography-12-tracking:calc(-2.4 / 1em);--app-header-content-max-width:100%;--app-header-height:auto;--app-header-top-offset:48px;--app-header-drawer-trigger-size:calc(var(--space-unit) * 4);--app-header-bg:var(--color-surface01);--app-header-stucked-bg:var(--color-surface01);--app-header-text-color:var(--color-default-text);--app-header-title-font-size:var(--app-header-typography-3-size);--app-header-title-lineheight:var(--app-header-typography-3-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-3-tracking);--app-header-stucked-text-color:var(--color-default-text);position:relative;display:block;height:var(--app-header-height);color:var(--app-header-text-color)}:host,*{box-sizing:border-box}.heading-panel{position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:var(--grid-margin);margin:0 auto;background:var(--app-header-bg);gap:calc(var(--space-unit) * 2) calc(var(--space-unit) * 5)}.hero-container+.heading-panel{background:transparent}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-title{display:flex;max-width:100%;flex-direction:row;align-items:flex-start;column-gap:calc(var(--space-unit) * 2)}::slotted([slot=\"title\"]),.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){margin:0;font-family:\"IBM Plex Serif\", serif;font-weight:var(--font-bd)}::slotted([slot=\"title\"]){font-size:var(--app-header-title-font-size);letter-spacing:var(--app-header-title-letter-spacing);line-height:var(--app-header-title-lineheight)}.heading-stuck .heading-title>*,::slotted([slot=\"stucked-title\"]){font-size:var(--app-header-typography-3-size);letter-spacing:var(--app-header-typography-3-tracking);line-height:var(--app-header-typography-3-lineheight)}:host(:not([menu-length=\"0\"])) .heading-subtitle{padding-left:calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2))}::slotted([slot=\"top-subtitle\"]),::slotted([slot=\"subtitle\"]){margin:0;font-family:var(--font-family-sans);font-size:20px;font-style:italic;line-height:26px}::slotted([slot=\"subtitle\"]){font-weight:500}::slotted([slot=\"top-subtitle\"]){font-weight:400}.menu-container{display:flex;width:100%;flex:1 auto;flex-flow:row wrap}:host([menu-length=\"0\"]:not([enable-search])) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}z-searchbar{z-index:0;display:flex;width:auto;min-width:calc(var(--space-unit) * 32);flex:1 auto;align-items:center;margin-left:auto}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg);box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color)}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto;column-gap:calc(var(--space-unit) * 2)}.heading-stuck .heading-title{overflow:hidden}.heading-stuck .heading-title>*,.heading-stuck .heading-title ::slotted([slot=\"stucked-title\"]){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.heading-stuck-content z-button{margin-left:auto}.drawer-trigger{padding:0;border:0;margin:0;appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer}.drawer-trigger z-icon{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);fill:currentcolor}.heading-container :is(.drawer-trigger,z-button.search-page-button){display:flex;height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));align-items:center}.heading-container z-button.search-page-button{margin-left:auto}.drawer-content{display:none}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column;row-gap:calc(var(--space-unit) * 2.5)}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:var(--app-header-drawer-trigger-size);--z-icon-height:var(--app-header-drawer-trigger-size);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-size:inherit;outline:none}.drawer-close:focus-visible{box-shadow:var(--shadow-focus-primary)}.hero-container{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%}:host([overlay]) .heading-panel .drawer-trigger z-icon,:host([overlay]) .heading-panel .heading-container,:host([overlay]) .heading-panel .menu-container{color:var(--color-white);fill:var(--color-white)}:host([overlay]) .heading-panel .menu-container ::slotted(z-menu){--z-menu-label-color:var(--color-white)}:host([overlay]) .hero-container::after{position:absolute;z-index:0;top:0;left:0;width:100%;height:100%;background:var(--color-black);content:\"\";opacity:0.5}.hero-container img,.hero-container ::slotted(*){position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:top center;-webkit-user-drag:none}@media (min-width: 768px){:host{--app-header-title-font-size:var(--app-header-typography-6-size);--app-header-title-lineheight:var(--app-header-typography-6-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-6-tracking)}.heading-panel{flex-flow:row wrap;align-items:center;padding-bottom:calc(var(--space-unit) * 2)}.heading-container{margin-right:auto}:host(:is([flow=\"offcanvas\"],[menu-length=\"0\"])) :is(.heading-container,.menu-container){width:auto}:host(:not([flow=\"offcanvas\"])) .heading-subtitle{padding-left:0}.menu-container{flex:initial;align-items:center}:host([menu-length=\"0\"]) .menu-container:not(:empty){height:calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight))}:host(:not([flow=\"offcanvas\"])) .menu-container{gap:var(--space-unit) calc(var(--space-unit) * 5)}:host(:not([flow=\"offcanvas\"])) .heading-container .drawer-trigger{display:none}}@media (min-width: 1152px){:host{--app-header-title-font-size:var(--app-header-typography-7-size);--app-header-title-lineheight:var(--app-header-typography-7-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-7-tracking)}.heading-panel{justify-content:flex-start;padding-bottom:calc(var(--space-unit) * 3)}.heading-container,.menu-container{width:auto}:host([flow=\"stack\"]) .heading-panel{flex-flow:column;align-items:flex-start}:host([flow=\"stack\"]) .menu-container{width:100%}:host(:not([flow=\"offcanvas\"],[menu-length=\"0\"])) .heading-panel{row-gap:calc(var(--space-unit) * 3)}z-searchbar{min-width:calc(var(--space-unit) * 45);flex:initial}}@media (min-width: 1366px){:host{--app-header-title-font-size:var(--app-header-typography-9-size);--app-header-title-lineheight:var(--app-header-typography-9-lineheight);--app-header-title-letter-spacing:var(--app-header-typography-9-tracking)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 const ZAppHeaderDeprecatedStyle0 = stylesCss;

package/dist/components/z-app-header.js

@@ -2,19 +2,19 @@ import { proxyCustomElement, HTMLElement, h, Fragment, createEvent, Host } from
 import { g as KeyboardCode, B as ButtonVariant, e as ControlSize, O as OffCanvasVariant, u as TransitionDirection } from './index2.js';
 import { B as Breakpoints } from './breakpoints.js';
 import { a as containsElement } from './utils.js';
-import { d as defineCustomElement$c } from './index4.js';
-import { d as defineCustomElement$b } from './index6.js';
-import { d as defineCustomElement$a } from './index9.js';
-import { d as defineCustomElement$9 } from './index11.js';
-import { d as defineCustomElement$8 } from './index12.js';
-import { d as defineCustomElement$7 } from './index13.js';
-import { d as defineCustomElement$6 } from './index14.js';
-import { d as defineCustomElement$5 } from './index15.js';
-import { d as defineCustomElement$4 } from './index22.js';
-import { d as defineCustomElement$3 } from './index24.js';
-import { d as defineCustomElement$2 } from './index25.js';
+import { d as defineCustomElement$c } from './index5.js';
+import { d as defineCustomElement$b } from './index7.js';
+import { d as defineCustomElement$a } from './index10.js';
+import { d as defineCustomElement$9 } from './index12.js';
+import { d as defineCustomElement$8 } from './index13.js';
+import { d as defineCustomElement$7 } from './index14.js';
+import { d as defineCustomElement$6 } from './index15.js';
+import { d as defineCustomElement$5 } from './index16.js';
+import { d as defineCustomElement$4 } from './index23.js';
+import { d as defineCustomElement$3 } from './index25.js';
+import { d as defineCustomElement$2 } from './index26.js';
 
-const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
+const stylesCss = ":host{position:relative;display:block;box-shadow:var(--shadow-2)}:host,*{box-sizing:border-box}.heading-panel{--title-line-height:1.333;--title-font-size:var(--font-size-6);position:relative;display:flex;width:100%;max-width:var(--app-header-content-max-width, 100%);flex-direction:column;flex-grow:0;flex-shrink:0;align-items:baseline;padding:calc(var(--space-unit) * 2);margin:0 auto;background:var(--app-header-bg, var(--color-surface01))}:host(:empty) .heading-panel{padding:0}.heading-container{position:relative;z-index:1;display:flex;width:100%;max-width:100%;flex:1 auto;flex-direction:column;justify-content:flex-start}.heading-panel.has-menubar{padding-bottom:0}.heading-panel .heading-container{flex-direction:column-reverse}:host([enable-search]) .heading-panel .heading-container{flex-direction:column}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:row}.heading-title{display:flex;width:100%;flex-direction:row;align-items:flex-start}.heading-title:not(:last-child){margin-right:var(--space-unit)}.z-logo,.search-page-button{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}.z-logo img{height:24px;margin:0 var(--space-unit) 0 0;content:url('data:image/svg+xml,<svg width=\"61\" height=\"32\" viewBox=\"0 0 61 32\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.9874 32C7.1595 32 0 24.8349 0 16C0 7.16513 7.1595 0 15.9874 0H45.0126C53.8405 0 61 7.16513 61 16C61 24.8349 53.8405 32 45.0126 32H15.9874Z\" fill=\"%23E2011A\"/><path d=\"M58.5435 15.9992C58.5435 23.4743 52.4892 29.5403 45.0129 29.5403C37.5367 29.5403 31.4824 23.4813 31.4824 15.9992C31.4824 8.51701 37.5367 2.45801 45.0129 2.45801C52.4892 2.45801 58.5435 8.51701 58.5435 15.9992Z\" fill=\"white\"/><path d=\"M40.7107 8.01862H49.8976V11.3158L44.139 21.7077H50.0384V24.6457H39.9785V21.4048L45.7371 10.9636H40.7107V8.01862Z\" fill=\"%23E2011A\"/><path d=\"M12.2914 24.6449C10.982 24.6449 10.271 23.8136 10.271 22.6722V7.04565H12.1718V22.9822H13.981V24.6449H12.2914Z\" fill=\"white\"/><path d=\"M25.6461 24.6448C24.2452 24.6448 23.675 23.7853 23.5342 22.6439H23.4145C22.8935 24.1446 21.5841 24.9266 19.8735 24.9266C17.2828 24.9266 15.7622 23.4964 15.7622 21.2137C15.7622 18.931 17.4236 17.6206 20.9928 17.6206H23.4145V16.4088C23.4145 14.6756 22.4641 13.7245 20.5141 13.7245C19.0428 13.7245 18.0642 14.4361 17.4025 15.5563L16.262 14.4854C16.9308 13.175 18.4021 12.0829 20.6126 12.0829C23.5623 12.0829 25.3152 13.6259 25.3152 16.2186V22.9751H26.7162V24.6378H25.6461V24.6448ZM23.4145 21.0799V19.0578H20.8942C18.733 19.0578 17.7545 19.7272 17.7545 20.9108V21.411C17.7545 22.6228 18.7049 23.3132 20.1762 23.3132C22.0558 23.3132 23.4074 22.341 23.4074 21.0799H23.4145Z\" fill=\"white\"/></svg>')}.product-logo{display:none}.product-logo ::slotted([slot=\"product-logo\"]){width:32px;height:32px;margin-right:var(--space-unit)}.product-logo ::slotted([slot=\"product-logo\"]) img{width:100%;height:100%;object-fit:cover}::slotted([slot=\"title\"]),::slotted([slot=\"stucked-title\"]),.stucked-title{margin:0;color:var(--app-header-text-color, var(--color-default-text));font-family:var(--font-family-serif);font-weight:var(--font-sb)}::slotted([slot=\"title\"]){display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font-size:var(--title-font-size);-webkit-line-clamp:2;line-clamp:2;line-height:var(--title-line-height);text-overflow:ellipsis}::slotted(a:is([slot=\"title\"],[slot=\"stucked-title\"])){text-decoration:none}:host([enable-search]) ::slotted([slot=\"title\"])+*{margin-left:calc(var(--space-unit) * 2)}:host([enable-offcanvas]:not([menu-length=\"0\"])) .top-subtitle{padding-left:calc(var(--space-unit) * 4 + var(--space-unit))}::slotted([slot=\"top-subtitle\"]){display:-webkit-box;overflow:hidden;max-width:80%;margin:0;-webkit-box-orient:vertical;color:var(--color-default-text);font-family:var(--font-family-sans);font-size:var(--font-size-2);font-style:italic;font-weight:var(--font-rg);-webkit-line-clamp:2;line-clamp:2}.search-page-button{margin-left:auto}.menu-container{display:flex;flex:1 auto;column-gap:calc(var(--space-unit) * 4)}.menu-container:focus:focus-visible{outline:none}:host([menu-length=\"0\"]) .menu-container,.menu-container:empty{display:none}.menu-container ::slotted([open]){position:relative;z-index:3}.menu-container ::slotted([slot=\"menu\"]:not(:last-child))::after{position:absolute;top:calc(1.5em / 2);right:calc(var(--space-unit) * -2);width:var(--border-size-small);height:1em;background-color:var(--color-default-icon);content:\"\";font-size:var(--font-size-3);transform:translateY(-50%)}z-searchbar{z-index:0;display:flex;width:100%;align-items:center}.heading-stuck{position:fixed;z-index:20;top:var(--app-header-top-offset, 48px);left:0;width:100%;max-width:100%;animation:slide-stuck-heading-in 250ms ease-out;background:var(--app-header-stucked-bg, var(--color-surface01));box-shadow:var(--shadow-2);color:var(--app-header-stucked-text-color, var(--color-default-text))}.heading-stuck-content{display:flex;max-width:var(--app-header-content-max-width, 100%);align-items:center;padding:var(--space-unit) var(--grid-margin);margin:0 auto}.heading-stuck .heading-title{--title-font-size:var(--font-size-5);--title-line-height:1.4;overflow:hidden;align-items:center}.heading-stuck .stucked-title{overflow:hidden;font-size:var(--title-font-size);line-height:var(--title-line-height);text-overflow:ellipsis;white-space:nowrap}.drawer-trigger,::slotted([slot=\"menu-button\"]){display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center;padding:0;border:0;margin-right:var(--space-unit);appearance:none;background:none;border-radius:0;color:inherit;cursor:pointer;outline:none}.drawer-trigger:focus:focus-visible z-icon{box-shadow:var(--shadow-focus-primary)}.drawer-trigger z-icon{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);fill:var(--color-default-icon)}.drawer-content{display:none}z-offcanvas{--z-offcanvas--top-space:var(--app-header-top-offset)}z-offcanvas[open] .drawer-content{display:flex;width:100%;flex:1 auto;flex-direction:column}z-offcanvas[open] .drawer-content ::slotted(z-menu){width:100%}.drawer-close{--z-icon-width:calc(var(--space-unit) * 4);--z-icon-height:calc(var(--space-unit) * 4);padding:0;border:0;margin:var(--space-unit) 0 calc(var(--space-unit) * 2.5);appearance:none;background:transparent;border-radius:0;cursor:pointer;outline:none}.drawer-close z-icon{fill:var(--color-default-icon)}.drawer-close:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}@media (max-width: 767px){:host([enable-search]) .heading-panel .heading-container{row-gap:calc(var(--space-unit) * 1.5)}}@media (min-width: 768px){.heading-panel{--title-font-size:var(--font-size-9);padding:calc(var(--space-unit) * 1.5) var(--grid-margin) calc(var(--space-unit) * 1.25)}:host([enable-search][search-page-url]) .heading-panel .heading-container{flex-direction:column}.heading-panel .heading-container{flex-direction:column;margin-right:auto}.z-logo img{height:32px}.product-logo{display:flex;height:calc(var(--title-font-size) * var(--title-line-height));align-items:center}z-searchbar{width:30%;height:calc(var(--title-font-size) * var(--title-line-height));margin-left:auto}.menu-container{flex:initial}.menu-container>[role=\"menubar\"]{display:contents}:host(:not([enable-offcanvas])) .menu-container{margin-top:calc((var(--space-unit) * 1.75))}:host(:not([enable-offcanvas])) .heading-container .drawer-trigger{display:none}.heading-stuck .heading-title{--title-font-size:var(--font-size-8);--title-line-height:1.5}.heading-stuck-content{padding:6px var(--grid-margin)}:host(:not([enable-offcanvas],[menu-length=\"0\"])){padding-left:0}}@media (min-width: 1152px){z-searchbar{min-width:calc(var(--space-unit) * 45)}}@keyframes slide-stuck-heading-in{0%{transform:translate3d(0, -100%, 0)}100%{transform:none}}";
 const ZAppHeaderStyle0 = stylesCss;
 
 const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined";
@@ -263,7 +263,7 @@ const ZAppHeader$1 = /*@__PURE__*/ proxyCustomElement(class ZAppHeader extends H
     }
     render() {
         const hasTopSubtitle = this.hasSlot("top-subtitle");
-        return (h(Host, { key: '01bcf2e73c2b4da9ed2c9bcf19ceeece56bd738e', "menu-length": this.menuLength }, h("div", { key: 'adf412ee992b488c6e87b7e2f82265c7e6a13b8c', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: '015996363351b8b81ee50bffd409d8a41edc4008', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '98e3fd2bc1a55fb77dfb00fb55708f6520461bb5', class: "top-subtitle" }, h("slot", { key: '068c16c8cb9496933955c6d68ac8aa1326640688', name: "top-subtitle" }))), h("div", { key: 'c7a806a4af8d099f0c6bc70cefd03f01467b235f', class: "heading-title" }, this.renderMenuButton(), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '45a99fbbb889355061ee3230d5825110d681e26e', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: 'b9ab704c754800865087d45791257a6191b847e9', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '0dd28fca9d831513a3f29041a33da0b9935caa3e', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '35e03382a70e5601c8d02c26731ba434d795de0a', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
+        return (h(Host, { key: 'a0bd0524157668d1ed6132f581596e91feef9c37', "menu-length": this.menuLength }, h("div", { key: 'a91c0c19ea534e7707dff0700fc3da571c3ff440', class: { "heading-panel": true, "has-menubar": this.menuLength > 0 && !this.enableOffcanvas }, ref: (el) => (this.container = el) }, h("div", { key: 'b19a7bbbc84d0fe7a516b0bdfb191572162ec79c', class: "heading-container" }, ((!this.enableSearch && this.isMobile) || !this.isMobile) && (h("div", { key: '5769e4b6a5aaef8d99133268e8dba7769cdad8ed', class: "top-subtitle" }, h("slot", { key: '9f5979f6a544049f53dd07a59c7524192aaef936', name: "top-subtitle" }))), h("div", { key: '4a3a22a01bbe11e460ef6f72b4eed08e17743013', class: "heading-title" }, h("slot", { key: '6cd7e4dbfdaddb8a2716e8168fc1bba4121c4291', name: "menu-button" }, this.renderMenuButton()), !hasTopSubtitle && !this._stuck && this.renderProductLogos(), h("slot", { key: '7401663bd3b0cd3fe228789ca856e002a04d3581', name: "title" }), this.enableSearch && !this.isMobile && this.renderSeachbar()), this.enableSearch && this.isMobile && this.renderSeachbar()), h("nav", { key: '685e52ce6b58cd839c34d7e5ab69c775604853e0', class: "menu-container", "aria-label": this.title || undefined }, this.canShowMenu && (h("div", { key: '9b5d50462dcc1c2fde87c9ee7a7ba62d96b6c252', role: "menubar", "aria-label": this.title || undefined }, h("slot", { key: '9965ec165c2e2f20e96a70f121856bf7382e1ecb', name: "menu", onSlotchange: this.collectMenuElements }))))), this.renderOffcanvas(), this._stuck && this.renderStuck()));
     }
     get hostElement() { return this; }
     static get watchers() { return {