@zanichelli/albe-web-components 19.3.0-RC4 → 19.3.0-RC5

package/dist/collection/components/z-color-picker/index.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, } from "@stencil/core";
 import { ColorPickerPalette } from "../../beans";
 import { containsElement } from "../../utils/utils";
 const LOCALES = {
@@ -21,15 +21,20 @@ const COLOR_GROUPS = 9;
  */
 export class ZColorPicker {
     constructor() {
+        /**
+         * The language for the aria labels inside the color picker.
+         */
+        this.lng = "it";
+        /**
+         * Disables the transparent color option.
+         * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` ("dark gray 2").
+         */
+        this.disableTransparent = false;
         /**
          * The color keys arranged in row-major order for rendering and navigation.
          */
         this.colorKeysByRow = [];
         this._colorButtons = [];
-        this.selectedColor = undefined;
-        this.lng = "it";
-        this.htmlAriaLabel = undefined;
-        this.disableTransparent = false;
     }
     get colorButtons() {
         if (!this._colorButtons.length) {
@@ -187,7 +192,7 @@ export class ZColorPicker {
         this.colorKeysByRow = this.sortColorKeysByRow();
     }
     render() {
-        return (h(Host, { key: '4fabea9e988ceec44c05e5885aa4ad0eb0ad5076', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
+        return (h(Host, { key: 'c834820884acc8c3bdf4571379cbe6da74e7ea89', role: "listbox", "aria-label": this.htmlAriaLabel || LOCALES[this.lng]["Select a color"], tabIndex: 0 }, this.colorKeysByRow.map((colorKey) => {
             var _a;
             return (h("button", { class: "color-swatch", "data-color": colorKey, role: "option", "aria-selected": ((_a = this.selectedColor) === null || _a === void 0 ? void 0 : _a.toUpperCase()) === colorKey.toUpperCase() ? "true" : "false", tabIndex: -1, onClick: () => (this.selectedColor = colorKey), disabled: this.disableTransparent && colorKey === "#FFFFFF00" }, h("div", { class: "color-swatch", role: "img", "aria-roledescription": LOCALES[this.lng]["Color swatch"], "aria-label": ColorPickerPalette[colorKey][this.lng], title: ColorPickerPalette[colorKey][this.lng], style: { backgroundColor: colorKey } })));
         })));
@@ -211,12 +216,13 @@ export class ZColorPicker {
                 "mutable": true,
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
+                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette",
+                            "referenceLocation": "ColorPickerPalette"
                         }
                     }
                 },
@@ -226,8 +232,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The selected color to highlight."
                 },
-                "attribute": "selected-color",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-color"
             },
             "lng": {
                 "type": "string",
@@ -243,8 +251,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The language for the aria labels inside the color picker."
                 },
-                "attribute": "lng",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "lng",
                 "defaultValue": "\"it\""
             },
             "htmlAriaLabel": {
@@ -261,8 +271,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "The aria-label for the color picker, e.g. \"Select a background color for the label\"."
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             },
             "disableTransparent": {
                 "type": "boolean",
@@ -278,8 +290,10 @@ export class ZColorPicker {
                     "tags": [],
                     "text": "Disables the transparent color option.\nSetting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\")."
                 },
-                "attribute": "disable-transparent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disable-transparent",
                 "defaultValue": "false"
             }
         };
@@ -297,12 +311,13 @@ export class ZColorPicker {
                 },
                 "complexType": {
                     "original": "ColorPickerPalette",
-                    "resolved": "\"#FFFFFF00\" | \"#FFFFFF\" | \"#CCCCCC\" | \"#7E7E7E\" | \"#333333\" | \"#FFCCCC\" | \"#FF9999\" | \"#FF3333\" | \"#CC0000\" | \"#660000\" | \"#FFE1CC\" | \"#FFC399\" | \"#FF8933\" | \"#CC5500\" | \"#662B00\" | \"#FFF7CC\" | \"#FFEE99\" | \"#FFDD33\" | \"#CCAA00\" | \"#665600\" | \"#DDFFCC\" | \"#BBFF99\" | \"#77FF33\" | \"#44CC00\" | \"#226600\" | \"#CCFFE5\" | \"#99FFCC\" | \"#33FF99\" | \"#00CC66\" | \"#006633\" | \"#CCEEFF\" | \"#99DDFF\" | \"#33BBFF\" | \"#0088CC\" | \"#004466\" | \"#D4CCFF\" | \"#AA99FF\" | \"#5533FF\" | \"#2200CC\" | \"#110066\" | \"#FFCCFF\" | \"#FF99FF\" | \"#FF33FF\" | \"#CC00CC\" | \"#660066\"",
+                    "resolved": "\"#004466\" | \"#006633\" | \"#0088CC\" | \"#00CC66\" | \"#110066\" | \"#2200CC\" | \"#226600\" | \"#333333\" | \"#33BBFF\" | \"#33FF99\" | \"#44CC00\" | \"#5533FF\" | \"#660000\" | \"#660066\" | \"#662B00\" | \"#665600\" | \"#77FF33\" | \"#7E7E7E\" | \"#99DDFF\" | \"#99FFCC\" | \"#AA99FF\" | \"#BBFF99\" | \"#CC0000\" | \"#CC00CC\" | \"#CC5500\" | \"#CCAA00\" | \"#CCCCCC\" | \"#CCEEFF\" | \"#CCFFE5\" | \"#D4CCFF\" | \"#DDFFCC\" | \"#FF3333\" | \"#FF33FF\" | \"#FF8933\" | \"#FF9999\" | \"#FF99FF\" | \"#FFC399\" | \"#FFCCCC\" | \"#FFCCFF\" | \"#FFDD33\" | \"#FFE1CC\" | \"#FFEE99\" | \"#FFF7CC\" | \"#FFFFFF\" | \"#FFFFFF00\"",
                     "references": {
                         "ColorPickerPalette": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ColorPickerPalette"
+                            "id": "src/beans/index.tsx::ColorPickerPalette",
+                            "referenceLocation": "ColorPickerPalette"
                         }
                     }
                 }
@@ -364,4 +379,3 @@ export class ZColorPicker {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-color-picker/index.stories.js

@@ -31,4 +31,3 @@ export const Default = {
       .disableTransparent=${args.disableTransparent}
     ></z-color-picker>`,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -14,30 +14,32 @@ export class ZCombobox {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
     }
     constructor() {
-        this.itemsList = [];
-        this.inputType = InputType.TEXT;
+        /** input unique id */
         this.inputid = `combo-${randomId()}`;
-        this.items = undefined;
-        this.label = undefined;
+        /** the combobox is disabled */
         this.disabled = false;
+        /** show search input flag (optional) */
         this.hassearch = false;
-        this.searchlabel = undefined;
-        this.searchplaceholder = undefined;
-        this.searchtitle = undefined;
+        /** no result text message */
         this.noresultslabel = "Nessun risultato";
+        /** toggle combo list opening flag */
         this.isopen = false;
+        /** fixed style flag */
         this.isfixed = false;
+        /** show "check all" checkbox (optional) */
         this.hascheckall = false;
+        /** check all label (optional) */
         this.checkalltext = "Seleziona tutti";
+        /** uncheck all label (optional) */
         this.uncheckalltext = "Deseleziona tutti";
+        /** max number of checkable items (0 = unlimited) */
         this.maxcheckableitems = 0;
-        this.hasgroupitems = undefined;
+        /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
         this.size = ControlSize.BIG;
-        this.htmlAriaLabel = undefined;
-        this.searchValue = undefined;
-        this.selectedCounter = undefined;
-        this.renderItemsList = [];
+        this.renderItemsList = []; // used for render only
         this.focusedItemId = "";
+        this.itemsList = [];
+        this.inputType = InputType.TEXT;
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -292,7 +294,7 @@ export class ZCombobox {
         return (h("z-list-element", { class: "check-all-wrapper", role: "presentation", htmlTabindex: -1, dividerType: ListDividerType.ELEMENT, dividerColor: "gray800", size: this.getControlToListSize(), disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => this.checkOption(optionId) }, h("z-icon", { name: allChecked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": allChecked ? "true" : "false" }, allChecked ? this.uncheckalltext : this.checkalltext))));
     }
     render() {
-        return (h("div", { key: 'be5d307e5bac4a0d67600c57dfbf47d471bc1ebd', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+        return (h("div", { key: 'f65a92eded2c6cd7d4bb42ddc5f667806a4f5582', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     static get is() { return "z-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -322,8 +324,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "input unique id"
                 },
-                "attribute": "inputid",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "inputid",
                 "defaultValue": "`combo-${randomId()}`"
             },
             "items": {
@@ -336,7 +340,8 @@ export class ZCombobox {
                         "ComboItem": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ComboItem"
+                            "id": "src/beans/index.tsx::ComboItem",
+                            "referenceLocation": "ComboItem"
                         }
                     }
                 },
@@ -346,8 +351,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "list items array"
                 },
-                "attribute": "items",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "items"
             },
             "label": {
                 "type": "string",
@@ -363,8 +370,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "label text"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "disabled": {
                 "type": "boolean",
@@ -380,8 +389,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox is disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "hassearch": {
@@ -398,8 +409,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show search input flag (optional)"
                 },
-                "attribute": "hassearch",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hassearch",
                 "defaultValue": "false"
             },
             "searchlabel": {
@@ -416,8 +429,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input label text (optional)"
                 },
-                "attribute": "searchlabel",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchlabel"
             },
             "searchplaceholder": {
                 "type": "string",
@@ -433,8 +448,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input placeholder text (optional)"
                 },
-                "attribute": "searchplaceholder",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchplaceholder"
             },
             "searchtitle": {
                 "type": "string",
@@ -450,8 +467,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "search input title text (optional)"
                 },
-                "attribute": "searchtitle",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchtitle"
             },
             "noresultslabel": {
                 "type": "string",
@@ -467,8 +486,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "no result text message"
                 },
-                "attribute": "noresultslabel",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "noresultslabel",
                 "defaultValue": "\"Nessun risultato\""
             },
             "isopen": {
@@ -485,8 +506,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "toggle combo list opening flag"
                 },
-                "attribute": "isopen",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isopen",
                 "defaultValue": "false"
             },
             "isfixed": {
@@ -503,8 +526,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "fixed style flag"
                 },
-                "attribute": "isfixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isfixed",
                 "defaultValue": "false"
             },
             "hascheckall": {
@@ -521,8 +546,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "show \"check all\" checkbox (optional)"
                 },
-                "attribute": "hascheckall",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hascheckall",
                 "defaultValue": "false"
             },
             "checkalltext": {
@@ -539,8 +566,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "check all label (optional)"
                 },
-                "attribute": "checkalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "checkalltext",
                 "defaultValue": "\"Seleziona tutti\""
             },
             "uncheckalltext": {
@@ -557,8 +586,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "uncheck all label (optional)"
                 },
-                "attribute": "uncheckalltext",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "uncheckalltext",
                 "defaultValue": "\"Deseleziona tutti\""
             },
             "maxcheckableitems": {
@@ -575,8 +606,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "max number of checkable items (0 = unlimited)"
                 },
-                "attribute": "maxcheckableitems",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "maxcheckableitems",
                 "defaultValue": "0"
             },
             "hasgroupitems": {
@@ -593,8 +626,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "group items by category"
                 },
-                "attribute": "hasgroupitems",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hasgroupitems"
             },
             "size": {
                 "type": "string",
@@ -606,7 +641,8 @@ export class ZCombobox {
                         "ControlSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ControlSize"
+                            "id": "src/beans/index.tsx::ControlSize",
+                            "referenceLocation": "ControlSize"
                         }
                     }
                 },
@@ -616,8 +652,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "Available sizes: `big`, `small` and `x-small`. Defaults to `big`."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "ControlSize.BIG"
             },
             "htmlAriaLabel": {
@@ -634,8 +672,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "the combobox aria-label"
                 },
-                "attribute": "html-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "html-aria-label"
             }
         };
     }
@@ -676,4 +716,3 @@ export class ZCombobox {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-combobox/index.stories.js

@@ -75,4 +75,3 @@ export const Disabled = {
         disabled: true,
     },
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-cover-hero/index.js

@@ -13,8 +13,20 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  */
 export class ZCoverHero {
     constructor() {
+        /**
+         * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+         */
         this.variant = CoverHeroVariant.OVERLAY;
+        /**
+         * Vertical content position (for `STACKED` variant).
+         */
         this.contentPosition = CoverHeroContentPosition.TOP;
+        /**
+         * Whether to keep the image aspect ratio.
+         * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+         * instead, the height of the component follows the content's one.
+         * Note: it may be necessary to set a min and/or max height to the component.
+         */
         this.preserveAspectRatio = true;
     }
     /**
@@ -35,9 +47,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: 'b10d16e5490c00d087ec8677e5453a989aca05cd' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '0e8ec76a2293bbf7044d2a5d0ec951ac096adcd1' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: 'c920eda8a79cd4b7f70f3cdc7e3690b57a117bd9', class: "main-container" }, h("div", { key: '4b74fde8b3d196a772489f381e46ef5690f1d9cf', class: "cover-container" }, h("slot", { key: '4a67176c23dd62d34bc69a0c236bf9adc3b5088c', name: "cover" })), h("slot", { key: 'e71151ae06cc7c30436af153d6192fc2faf4f6ba', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: 'e2dd8963eb05d5a1a602b05d6275d52c01b8dbc9', class: "main-container" }, h("div", { key: '3b537c3b07906fd72795b105e4189252bf876b51', class: "cover-container" }, h("slot", { key: 'f99228a940cfc96ae4ff98a6b79df622d033e00d', name: "cover" })), h("slot", { key: '86b43980717df411f76b098628d83fa80c8dcff6', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -65,7 +77,8 @@ export class ZCoverHero {
                         "CoverHeroVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroVariant"
+                            "id": "src/beans/index.tsx::CoverHeroVariant",
+                            "referenceLocation": "CoverHeroVariant"
                         }
                     }
                 },
@@ -75,8 +88,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Cover hero variant. Can be `OVERLAY` or `STACKED`."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "variant",
                 "defaultValue": "CoverHeroVariant.OVERLAY"
             },
             "contentPosition": {
@@ -89,7 +104,8 @@ export class ZCoverHero {
                         "CoverHeroContentPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CoverHeroContentPosition"
+                            "id": "src/beans/index.tsx::CoverHeroContentPosition",
+                            "referenceLocation": "CoverHeroContentPosition"
                         }
                     }
                 },
@@ -99,8 +115,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Vertical content position (for `STACKED` variant)."
                 },
-                "attribute": "content-position",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "content-position",
                 "defaultValue": "CoverHeroContentPosition.TOP"
             },
             "preserveAspectRatio": {
@@ -117,8 +135,10 @@ export class ZCoverHero {
                     "tags": [],
                     "text": "Whether to keep the image aspect ratio.\nIf set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;\ninstead, the height of the component follows the content's one.\nNote: it may be necessary to set a min and/or max height to the component."
                 },
-                "attribute": "preserve-aspect-ratio",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "preserve-aspect-ratio",
                 "defaultValue": "true"
             }
         };
@@ -134,4 +154,3 @@ export class ZCoverHero {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-cover-hero/index.stories.js

@@ -253,4 +253,3 @@ export const StackedVariant = {
     </div>
   `,
 };
-//# sourceMappingURL=index.stories.js.map

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

@@ -2,12 +2,15 @@ import { Host, h } from "@stencil/core";
 import { DividerOrientation, DividerSize } from "../../beans";
 export class ZDivider {
     constructor() {
+        /** [optional] Divider size */
         this.size = DividerSize.SMALL;
+        /** [optional] Divider color */
         this.color = "gray200";
+        /** [optional] Divider orintation */
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '59e2f811ae879f15bfacb97769a2d43cf68b40a5', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '2be45be46ca78f9c49d78bb39d88a49a3e226074', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }
@@ -33,7 +36,8 @@ export class ZDivider {
                         "DividerSize": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerSize"
+                            "id": "src/beans/index.tsx::DividerSize",
+                            "referenceLocation": "DividerSize"
                         }
                     }
                 },
@@ -43,8 +47,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider size"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "DividerSize.SMALL"
             },
             "color": {
@@ -61,8 +67,10 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider color"
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "\"gray200\""
             },
             "orientation": {
@@ -75,7 +83,8 @@ export class ZDivider {
                         "DividerOrientation": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::DividerOrientation"
+                            "id": "src/beans/index.tsx::DividerOrientation",
+                            "referenceLocation": "DividerOrientation"
                         }
                     }
                 },
@@ -85,11 +94,12 @@ export class ZDivider {
                     "tags": [],
                     "text": "[optional] Divider orintation"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "DividerOrientation.HORIZONTAL"
             }
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-divider/index.stories.js

@@ -42,4 +42,3 @@ export const Default = {
     </div>`,
     name: "ZDivider",
 };
-//# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-ghost-loading/index.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: 'a1cdec0e15f102c34f4db49158857692298341b1' });
+        return h(Host, { key: 'a966fb0e58408172c56e7bb48deb1b5c0e5e0bb8' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +16,3 @@ export class ZGhostLoading {
         };
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-ghost-loading/index.stories.js

@@ -19,4 +19,3 @@ export const ZGhostLoading = {
         <div style="width:30%; height:50px;"><z-ghost-loading></z-ghost-loading></div>
       </div>`,
 };
-//# sourceMappingURL=index.stories.js.map