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

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { ControlSize, InputType, KeyboardCode, ListDividerType, ListSize } from "../../beans";
-import { getPlainText, randomId } from "../../utils/utils";
+import { encodeString, getPlainText, randomId } from "../../utils/utils";
 export class ZCombobox {
     watchItems() {
         this.itemsList = typeof this.items === "string" ? JSON.parse(this.items) : this.items;
@@ -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);
     }
@@ -57,8 +59,8 @@ export class ZCombobox {
                 return ListSize.LARGE;
         }
     }
-    getOptionId(itemId) {
-        return `${this.inputid}-option-${itemId}`;
+    getOptionId(item) {
+        return `${this.inputid}-option-${item.id ? encodeString(`${item.id}`) : encodeString(`${item.name}`)}`;
     }
     getCheckAllOptionId() {
         return `${this.inputid}-check-all`;
@@ -128,7 +130,7 @@ export class ZCombobox {
         }
         else {
             this.itemsList = this.itemsList.map((i) => {
-                if (optionId === this.getOptionId(i.id)) {
+                if (optionId === this.getOptionId(i)) {
                     i.checked = !i.checked;
                 }
                 return i;
@@ -202,16 +204,22 @@ export class ZCombobox {
     toggleComboBox() {
         this.isopen = !this.isopen;
     }
+    getHeaderAriaLabel() {
+        if (!this.label || this.selectedCounter <= 0) {
+            return undefined;
+        }
+        const suffix = this.selectedCounter === 1 ? "elemento selezionato" : "elementi selezionati";
+        return `${this.label}: ${this.selectedCounter} ${suffix}`;
+    }
     getComboboxA11yAttributes(isZInput) {
         const role = "combobox";
-        const ariaLabel = this.htmlAriaLabel;
         const ariaExpanded = this.isopen ? "true" : "false";
         const ariaActivedescendant = this.isopen ? this.focusedItemId : "";
         const ariaControls = `${this.inputid}_list`;
         if (isZInput) {
             return {
                 "role": role,
-                "aria-label": ariaLabel,
+                "aria-label": this.htmlAriaLabel,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -219,7 +227,6 @@ export class ZCombobox {
         }
         return {
             "role": role,
-            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
@@ -227,18 +234,16 @@ export class ZCombobox {
     }
     renderHeader() {
         const comboboxA11yAttributes = !this.hassearch ? this.getComboboxA11yAttributes(false) : {};
-        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, comboboxA11yAttributes), h("span", { class: "body-3", "aria-label": this.label
-                ? `${this.label}${this.selectedCounter > 0 ? ` - ${this.selectedCounter} selezionati` : ``}`
-                : undefined }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        return (h("div", Object.assign({ class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (e) => this.handleHeaderKeyDown(e), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false", "aria-label": this.getHeaderAriaLabel() }, comboboxA11yAttributes), h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item.id)).join(" ")}` }, this.renderItems())));
+        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": `${this.hascheckall ? `${this.getCheckAllOptionId()} ` : ``}${this.itemsList.map((item) => this.getOptionId(item)).join(" ")}` }, this.renderItems())));
     }
     renderItems() {
         return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index, length) {
-        const optionId = this.getOptionId(item.id);
+        const optionId = this.getOptionId(item);
         const isDisabled = !item.checked && this.hasReachedMaxSelections();
         return (h("z-list-element", { htmlTabindex: -1, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: "presentation", disabled: !!isDisabled }, h("span", { class: "option-wrap", role: "presentation", onClick: () => {
                 this.focusedItemId = "";
@@ -292,18 +297,18 @@ 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: '6ada0f3dc9aebeb5c97843c18935199f6c981e28', "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"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["../css-components/z-label/styles.css", "styles.css"]
         };
     }
     static get properties() {
@@ -322,8 +327,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 +343,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 +354,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 +373,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 +392,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 +412,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 +432,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 +451,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 +470,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 +489,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 +509,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 +529,10 @@ export class ZCombobox {
                     "tags": [],
                     "text": "fixed style flag"
                 },
-                "attribute": "isfixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "isfixed",
                 "defaultValue": "false"
             },
             "hascheckall": {
@@ -521,8 +549,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 +569,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 +589,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 +609,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 +629,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 +644,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 +655,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 +675,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 +719,3 @@ export class ZCombobox {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,15 +1,3 @@
-.z-label {
-  display: block;
-  padding-bottom: var(--space-unit);
-  color: var(--color-default-text);
-  font-family: var(--font-family-sans);
-  font-size: var(--font-size-1);
-  font-weight: var(--font-sb);
-  text-align: left;
-  text-transform: uppercase;
-}
-
-
 :host {
   display: block;
   min-width: 290px;

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

@@ -7,14 +7,23 @@ import { CoverHeroContentPosition, CoverHeroVariant } from "../../beans";
  * @slot cover - slot for the cover image.
  * @slot content - slot for the content.
  * @slot info-reveal - slot for the info reveal.
- * @cssprop --cover-hero-overlay - overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
- * @cssprop --cover-hero-text-color - color of the text.
- * @cssprop --cover-hero-aspect-ratio - aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
  */
 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 +44,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: 'bb147f3b614268218fba165360012031572ec76b' }, 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: '94c697c41b4d98ea9f5be00634a3de1fd214ea72', class: "main-container" }, h("div", { key: 'e1a181735381dbc2472085c7e1d7082e1564185a', class: "cover-container" }, h("slot", { key: '1692cfa7f6a9ee926a262e04e8912a72f5a95cca', name: "cover" })), h("slot", { key: 'c13a059c162d85e46d3f116a8b1fd9e3a6e363f7', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }
@@ -65,7 +74,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 +85,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 +101,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 +112,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 +132,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 +151,3 @@ export class ZCoverHero {
             }];
     }
 }
-//# sourceMappingURL=index.js.map

package/dist/collection/components/z-cover-hero/styles.css

@@ -1,4 +1,9 @@
 :host {
+  /**
+   * @prop --cover-hero-overlay: overlay color of the cover hero (CSS `background` property). **Default**: `linear-gradient(270deg, #0000 0%, #000000e6 100%)`.
+   * @prop --cover-hero-text-color: color of the text.
+   * @prop --cover-hero-aspect-ratio: aspect ratio to use for the image. You can pass a fraction or a number representing the ratio. **Default**: the intrinsic aspect ratio of the slotted image or `16/9`.
+   */
   --cover-hero-overlay: linear-gradient(270deg, #0000 0%, #000000e6 100%);
   --cover-hero-text-color: var(--color-text-inverse);
   --cover-hero-aspect-ratio: ;

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: 'ad8d9a15195becf87ba4a03e73a279ecee4d4b93', 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-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: '36459896003d9c65cc0e969a184987ddcac8c962' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }
@@ -16,4 +16,3 @@ export class ZGhostLoading {
         };
     }
 }
-//# sourceMappingURL=index.js.map