@zanichelli/albe-web-components 19.3.0 → 19.5.0

package/dist/collection/components/table/z-tfoot/index.js

@@ -11,18 +11,18 @@ export class ZTfoot {
         this.sticky = false;
     }
     render() {
-        return (h(Host, { key: 'e200294dd24c6a58722245df0b90b8b562fd7293', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '0db022a1de8dcbe5457598ab55aacd7b07b9dcb4' })));
+        return (h(Host, { key: 'cdd4d2841caada167b8818ff534744445e0d8979', role: "rowgroup", tabIndex: -1 }, h("slot", { key: '5cf911121ea09dcc13744e9d1d730be92f20cbf4' })));
     }
     static get is() { return "z-tfoot"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-tfoot/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3E;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;KAYhB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;YAEZ,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tfoot/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAE3E;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAME;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;KAYhB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC;YAEZ,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZTFoot component.\n * @slot - ZTFoot content (`z-tr`).\n */\n@Component({\n  tag: \"z-tfoot\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTfoot implements ComponentInterface {\n  /**\n   * If true, the footer will be stuck to the bottom of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  render(): void {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={-1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-tfoot/styles.css

@@ -1,8 +1,7 @@
 :host {
   display: block;
   box-sizing: border-box;
-  border-top: 1px solid var(--color-surface03);
-  border-bottom: 1px solid var(--color-surface03);
+  margin-top: -1px;
 }
 
 :host([sticky]) {

package/dist/collection/components/table/z-thead/index.js

@@ -15,18 +15,18 @@ export class ZThead {
         this.isFocusable = false;
     }
     render() {
-        return (h(Host, { key: 'c32f2b2d2921e034d18d3b7121f59ee7b3b7b398', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'f74ef0383c4111415134df8ae1492fda11da8568' })));
+        return (h(Host, { key: '0e43e10373817b9ee5e4f1574fb0d46b232c510d', role: "rowgroup", tabIndex: this.isFocusable ? 0 : -1 }, h("slot", { key: 'aefd2ed2698efb7deabd11284f3d6cae95800e50' })));
     }
     static get is() { return "z-thead"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-thead/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEpF;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAQE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;KAYrB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-thead/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AAEpF;;;GAGG;AAMH,MAAM,OAAO,MAAM;IALnB;QAQE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAEf;;WAEG;QAEH,gBAAW,GAAG,KAAK,CAAC;KAYrB;IAVC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAEnC,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Host, Prop, h} from \"@stencil/core\";\n\n/**\n * ZThead component.\n * @slot - ZThead content (`z-tr`).\n */\n@Component({\n  tag: \"z-thead\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZThead implements ComponentInterface {\n  @Element() host: HTMLZTheadElement;\n\n  /**\n   * If true, the header will be stuck to the top of the table.\n   */\n  @Prop({reflect: true})\n  sticky = false;\n\n  /**\n   * The element is focusable\n   */\n  @Prop({reflect: true})\n  isFocusable = false;\n\n  render(): HTMLZTheadElement {\n    return (\n      <Host\n        role=\"rowgroup\"\n        tabIndex={this.isFocusable ? 0 : -1}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-thead/styles.css

@@ -1,8 +1,4 @@
 :host {
-  --z-table--cells-bottom-border-size: var(
-    --border-size-medium
-  ); /* Needed to handle the border of the expand button cell */
-
   --z-table--cells-background: var(
     --color-background
   ); /* Needed to handle the background-color of the expand button cell */

package/dist/collection/components/table/z-tr/index.js

@@ -27,16 +27,13 @@ export class ZTr {
     }
     updateColumns() {
         const cells = Array.from(this.host.querySelectorAll("z-td, z-th"));
-        if (this.expandable) {
-            cells.pop();
-        }
-        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
-        this.host.style.setProperty("--columns", `${columns}`);
         if (this.expandable) {
             const expandableContent = cells.pop();
             expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;
             this.expandableContentId = expandableContent.id;
         }
+        const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);
+        this.host.style.setProperty("--columns", `${columns}`);
     }
     /**
      * Handle click on row.
@@ -68,18 +65,18 @@ export class ZTr {
         this.updateColumns();
     }
     render() {
-        return (h(Host, { key: '92be779ec3e863cc85336fcedb02f718fa3a19fa', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '720c8209c21104e78129cbd76c12a6cdf8806ca2', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '3bb4f4d2e5ae60da5c105d1c8a99d6ff0fa59302', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'd27d18c1a4515ac055ce7db13ec3efdfc7d0314d', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: '9fd14fcab4ea512b42c63928c3e2dabb83fd1da3', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c5fcb7a2f92eb8401c4d27d28e5b68a5001616b7', onSlotchange: this.updateColumns.bind(this) })));
+        return (h(Host, { key: 'ffd8e071015ace61e51c603988d84dae42a047bb', role: "row", tabIndex: this.expandable ? 0 : undefined, expanded: this.expanded, onClick: this.onRowClick.bind(this), onKeyDown: this.onKeyDown.bind(this) }, h("div", { key: '49539d360bab6d865958910fd21f5c407fc0a16b', class: "z-tr--focus-overlay", "aria-hidden": "true" }), h("div", { key: '94c5f36a5f220a7403d0c6057faf41cf0509f68e', class: "z-tr--expand-button-container" }, this.expandable && (h("button", { key: 'ee46bd7dd59d27c6be18716fc3a46092cdac5eb6', tabIndex: -1, "aria-expanded": this.expanded ? "true" : "false", "aria-label": this.expanded ? "Comprimi riga" : "Espandi riga", "aria-controls": this.expandableContentId, type: "button" }, h("z-icon", { key: 'ce6fc941625f48f13edc7df3a43da159cf6f064d', name: this.expanded ? "minus-circled" : "plus-circled" })))), h("slot", { key: 'c41ca74f6026dda7813605940e6910a56cd576fb', onSlotchange: this.updateColumns.bind(this) })));
     }
     static get is() { return "z-tr"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../css-components/z-table/styles.css"]
         };
     }
     static get properties() {

package/dist/collection/components/table/z-tr/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZTr implements ComponentInterface {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n    if (this.expandable) {\n      cells.pop();\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const active = document.activeElement;\n    if (active !== this.host) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this.expanded = !this.expanded;\n      this.expand.emit({expanded: this.expanded});\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={this.expandable ? 0 : undefined}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n        onKeyDown={this.onKeyDown.bind(this)}\n      >\n        <div\n          class=\"z-tr--focus-overlay\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              tabIndex={-1}\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/table/z-tr/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  ComponentInterface,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n  h,\n} from \"@stencil/core\";\nimport {randomId} from \"../../../utils/utils\";\nimport \"../cells/z-td/index\";\nimport \"../cells/z-th/index\";\n\n/**\n * ZTr component.\n * When the row is `expandable`, you can set the `prevent-expand` css class on an interactive element inside the row\n * to prevent the row from expanding.\n * @slot - ZTr content (`z-td` or `z-th`).\n */\n@Component({\n  tag: \"z-tr\",\n  styleUrls: [\"styles.css\", \"../../css-components/z-table/styles.css\"],\n  shadow: true,\n})\nexport class ZTr implements ComponentInterface {\n  @Element() host: HTMLZTrElement;\n\n  /**\n   * Whether the row is expandable.\n   * Use a `z-td` as the last cell of the row for the additional content.\n   * It will show a button to expand/collapse the row.\n   * The last cell will be hidden until the button or row is clicked.\n   *\n   * If some element inside the expandable row contains the `prevent-expand` css class,\n   * the row will not expand by clicking that element.\n   */\n  @Prop({reflect: true})\n  expandable = false;\n\n  /**\n   * Whether the row is currently expanded.\n   */\n  @State()\n  expanded = false;\n\n  /**\n   * HTML Id of the expandable content.\n   * It is used to link the button to the content through the `aria-controls` attribute.\n   */\n  @State()\n  expandableContentId: string;\n\n  /** Row has been expanded */\n  @Event()\n  expand: EventEmitter;\n\n  @Watch(\"expandable\")\n  @Listen(\"colspanchange\")\n  protected updateColumns(): void {\n    const cells = Array.from(this.host.querySelectorAll<HTMLZTdElement | HTMLZThElement>(\"z-td, z-th\"));\n\n    if (this.expandable) {\n      const expandableContent = cells.pop();\n      expandableContent.id = expandableContent.id || `z-tr-expandable-content-${randomId()}`;\n      this.expandableContentId = expandableContent.id;\n    }\n\n    const columns = cells.map((cell) => cell.colspan || 1).reduce((a, b) => a + b, 0);\n    this.host.style.setProperty(\"--columns\", `${columns}`);\n  }\n\n  /**\n   * Handle click on row.\n   * Skip expansion if the click is on a element with `prevent-expand` css class.\n   */\n  private onRowClick(event: MouseEvent): void {\n    const preventExpand = (event.target as HTMLElement).closest(\".prevent-expand\");\n    if (!this.expandable || preventExpand) {\n      return;\n    }\n\n    this.expanded = !this.expanded;\n    this.expand.emit({expanded: this.expanded});\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    if (!this.expandable) {\n      return;\n    }\n\n    const active = document.activeElement;\n    if (active !== this.host) {\n      return;\n    }\n\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      this.expanded = !this.expanded;\n      this.expand.emit({expanded: this.expanded});\n    }\n  }\n\n  componentWillLoad(): void {\n    this.updateColumns();\n  }\n\n  render(): HTMLZTrElement {\n    return (\n      <Host\n        role=\"row\"\n        tabIndex={this.expandable ? 0 : undefined}\n        expanded={this.expanded}\n        onClick={this.onRowClick.bind(this)}\n        onKeyDown={this.onKeyDown.bind(this)}\n      >\n        <div\n          class=\"z-tr--focus-overlay\"\n          aria-hidden=\"true\"\n        ></div>\n        <div class=\"z-tr--expand-button-container\">\n          {this.expandable && (\n            <button\n              tabIndex={-1}\n              aria-expanded={this.expanded ? \"true\" : \"false\"}\n              aria-label={this.expanded ? \"Comprimi riga\" : \"Espandi riga\"}\n              aria-controls={this.expandableContentId}\n              type=\"button\"\n            >\n              <z-icon name={this.expanded ? \"minus-circled\" : \"plus-circled\"}></z-icon>\n            </button>\n          )}\n        </div>\n        <slot onSlotchange={this.updateColumns.bind(this)}></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/table/z-tr/styles.css

@@ -13,15 +13,6 @@
   box-sizing: border-box;
 }
 
-.z-tr--expand-button-container,
-::slotted(*) {
-  border-bottom: var(--z-table--cells-bottom-border-size, var(--border-size-small)) solid var(--color-surface03);
-}
-
-::slotted(*:not(:last-child)) {
-  border-right: var(--z-table--cell-left-border, none);
-}
-
 :host([expandable]) {
   --show-expandable-button: visible;
 
@@ -37,6 +28,7 @@
 }
 
 :host([expandable]) ::slotted(*:last-child) {
+  border-top: var(--border-size-small) solid var(--color-surface03);
   border-left: 0;
   grid-column: 1 / span calc(var(--columns) + 1);
   grid-row: 2;
@@ -53,19 +45,25 @@
 
 :host([expanded]) .z-tr--expand-button-container,
 :host([expanded]) ::slotted(*) {
+  border-left: 0 !important;
   background-color: var(--color-background);
 }
 
-:host(:hover):has([tabIndex]) ::slotted(z-td),
-:host(:hover):has([tabIndex]) ::slotted(z-th) {
+:host([tabIndex]:hover) ::slotted(z-td),
+:host([tabIndex]:hover) ::slotted(z-th),
+:host([tabIndex]:hover) .z-tr--expand-button-container {
+  background-color: var(--color-surface02);
+}
+
+:host([tabIndex]:hover) .z-tr--focus-overlay {
   border-top: var(--border-size-small) solid var(--color-surface04);
   border-bottom: var(--border-size-small) solid var(--color-surface04);
-  background-color: var(--color-surface02);
 }
 
 :host(:focus) {
   position: relative;
   z-index: 20;
+  border: none !important;
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }
@@ -98,12 +96,12 @@
 .z-tr--focus-overlay {
   position: absolute;
   z-index: 30;
-  right: 0;
+  top: calc(var(--border-size-small) * -1);
+  bottom: 0;
   left: 0;
   width: 100%;
-  border-radius: 4px;
+  height: calc(100% + (var(--border-size-small) * 2));
   box-shadow: none;
-  inset: 0;
   outline: none;
   pointer-events: none;
   transition: box-shadow 0.2s;

package/dist/collection/components/z-chip/index.js

@@ -1,20 +1,23 @@
 import { h } from "@stencil/core";
-import { ZChipType } from "../../beans";
+import { ZChipType, ZChipVariant } from "../../beans";
 export class ZChip {
     constructor() {
         /** z-chip size type, can be default, medium or small */
         this.type = ZChipType.DEFAULT;
+        /** z-chip variant type, can be outline, filled or soft */
+        this.variant = ZChipVariant.OUTLINE;
         /** set z-chip as disabled */
         this.disabled = false;
         /** z-chip aria-label string */
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: '7ff5bc2ca7ac9e73c3bb6e31a4795d8f275b0217', class: {
+        return (h("div", { key: '82e7b420794008dd46a89c207a6d72510a28d562', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: 'b96b42e01a624a43a0419e163b79512374540255', name: this.icon }), h("slot", { key: 'e613a251dccdedf4f2633361b5a22d6baf69173f' }), this.interactiveIcon && (h("button", { key: '4c8557d1a21c33a1e329f8f01dcd7aa1a2881096', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'a66b4a32af2c1a3283cdb80843b526ff375d34f7', class: "interactive-icon", name: this.interactiveIcon })))));
+                [this.variant]: true,
+            }, "aria-disabled": this.disabled ? "true" : undefined }, this.icon && h("z-icon", { key: 'c66f7b3473c3f7f2af628645e59a6b9a75eafa8a', name: this.icon }), h("slot", { key: 'a5fbe9ef849681546a521531f0a69ef29fc2bc63' }), this.interactiveIcon && (h("button", { key: 'f4adbbb6472e8a04498811dd0ffa077784cbcba6', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: '690dc0bed21c44a3d20628192b0cc99665d90b24', class: "interactive-icon", name: this.interactiveIcon })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -76,6 +79,33 @@ export class ZChip {
                 "attribute": "type",
                 "defaultValue": "ZChipType.DEFAULT"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ZChipVariant",
+                    "resolved": "ZChipVariant.FILLED | ZChipVariant.OUTLINE | ZChipVariant.SOFT",
+                    "references": {
+                        "ZChipVariant": {
+                            "location": "import",
+                            "path": "../../beans",
+                            "id": "src/beans/index.tsx::ZChipVariant",
+                            "referenceLocation": "ZChipVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "z-chip variant type, can be outline, filled or soft"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "ZChipVariant.OUTLINE"
+            },
             "interactiveIcon": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/z-chip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AAQtC,MAAM,OAAO,KAAK;IANlB;QAaE,wDAAwD;QAExD,SAAI,GAAe,SAAS,CAAC,OAAO,CAAC;QAMrC,6BAA6B;QAE7B,aAAQ,GAAa,KAAK,CAAC;QAE3B,+BAA+B;QAE/B,cAAS,GAAG,EAAE,CAAC;KAkChB;IA5BC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;aAClB,mBACc,IAAI,CAAC,QAAQ;YAE3B,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, 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 implements ComponentInterface {\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,"file":"index.js","sourceRoot":"","sources":["../../../src/components/z-chip/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AACnG,OAAO,EAAC,SAAS,EAAE,YAAY,EAAC,MAAM,aAAa,CAAC;AAQpD,MAAM,OAAO,KAAK;IANlB;QAaE,wDAAwD;QAExD,SAAI,GAAe,SAAS,CAAC,OAAO,CAAC;QAErC,0DAA0D;QAE1D,YAAO,GAAkB,YAAY,CAAC,OAAO,CAAC;QAM9C,6BAA6B;QAE7B,aAAQ,GAAa,KAAK,CAAC;QAE3B,+BAA+B;QAE/B,cAAS,GAAG,EAAE,CAAC;KAmChB;IA7BC,MAAM;QACJ,OAAO,CACL,4DACE,KAAK,EAAE;gBACL,kBAAkB,EAAE,IAAI;gBACxB,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,eAAe;gBAC5C,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;gBACjB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,IAAI;aACrB,mBACc,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAEhD,IAAI,CAAC,IAAI,IAAI,+DAAQ,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI;YACzC,8DAAQ;YACP,IAAI,CAAC,eAAe,IAAI,CACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,gBACnC,IAAI,CAAC,SAAS,EAC1B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBAEvB,+DACE,KAAK,EAAC,kBAAkB,EACxB,IAAI,EAAE,IAAI,CAAC,eAAe,GAC1B,CACK,CACV,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, ComponentInterface, Element, Event, EventEmitter, Prop, h} from \"@stencil/core\";\nimport {ZChipType, ZChipVariant} from \"../../beans\";\n\n@Component({\n  tag: \"z-chip\",\n  styleUrl: \"styles.css\",\n  shadow: false,\n  scoped: true,\n})\nexport class ZChip implements ComponentInterface {\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 variant type, can be outline, filled or soft */\n  @Prop({reflect: true})\n  variant?: ZChipVariant = ZChipVariant.OUTLINE;\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          [this.variant]: true,\n        }}\n        aria-disabled={this.disabled ? \"true\" : undefined}\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"]}

package/dist/collection/components/z-chip/styles.css

@@ -1,45 +1,100 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}
+
 :host > .z-chip-container {
   display: inline-flex;
   min-height: 28px;
   align-items: center;
-  padding: 0 calc(var(--space-unit) * 1.5);
+  padding: 0 calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--color-surface03);
   background-color: var(--color-surface01);
   border-radius: 14px;
-  color: var(--color-default-text);
+  color: var(--color-primary01);
   fill: var(--color-default-icon);
   font-family: var(--font-family-sans);
   font-size: 14px;
-  line-height: 28px;
-}
-
-:host > .z-chip-interactive {
   font-weight: var(--font-sb);
+  gap: var(--space-unit);
+  line-height: 1;
 }
 
 :host > .z-chip-container > button {
+  position: relative;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
   padding: 0;
   border: none;
-  margin-left: var(--space-unit);
   background-color: transparent;
+  border-radius: 50%;
   cursor: pointer;
 }
 
-:host > .z-chip-container > z-icon:first-child {
-  margin-right: calc(var(--space-unit) / 2);
-}
-
 :host > .z-chip-container .interactive-icon {
-  fill: var(--color-primary01-icon);
+  fill: var(--color-primary01);
 }
 
-:host > .z-chip-container:not([aria-disabled]) .interactive-icon:hover {
+:host > .z-chip-container:not([aria-disabled]) button:hover .interactive-icon {
   color: var(--color-hover-primary);
   fill: var(--color-hover-primary);
 }
 
+/* Variants */
+:host > .z-chip-container.filled {
+  border-color: transparent;
+  background-color: var(--color-primary01);
+  color: var(--color-text-inverse);
+  fill: var(--color-inverse-icon);
+}
+
+:host > .z-chip-container.filled .interactive-icon {
+  fill: var(--color-inverse-icon);
+}
+
+:host > .z-chip-container.filled:not([aria-disabled]) button::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-inverse-icon);
+  border-radius: 50%;
+  content: "";
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+
+:host > .z-chip-container.filled:not([aria-disabled]) button:hover::before {
+  opacity: 0.16;
+}
+
+:host > .z-chip-container.filled:not([aria-disabled]) button:hover .interactive-icon {
+  color: var(--color-inverse-icon);
+  fill: var(--color-inverse-icon);
+}
+
+:host > .z-chip-container.soft {
+  border-color: transparent;
+  background-color: var(--color-primary02);
+  color: var(--color-default-text);
+}
+
+:host > .z-chip-container.soft .interactive-icon {
+  fill: var(--color-primary01);
+}
+
+/* Disabled state */
 :host > .z-chip-container[aria-disabled],
-:host > .z-chip-container[aria-disabled] z-icon {
+:host > .z-chip-container[aria-disabled] .interactive-icon {
   color: var(--color-disabled03);
   cursor: auto;
   fill: var(--color-disabled03);
@@ -47,6 +102,13 @@
 
 :host > .z-chip-container[aria-disabled] {
   border: var(--border-size-small) solid var(--color-disabled01);
+  background-color: transparent;
+}
+
+:host > .z-chip-container.filled[aria-disabled],
+:host > .z-chip-container.soft[aria-disabled] {
+  border-color: transparent;
+  background-color: var(--color-disabled01);
 }
 
 :host > .z-chip-container > button:focus:focus-visible {
@@ -55,11 +117,6 @@
   outline: none;
 }
 
-:host > button:not([disabled]):active:hover .interactive-icon {
-  color: var(--color-primary01);
-  fill: var(--color-primary01-icon);
-}
-
 :host > .z-chip-container > z-icon,
 :host > .z-chip-container .interactive-icon {
   --z-icon-width: 22px;
@@ -70,44 +127,40 @@
 :host > .z-chip-container.default {
   min-height: 44px;
   border-radius: 22px;
-  line-height: 44px;
 }
 
 :host > .z-chip-container.medium {
   min-height: 40px;
   border-radius: 22px;
-  line-height: 40px;
 }
 
 :host > .z-chip-container.small {
   min-height: 36px;
   border-radius: 22px;
-  line-height: 36px;
 }
 
 /* Desktop breakpoint */
 @media (min-width: 1152px) {
   :host > .z-chip-container {
+    padding: 0 calc(var(--space-unit) * 1.5);
     font-size: 12px;
+    gap: calc(var(--space-unit) / 2);
   }
 
   /* :host type */
   :host > .z-chip-container.default {
     min-height: 32px;
     border-radius: 16px;
-    line-height: 32px;
   }
 
   :host > .z-chip-container.medium {
     min-height: 28px;
     border-radius: 16px;
-    line-height: 28px;
   }
 
   :host > .z-chip-container.small {
     min-height: 24px;
     border-radius: 16px;
-    line-height: 24px;
   }
 
   :host > .z-chip-container > z-icon,
@@ -115,4 +168,9 @@
     --z-icon-width: 14px;
     --z-icon-height: 14px;
   }
+
+  :host > .z-chip-container > button {
+    width: 20px;
+    height: 20px;
+  }
 }

package/dist/collection/components/z-searchbar/styles.css

@@ -173,6 +173,7 @@
 
 .results .item-no-results {
   display: block;
+  padding: calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5);
   font-style: italic;
 }
 

package/dist/components/index.js

@@ -1,2 +1,2 @@
-export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{c as ee}from"./utils.js";export{$ as AccordionVariant,o as AlertType,A as AvatarSize,_ as BookCardDeprecatedVariant,Y as BookCardVariant,W as BreadcrumbHomepageVariant,V as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,R as CarouselArrowsPosition,U as CarouselProgressMode,a1 as ColorPickerPalette,e as ControlSize,Q as CoverHeroContentPosition,M as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,a0 as IconPosition,J as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,v as OffCanvasVariant,O as Orientation,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,X as VisibilityCondition,t as ZAriaAlertMode,x as ZChipType,z as ZDatePickerMode,F as ZDatePickerModeValue,G as ZDatePickerPosition,w as ZFileUploadType,H as ZRangePickerMode,y as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./index2.js";export{I as ICONS}from"./iconset.js";export{ZAccordion,defineCustomElement as defineCustomElementZAccordion}from"./z-accordion.js";export{ZAlert,defineCustomElement as defineCustomElementZAlert}from"./z-alert.js";export{ZAnchorNavigation,defineCustomElement as defineCustomElementZAnchorNavigation}from"./z-anchor-navigation.js";export{ZAppHeader,defineCustomElement as defineCustomElementZAppHeader}from"./z-app-header.js";export{ZAppHeaderDeprecated,defineCustomElement as defineCustomElementZAppHeaderDeprecated}from"./z-app-header-deprecated.js";export{ZAriaAlert,defineCustomElement as defineCustomElementZAriaAlert}from"./z-aria-alert.js";export{ZAvatar,defineCustomElement as defineCustomElementZAvatar}from"./z-avatar.js";export{ZBookCard,defineCustomElement as defineCustomElementZBookCard}from"./z-book-card.js";export{ZBookCardApp,defineCustomElement as defineCustomElementZBookCardApp}from"./z-book-card-app.js";export{ZBookCardDeprecated,defineCustomElement as defineCustomElementZBookCardDeprecated}from"./z-book-card-deprecated.js";export{ZBookCover,defineCustomElement as defineCustomElementZBookCover}from"./z-book-cover.js";export{ZBreadcrumb,defineCustomElement as defineCustomElementZBreadcrumb}from"./z-breadcrumb.js";export{ZButton,defineCustomElement as defineCustomElementZButton}from"./z-button.js";export{ZButtonSort,defineCustomElement as defineCustomElementZButtonSort}from"./z-button-sort.js";export{ZCard,defineCustomElement as defineCustomElementZCard}from"./z-card.js";export{ZCarousel,defineCustomElement as defineCustomElementZCarousel}from"./z-carousel.js";export{ZChip,defineCustomElement as defineCustomElementZChip}from"./z-chip.js";export{ZColorPicker,defineCustomElement as defineCustomElementZColorPicker}from"./z-color-picker.js";export{ZCombobox,defineCustomElement as defineCustomElementZCombobox}from"./z-combobox.js";export{ZCoverHero,defineCustomElement as defineCustomElementZCoverHero}from"./z-cover-hero.js";export{ZDatePicker,defineCustomElement as defineCustomElementZDatePicker}from"./z-date-picker.js";export{ZDivider,defineCustomElement as defineCustomElementZDivider}from"./z-divider.js";export{ZDragdropArea,defineCustomElement as defineCustomElementZDragdropArea}from"./z-dragdrop-area.js";export{ZFile,defineCustomElement as defineCustomElementZFile}from"./z-file.js";export{ZFileUpload,defineCustomElement as defineCustomElementZFileUpload}from"./z-file-upload.js";export{ZGhostLoading,defineCustomElement as defineCustomElementZGhostLoading}from"./z-ghost-loading.js";export{ZIcon,defineCustomElement as defineCustomElementZIcon}from"./z-icon.js";export{ZInfoBox,defineCustomElement as defineCustomElementZInfoBox}from"./z-info-box.js";export{ZInfoReveal,defineCustomElement as defineCustomElementZInfoReveal}from"./z-info-reveal.js";export{ZInput,defineCustomElement as defineCustomElementZInput}from"./z-input.js";export{ZInputMessage,defineCustomElement as defineCustomElementZInputMessage}from"./z-input-message.js";export{ZInputRange,defineCustomElement as defineCustomElementZInputRange}from"./z-input-range.js";export{ZList,defineCustomElement as defineCustomElementZList}from"./z-list.js";export{ZListElement,defineCustomElement as defineCustomElementZListElement}from"./z-list-element.js";export{ZListGroup,defineCustomElement as defineCustomElementZListGroup}from"./z-list-group.js";export{ZLogo,defineCustomElement as defineCustomElementZLogo}from"./z-logo.js";export{ZMenu,defineCustomElement as defineCustomElementZMenu}from"./z-menu.js";export{ZMenuDeprecated,defineCustomElement as defineCustomElementZMenuDeprecated}from"./z-menu-deprecated.js";export{ZMenuSection,defineCustomElement as defineCustomElementZMenuSection}from"./z-menu-section.js";export{ZMenuSectionDeprecated,defineCustomElement as defineCustomElementZMenuSectionDeprecated}from"./z-menu-section-deprecated.js";export{ZModal,defineCustomElement as defineCustomElementZModal}from"./z-modal.js";export{ZMyzCard,defineCustomElement as defineCustomElementZMyzCard}from"./z-myz-card.js";export{ZMyzCardAlert,defineCustomElement as defineCustomElementZMyzCardAlert}from"./z-myz-card-alert.js";export{ZMyzCardBody,defineCustomElement as defineCustomElementZMyzCardBody}from"./z-myz-card-body.js";export{ZMyzCardCover,defineCustomElement as defineCustomElementZMyzCardCover}from"./z-myz-card-cover.js";export{ZMyzCardDictionary,defineCustomElement as defineCustomElementZMyzCardDictionary}from"./z-myz-card-dictionary.js";export{ZMyzCardFooter,defineCustomElement as defineCustomElementZMyzCardFooter}from"./z-myz-card-footer.js";export{ZMyzCardFooterSections,defineCustomElement as defineCustomElementZMyzCardFooterSections}from"./z-myz-card-footer-sections.js";export{ZMyzCardHeader,defineCustomElement as defineCustomElementZMyzCardHeader}from"./z-myz-card-header.js";export{ZMyzCardIcon,defineCustomElement as defineCustomElementZMyzCardIcon}from"./z-myz-card-icon.js";export{ZMyzCardInfo,defineCustomElement as defineCustomElementZMyzCardInfo}from"./z-myz-card-info.js";export{ZMyzCardList,defineCustomElement as defineCustomElementZMyzCardList}from"./z-myz-card-list.js";export{ZMyzList,defineCustomElement as defineCustomElementZMyzList}from"./z-myz-list.js";export{ZMyzListItem,defineCustomElement as defineCustomElementZMyzListItem}from"./z-myz-list-item.js";export{ZNavigationTabs,defineCustomElement as defineCustomElementZNavigationTabs}from"./z-navigation-tabs.js";export{ZNotification,defineCustomElement as defineCustomElementZNotification}from"./z-notification.js";export{ZOffcanvas,defineCustomElement as defineCustomElementZOffcanvas}from"./z-offcanvas.js";export{ZOtp,defineCustomElement as defineCustomElementZOtp}from"./z-otp.js";export{ZPagination,defineCustomElement as defineCustomElementZPagination}from"./z-pagination.js";export{ZPanelElem,defineCustomElement as defineCustomElementZPanelElem}from"./z-panel-elem.js";export{ZPopover,defineCustomElement as defineCustomElementZPopover}from"./z-popover.js";export{ZRangePicker,defineCustomElement as defineCustomElementZRangePicker}from"./z-range-picker.js";export{ZResultCard,defineCustomElement as defineCustomElementZResultCard}from"./z-result-card.js";export{ZSearchbar,defineCustomElement as defineCustomElementZSearchbar}from"./z-searchbar.js";export{ZSectionTitle,defineCustomElement as defineCustomElementZSectionTitle}from"./z-section-title.js";export{ZSelect,defineCustomElement as defineCustomElementZSelect}from"./z-select.js";export{ZSkipToContent,defineCustomElement as defineCustomElementZSkipToContent}from"./z-skip-to-content.js";export{ZSlideshow,defineCustomElement as defineCustomElementZSlideshow}from"./z-slideshow.js";export{ZStepper,defineCustomElement as defineCustomElementZStepper}from"./z-stepper.js";export{ZStepperItem,defineCustomElement as defineCustomElementZStepperItem}from"./z-stepper-item.js";export{ZTable,defineCustomElement as defineCustomElementZTable}from"./z-table.js";export{ZTag,defineCustomElement as defineCustomElementZTag}from"./z-tag.js";export{ZTbody,defineCustomElement as defineCustomElementZTbody}from"./z-tbody.js";export{ZTd,defineCustomElement as defineCustomElementZTd}from"./z-td.js";export{ZTfoot,defineCustomElement as defineCustomElementZTfoot}from"./z-tfoot.js";export{ZTh,defineCustomElement as defineCustomElementZTh}from"./z-th.js";export{ZThead,defineCustomElement as defineCustomElementZThead}from"./z-thead.js";export{ZToastNotification,defineCustomElement as defineCustomElementZToastNotification}from"./z-toast-notification.js";export{ZToastNotificationList,defineCustomElement as defineCustomElementZToastNotificationList}from"./z-toast-notification-list.js";export{ZToggleButton,defineCustomElement as defineCustomElementZToggleButton}from"./z-toggle-button.js";export{ZToggleSwitch,defineCustomElement as defineCustomElementZToggleSwitch}from"./z-toggle-switch.js";export{ZTool,defineCustomElement as defineCustomElementZTool}from"./z-tool.js";export{ZToolbar,defineCustomElement as defineCustomElementZToolbar}from"./z-toolbar.js";export{ZTooltip,defineCustomElement as defineCustomElementZTooltip}from"./z-tooltip.js";export{ZTr,defineCustomElement as defineCustomElementZTr}from"./z-tr.js";export{ZTreeList,defineCustomElement as defineCustomElementZTreeList}from"./z-tree-list.js";export{ZVisuallyHidden,defineCustomElement as defineCustomElementZVisuallyHidden}from"./z-visually-hidden.js";const te={colorFromId:ee};export{te as Utils};
+export{getAssetPath,render,setAssetPath,setNonce,setPlatformOptions}from"@stencil/core/internal/client";import{c as ee}from"./utils.js";export{a0 as AccordionVariant,o as AlertType,A as AvatarSize,$ as BookCardDeprecatedVariant,_ as BookCardVariant,X as BreadcrumbHomepageVariant,W as BreadcrumbPathStyle,d as ButtonSize,c as ButtonType,B as ButtonVariant,C as CardVariant,U as CarouselArrowsPosition,V as CarouselProgressMode,a2 as ColorPickerPalette,e as ControlSize,R as CoverHeroContentPosition,Q as CoverHeroVariant,p as Device,h as DividerOrientation,D as DividerSize,j as ExpandableListButtonAlign,E as ExpandableListStyle,a1 as IconPosition,M as InfoRevealPosition,f as InputStatus,I as InputType,g as KeyboardCode,K as KeyboardKeyCode,k as LabelPosition,L as LicenseType,l as ListDividerType,i as ListSize,m as ListType,b as NavigationTabsKeyboardEvents,N as NavigationTabsOrientation,a as NavigationTabsSize,n as NotificationType,v as OffCanvasVariant,O as Orientation,P as PopoverPosition,S as SortDirection,T as ThemeVariant,q as ToastNotification,s as ToastNotificationPosition,r as ToastNotificationTransition,u as TransitionDirection,Y as VisibilityCondition,t as ZAriaAlertMode,x as ZChipType,y as ZChipVariant,F as ZDatePickerMode,G as ZDatePickerModeValue,H as ZDatePickerPosition,w as ZFileUploadType,J as ZRangePickerMode,z as ZSectionTitleDividerPosition,Z as ZTableRowExpandedType}from"./index2.js";export{I as ICONS}from"./iconset.js";export{ZAccordion,defineCustomElement as defineCustomElementZAccordion}from"./z-accordion.js";export{ZAlert,defineCustomElement as defineCustomElementZAlert}from"./z-alert.js";export{ZAnchorNavigation,defineCustomElement as defineCustomElementZAnchorNavigation}from"./z-anchor-navigation.js";export{ZAppHeader,defineCustomElement as defineCustomElementZAppHeader}from"./z-app-header.js";export{ZAppHeaderDeprecated,defineCustomElement as defineCustomElementZAppHeaderDeprecated}from"./z-app-header-deprecated.js";export{ZAriaAlert,defineCustomElement as defineCustomElementZAriaAlert}from"./z-aria-alert.js";export{ZAvatar,defineCustomElement as defineCustomElementZAvatar}from"./z-avatar.js";export{ZBookCard,defineCustomElement as defineCustomElementZBookCard}from"./z-book-card.js";export{ZBookCardApp,defineCustomElement as defineCustomElementZBookCardApp}from"./z-book-card-app.js";export{ZBookCardDeprecated,defineCustomElement as defineCustomElementZBookCardDeprecated}from"./z-book-card-deprecated.js";export{ZBookCover,defineCustomElement as defineCustomElementZBookCover}from"./z-book-cover.js";export{ZBreadcrumb,defineCustomElement as defineCustomElementZBreadcrumb}from"./z-breadcrumb.js";export{ZButton,defineCustomElement as defineCustomElementZButton}from"./z-button.js";export{ZButtonSort,defineCustomElement as defineCustomElementZButtonSort}from"./z-button-sort.js";export{ZCard,defineCustomElement as defineCustomElementZCard}from"./z-card.js";export{ZCarousel,defineCustomElement as defineCustomElementZCarousel}from"./z-carousel.js";export{ZChip,defineCustomElement as defineCustomElementZChip}from"./z-chip.js";export{ZColorPicker,defineCustomElement as defineCustomElementZColorPicker}from"./z-color-picker.js";export{ZCombobox,defineCustomElement as defineCustomElementZCombobox}from"./z-combobox.js";export{ZCoverHero,defineCustomElement as defineCustomElementZCoverHero}from"./z-cover-hero.js";export{ZDatePicker,defineCustomElement as defineCustomElementZDatePicker}from"./z-date-picker.js";export{ZDivider,defineCustomElement as defineCustomElementZDivider}from"./z-divider.js";export{ZDragdropArea,defineCustomElement as defineCustomElementZDragdropArea}from"./z-dragdrop-area.js";export{ZFile,defineCustomElement as defineCustomElementZFile}from"./z-file.js";export{ZFileUpload,defineCustomElement as defineCustomElementZFileUpload}from"./z-file-upload.js";export{ZGhostLoading,defineCustomElement as defineCustomElementZGhostLoading}from"./z-ghost-loading.js";export{ZIcon,defineCustomElement as defineCustomElementZIcon}from"./z-icon.js";export{ZInfoBox,defineCustomElement as defineCustomElementZInfoBox}from"./z-info-box.js";export{ZInfoReveal,defineCustomElement as defineCustomElementZInfoReveal}from"./z-info-reveal.js";export{ZInput,defineCustomElement as defineCustomElementZInput}from"./z-input.js";export{ZInputMessage,defineCustomElement as defineCustomElementZInputMessage}from"./z-input-message.js";export{ZInputRange,defineCustomElement as defineCustomElementZInputRange}from"./z-input-range.js";export{ZList,defineCustomElement as defineCustomElementZList}from"./z-list.js";export{ZListElement,defineCustomElement as defineCustomElementZListElement}from"./z-list-element.js";export{ZListGroup,defineCustomElement as defineCustomElementZListGroup}from"./z-list-group.js";export{ZLogo,defineCustomElement as defineCustomElementZLogo}from"./z-logo.js";export{ZMenu,defineCustomElement as defineCustomElementZMenu}from"./z-menu.js";export{ZMenuDeprecated,defineCustomElement as defineCustomElementZMenuDeprecated}from"./z-menu-deprecated.js";export{ZMenuSection,defineCustomElement as defineCustomElementZMenuSection}from"./z-menu-section.js";export{ZMenuSectionDeprecated,defineCustomElement as defineCustomElementZMenuSectionDeprecated}from"./z-menu-section-deprecated.js";export{ZModal,defineCustomElement as defineCustomElementZModal}from"./z-modal.js";export{ZMyzCard,defineCustomElement as defineCustomElementZMyzCard}from"./z-myz-card.js";export{ZMyzCardAlert,defineCustomElement as defineCustomElementZMyzCardAlert}from"./z-myz-card-alert.js";export{ZMyzCardBody,defineCustomElement as defineCustomElementZMyzCardBody}from"./z-myz-card-body.js";export{ZMyzCardCover,defineCustomElement as defineCustomElementZMyzCardCover}from"./z-myz-card-cover.js";export{ZMyzCardDictionary,defineCustomElement as defineCustomElementZMyzCardDictionary}from"./z-myz-card-dictionary.js";export{ZMyzCardFooter,defineCustomElement as defineCustomElementZMyzCardFooter}from"./z-myz-card-footer.js";export{ZMyzCardFooterSections,defineCustomElement as defineCustomElementZMyzCardFooterSections}from"./z-myz-card-footer-sections.js";export{ZMyzCardHeader,defineCustomElement as defineCustomElementZMyzCardHeader}from"./z-myz-card-header.js";export{ZMyzCardIcon,defineCustomElement as defineCustomElementZMyzCardIcon}from"./z-myz-card-icon.js";export{ZMyzCardInfo,defineCustomElement as defineCustomElementZMyzCardInfo}from"./z-myz-card-info.js";export{ZMyzCardList,defineCustomElement as defineCustomElementZMyzCardList}from"./z-myz-card-list.js";export{ZMyzList,defineCustomElement as defineCustomElementZMyzList}from"./z-myz-list.js";export{ZMyzListItem,defineCustomElement as defineCustomElementZMyzListItem}from"./z-myz-list-item.js";export{ZNavigationTabs,defineCustomElement as defineCustomElementZNavigationTabs}from"./z-navigation-tabs.js";export{ZNotification,defineCustomElement as defineCustomElementZNotification}from"./z-notification.js";export{ZOffcanvas,defineCustomElement as defineCustomElementZOffcanvas}from"./z-offcanvas.js";export{ZOtp,defineCustomElement as defineCustomElementZOtp}from"./z-otp.js";export{ZPagination,defineCustomElement as defineCustomElementZPagination}from"./z-pagination.js";export{ZPanelElem,defineCustomElement as defineCustomElementZPanelElem}from"./z-panel-elem.js";export{ZPopover,defineCustomElement as defineCustomElementZPopover}from"./z-popover.js";export{ZRangePicker,defineCustomElement as defineCustomElementZRangePicker}from"./z-range-picker.js";export{ZResultCard,defineCustomElement as defineCustomElementZResultCard}from"./z-result-card.js";export{ZSearchbar,defineCustomElement as defineCustomElementZSearchbar}from"./z-searchbar.js";export{ZSectionTitle,defineCustomElement as defineCustomElementZSectionTitle}from"./z-section-title.js";export{ZSelect,defineCustomElement as defineCustomElementZSelect}from"./z-select.js";export{ZSkipToContent,defineCustomElement as defineCustomElementZSkipToContent}from"./z-skip-to-content.js";export{ZSlideshow,defineCustomElement as defineCustomElementZSlideshow}from"./z-slideshow.js";export{ZStepper,defineCustomElement as defineCustomElementZStepper}from"./z-stepper.js";export{ZStepperItem,defineCustomElement as defineCustomElementZStepperItem}from"./z-stepper-item.js";export{ZTable,defineCustomElement as defineCustomElementZTable}from"./z-table.js";export{ZTag,defineCustomElement as defineCustomElementZTag}from"./z-tag.js";export{ZTbody,defineCustomElement as defineCustomElementZTbody}from"./z-tbody.js";export{ZTd,defineCustomElement as defineCustomElementZTd}from"./z-td.js";export{ZTfoot,defineCustomElement as defineCustomElementZTfoot}from"./z-tfoot.js";export{ZTh,defineCustomElement as defineCustomElementZTh}from"./z-th.js";export{ZThead,defineCustomElement as defineCustomElementZThead}from"./z-thead.js";export{ZToastNotification,defineCustomElement as defineCustomElementZToastNotification}from"./z-toast-notification.js";export{ZToastNotificationList,defineCustomElement as defineCustomElementZToastNotificationList}from"./z-toast-notification-list.js";export{ZToggleButton,defineCustomElement as defineCustomElementZToggleButton}from"./z-toggle-button.js";export{ZToggleSwitch,defineCustomElement as defineCustomElementZToggleSwitch}from"./z-toggle-switch.js";export{ZTool,defineCustomElement as defineCustomElementZTool}from"./z-tool.js";export{ZToolbar,defineCustomElement as defineCustomElementZToolbar}from"./z-toolbar.js";export{ZTooltip,defineCustomElement as defineCustomElementZTooltip}from"./z-tooltip.js";export{ZTr,defineCustomElement as defineCustomElementZTr}from"./z-tr.js";export{ZTreeList,defineCustomElement as defineCustomElementZTreeList}from"./z-tree-list.js";export{ZVisuallyHidden,defineCustomElement as defineCustomElementZVisuallyHidden}from"./z-visually-hidden.js";const te={colorFromId:ee};export{te as Utils};
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["UTILS","colorFromId"],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {ICONS, IconName} from \"./constants/iconset\";\nexport {UTILS as Utils};\n"],"mappings":"qjTAEA,MAAMA,GAAQ,CACZC,uB","ignoreList":[]}
+{"version":3,"names":["UTILS","colorFromId"],"sources":["src/index.ts"],"sourcesContent":["import {colorFromId} from \"./utils/utils\";\n\nconst UTILS = {\n  colorFromId,\n};\n\nexport * from \"./beans\";\nexport * from \"./components\";\nexport {ICONS, IconName} from \"./constants/iconset\";\nexport {UTILS as Utils};\n"],"mappings":"wkTAEA,MAAMA,GAAQ,CACZC,uB","ignoreList":[]}