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

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

@@ -4,13 +4,6 @@ import { CardVariant } from "../../beans";
  * ZCard component.
  * The width of the card must be set by its container, following the grid indications of the design.
  *
- * @cssprop --aspect-ratio - Cover aspect ratio. Default: `1.62`
- * @cssprop --z-card--border-color - Default: `var(--gray200)`
- * @cssprop --z-card--color-cover-background - Cover color. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-background - Background color for the `text` variant. Default: `var(--color-surface01)`
- * @cssprop --z-card--text-border-radius - Default: `none`
- * @cssprop --z-card--text-border - Configure CSS `border`. Default: `none`
- * @cssprop --z-card--text-padding - Configure CSS `padding`. Default: `none`
  * @slot cover - Image cover
  * @slot metadata - Metadata
  * @slot title - Using an `<a>` tag here will make the whole card clickable as if the link was wrapping it.
@@ -19,11 +12,13 @@ import { CardVariant } from "../../beans";
  */
 export class ZCard {
     constructor() {
-        this.variant = undefined;
-        this.coverIcon = undefined;
+        /** Enable shadow. Default: false. */
         this.showShadow = false;
+        /**
+         * Enable "clickable" styles like hover background and cursor, focus shadow on the whole card, etc.
+         * Always set this to `true` when putting an `<a>` tag in the `title` slot.
+         */
         this.clickable = false;
-        this.hasCoverImage = undefined;
     }
     componentWillLoad() {
         this.hasCoverImage = this.host.querySelector('[slot="cover"]') !== null;
@@ -80,18 +75,21 @@ export class ZCard {
                         "CardVariant": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CardVariant"
+                            "id": "src/beans/index.tsx::CardVariant",
+                            "referenceLocation": "CardVariant"
                         }
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Card variant.\nCan be one of \"text\", \"border\", \"shadow\", \"overlay\".\nLeave it undefined for the default card."
                 },
-                "attribute": "variant",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant"
             },
             "coverIcon": {
                 "type": "string",
@@ -107,8 +105,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Name of the icon to place over the image cover"
                 },
-                "attribute": "cover-icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cover-icon"
             },
             "showShadow": {
                 "type": "boolean",
@@ -124,8 +124,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable shadow. Default: false."
                 },
-                "attribute": "show-shadow",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "show-shadow",
                 "defaultValue": "false"
             },
             "clickable": {
@@ -142,8 +144,10 @@ export class ZCard {
                     "tags": [],
                     "text": "Enable \"clickable\" styles like hover background and cursor, focus shadow on the whole card, etc.\nAlways set this to `true` when putting an `<a>` tag in the `title` slot."
                 },
-                "attribute": "clickable",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "clickable",
                 "defaultValue": "false"
             }
         };
@@ -155,4 +159,3 @@ export class ZCard {
     }
     static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,4 +1,13 @@
 :host {
+  /**
+   * @prop --aspect-ratio: Cover aspect ratio. Default: `1.62`
+   * @prop --z-card--border-color: Default: `var(--gray200)`
+   * @prop --z-card--color-cover-background: Cover color. Default: `var(--color-surface01)`
+   * @prop --z-card--text-background: Background color for the `text` variant. Default: `var(--color-surface01)`
+   * @prop --z-card--text-border-radius: Default: `none`
+   * @prop --z-card--text-border: Configure CSS `border`. Default: `none`
+   * @prop --z-card--text-padding: Configure CSS `padding`. Default: `none`
+   */
   --aspect-ratio: 1.62;
   --z-card--border-color: var(--gray200);
   --z-card--color-cover-background: var(--color-surface01);

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

@@ -2,27 +2,26 @@ import { Host, h } from "@stencil/core";
 import { ButtonVariant, CarouselArrowsPosition, CarouselProgressMode } from "../../beans";
 /**
  * ZCarousel component.
- * @cssprop --z-carousel-gutter - The gutter between items.
- * @cssprop --z-carousel-items-shadow - The shadow around the items.
  * @slot - Carousel items. Use `<li>` elements inside this slot.
  */
 export class ZCarousel {
     constructor() {
-        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
-        this.scrollingTo = null;
-        this.isLoading = undefined;
-        this.label = undefined;
+        /** Shows only one content at a time */
         this.single = false;
-        this.arrowsPosition = undefined;
-        this.progressMode = undefined;
+        /**
+         * Whether the navigation arrow buttons over the items are always visible or only on mouse hover.
+         * If set to `false`, the arrows will not be visible on mobile.
+         * Only meaningful with `arrowsPosition` set to `OVER`.
+         */
         this.fixedArrows = true;
+        /** The height of the ghost loader (only visible when `isLoading` is set to `true`) */
         this.ghostLoadingHeight = 100;
+        /** When enabled, navigating next the last item will go back to the first item and vice versa. */
         this.infinite = false;
+        /** Current item index for single mode. */
         this.current = 0;
-        this.items = undefined;
-        this.highlightedIndicator = undefined;
-        this.canNavigatePrev = undefined;
-        this.canNavigateNext = undefined;
+        /** Flag indicating the items container is about to scroll programmatically towards the stored index. */
+        this.scrollingTo = null;
     }
     onIndexChange() {
         this.indexChange.emit({ currentItem: this.current });
@@ -35,6 +34,24 @@ export class ZCarousel {
     onInfiniteModeChange() {
         this.checkNavigationValidity();
     }
+    onLoadingChange() {
+        if (!this.isLoading) {
+            // when loading is finished, we need to set up things with the real items that were not present during the loading phase
+            this.setupObserversAndListeners();
+        }
+    }
+    /** Set up all observers and listeners related to the rendered items. */
+    setupObserversAndListeners() {
+        var _a;
+        this.setupItems();
+        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
+        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
+        this.resizeObserver.observe(this.itemsContainer);
+        if (this.single) {
+            this.setIntersectionObserver();
+        }
+        this.checkNavigationValidity();
+    }
     /**
      * Set an intersection observer to:
      * - highlight the indicator of the intersecting item during scroll
@@ -146,15 +163,10 @@ export class ZCarousel {
         });
     }
     componentDidLoad() {
-        var _a, _b;
-        (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.checkNavigationValidity.bind(this), { passive: true });
-        this.resizeObserver = new ResizeObserver(this.checkNavigationValidity.bind(this));
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(this.itemsContainer);
-        this.setupItems();
-        if (this.single) {
-            this.setIntersectionObserver();
+        if (this.isLoading) {
+            return;
         }
-        this.checkNavigationValidity();
+        this.setupObserversAndListeners();
     }
     disconnectedCallback() {
         var _a;
@@ -170,12 +182,12 @@ export class ZCarousel {
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["styles.css"]
+            "$": ["styles.css", "../../tokens/typography.css"]
         };
     }
     static get properties() {
@@ -194,8 +206,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel is on loading state"
                 },
-                "attribute": "is-loading",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-loading"
             },
             "label": {
                 "type": "string",
@@ -211,8 +225,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The z-carousel title"
                 },
-                "attribute": "label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
             },
             "single": {
                 "type": "boolean",
@@ -228,8 +244,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Shows only one content at a time"
                 },
-                "attribute": "single",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "single",
                 "defaultValue": "false"
             },
             "arrowsPosition": {
@@ -242,7 +260,8 @@ export class ZCarousel {
                         "CarouselArrowsPosition": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselArrowsPosition"
+                            "id": "src/beans/index.tsx::CarouselArrowsPosition",
+                            "referenceLocation": "CarouselArrowsPosition"
                         }
                     }
                 },
@@ -252,8 +271,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Arrow buttons position"
                 },
-                "attribute": "arrows-position",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "arrows-position"
             },
             "progressMode": {
                 "type": "string",
@@ -265,7 +286,8 @@ export class ZCarousel {
                         "CarouselProgressMode": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::CarouselProgressMode"
+                            "id": "src/beans/index.tsx::CarouselProgressMode",
+                            "referenceLocation": "CarouselProgressMode"
                         }
                     }
                 },
@@ -275,8 +297,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Progress indicator type. Only available for `single` mode"
                 },
-                "attribute": "progress-mode",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress-mode"
             },
             "fixedArrows": {
                 "type": "boolean",
@@ -292,8 +316,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "Whether the navigation arrow buttons over the items are always visible or only on mouse hover.\nIf set to `false`, the arrows will not be visible on mobile.\nOnly meaningful with `arrowsPosition` set to `OVER`."
                 },
-                "attribute": "fixed-arrows",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "fixed-arrows",
                 "defaultValue": "true"
             },
             "ghostLoadingHeight": {
@@ -310,8 +336,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "The height of the ghost loader (only visible when `isLoading` is set to `true`)"
                 },
-                "attribute": "ghost-loading-height",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "ghost-loading-height",
                 "defaultValue": "100"
             },
             "infinite": {
@@ -328,8 +356,10 @@ export class ZCarousel {
                     "tags": [],
                     "text": "When enabled, navigating next the last item will go back to the first item and vice versa."
                 },
-                "attribute": "infinite",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "infinite",
                 "defaultValue": "false"
             }
         };
@@ -372,7 +402,9 @@ export class ZCarousel {
             }, {
                 "propName": "infinite",
                 "methodName": "onInfiniteModeChange"
+            }, {
+                "propName": "isLoading",
+                "methodName": "onLoadingChange"
             }];
     }
 }
-//# sourceMappingURL=index.js.map

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

@@ -1,9 +1,13 @@
 :host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-
+  /**
+   * @prop --z-carousel-gutter: The gutter between items.
+   * @prop --z-carousel-items-shadow: The shadow around the items.
+   */
   --z-carousel-gutter: 0;
   --z-carousel-items-shadow: ;
+
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
 }
 
 :host([single]) {

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

@@ -2,18 +2,19 @@ import { h } from "@stencil/core";
 import { ZChipType } from "../../beans";
 export class ZChip {
     constructor() {
-        this.icon = undefined;
+        /** z-chip size type, can be default, medium or small */
         this.type = ZChipType.DEFAULT;
-        this.interactiveIcon = undefined;
+        /** set z-chip as disabled */
         this.disabled = false;
+        /** z-chip aria-label string */
         this.ariaLabel = "";
     }
     render() {
-        return (h("div", { key: 'f696700f7e7634093acb40080f72f9261f3aae36', class: {
+        return (h("div", { key: '7ff5bc2ca7ac9e73c3bb6e31a4795d8f275b0217', class: {
                 "z-chip-container": true,
                 "z-chip-interactive": !!this.interactiveIcon,
                 [this.type]: true,
-            }, "aria-disabled": this.disabled }, this.icon && h("z-icon", { key: '549bec3f429ffaf44eb3fe285b57b45bfd67f3ee', name: this.icon }), h("slot", { key: 'ae32cb0af653344dfce38449f55eea24772792ed' }), this.interactiveIcon && (h("button", { key: '0d6daafae8c1580d3107050b4e964f89ccbb3475', type: "button", onClick: () => this.interactiveIconClick.emit(), "aria-label": this.ariaLabel, disabled: this.disabled }, h("z-icon", { key: 'db816882f84afbfa35d44ec47aeefe7f3a4ad254', class: "interactive-icon", name: this.interactiveIcon })))));
+            }, "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 })))));
     }
     static get is() { return "z-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -43,8 +44,10 @@ export class ZChip {
                     "tags": [],
                     "text": "Non interactive icon"
                 },
-                "attribute": "icon",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
             },
             "type": {
                 "type": "string",
@@ -56,7 +59,8 @@ export class ZChip {
                         "ZChipType": {
                             "location": "import",
                             "path": "../../beans",
-                            "id": "src/beans/index.tsx::ZChipType"
+                            "id": "src/beans/index.tsx::ZChipType",
+                            "referenceLocation": "ZChipType"
                         }
                     }
                 },
@@ -66,8 +70,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip size type, can be default, medium or small"
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "type",
                 "defaultValue": "ZChipType.DEFAULT"
             },
             "interactiveIcon": {
@@ -84,8 +90,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip interactive icon"
                 },
-                "attribute": "interactive-icon",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "interactive-icon"
             },
             "disabled": {
                 "type": "boolean",
@@ -101,8 +109,10 @@ export class ZChip {
                     "tags": [],
                     "text": "set z-chip as disabled"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "ariaLabel": {
@@ -119,8 +129,10 @@ export class ZChip {
                     "tags": [],
                     "text": "z-chip aria-label string"
                 },
-                "attribute": "aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "aria-label",
                 "defaultValue": "\"\""
             }
         };
@@ -145,4 +157,3 @@ export class ZChip {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=index.js.map

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: '8ab27c4b68bd295e1bda15e78f1f41bfbfc66b47', 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