@zanichelli/albe-web-components 19.1.4-RC1 → 19.3.0-RC1

package/dist/esm/z-color-picker.entry.js

@@ -0,0 +1,208 @@
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-c8ceadeb.js';
+import { a0 as ColorPickerPalette } from './index-106473a8.js';
+import { a as containsElement } from './utils-8d6ca808.js';
+import './breakpoints-d148bfde.js';
+
+const stylesCss = ":host{display:grid;width:fit-content;padding:calc(var(--space-unit) * 2);background:var(--color-surface01);gap:var(--space-unit);grid-template-columns:repeat(9, calc(var(--space-unit) * 3));grid-template-rows:repeat(5, calc(var(--space-unit) * 3))}:host,*{box-sizing:border-box}button{--border-color:var(--color-surface05);padding:0;border:none;appearance:none;background:none;border-radius:var(--border-radius);cursor:pointer}button[data-color=\"#FFFFFF00\"]{position:relative}button[data-color=\"#FFFFFF00\"]::after{position:absolute;top:0;right:0;width:100%;height:100%;background:linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );border-radius:var(--border-radius);content:\"\"}button[aria-selected=\"true\"]{box-shadow:0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary)}button:focus-visible{box-shadow:var(--shadow-focus-primary)}button .color-swatch{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3);border:var(--border-size-small) solid var(--border-color);border-radius:var(--border-radius)}button[data-color=\"#FFFFFF00\"]:disabled{--border-color:var(--color-disabled01-icon);cursor:not-allowed}button[data-color=\"#FFFFFF00\"]:disabled .color-swatch{background-color:var(--color-disabled02)}";
+const ZColorPickerStyle0 = stylesCss;
+
+const LOCALES = {
+    it: {
+        "Select a color": "Seleziona un colore",
+        "Color swatch": "Campione di colore",
+    },
+    en: {
+        "Select a color": "Select a color",
+        "Color swatch": "Color swatch",
+    },
+};
+/** Number of colors in each group (column) of the grid. */
+const COLOR_GROUP_SIZE = 5;
+/** Number of color groups (columns) in the grid. */
+const COLOR_GROUPS = 9;
+const ZColorPicker = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.colorSelected = createEvent(this, "colorSelected", 7);
+        /**
+         * 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) {
+            this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll("button"));
+        }
+        return this._colorButtons;
+    }
+    /**
+     * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).
+     * This ensures button indices in the DOM match their visual position in the grid.
+     */
+    sortColorKeysByRow() {
+        const allKeys = Object.keys(ColorPickerPalette);
+        const ordered = [];
+        // Iterate through visual positions (row by row, left to right)
+        for (let row = 0; row < COLOR_GROUP_SIZE; row++) {
+            for (let col = 0; col < COLOR_GROUPS; col++) {
+                const columnMajorIndex = col * COLOR_GROUP_SIZE + row;
+                if (columnMajorIndex < allKeys.length) {
+                    ordered.push(allKeys[columnMajorIndex]);
+                }
+            }
+        }
+        return ordered;
+    }
+    /** Move focus to the specified color button by index. */
+    moveFocusTo(index) {
+        // Reset tabindex of other buttons and set tabindex to 0 on selected button
+        this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));
+        this.colorButtons[index].focus();
+    }
+    validateTransparentSelection() {
+        if (this.disableTransparent && this.selectedColor === "#FFFFFF00") {
+            this.selectedColor = "#333333"; // Default to dark gray 2 if transparent is disabled and currently selected
+        }
+    }
+    emitColorSelected() {
+        this.colorSelected.emit(this.selectedColor);
+    }
+    /**
+     * Focuses the selected or first enabled color button and makes the container non-tabbable.
+     */
+    async setFocus() {
+        // Reset tabindex of all buttons
+        this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
+        const firstSelectedOrEnabled = this.colorButtons.find((btn) => btn.ariaSelected === "true") || this.colorButtons.find((btn) => !btn.disabled);
+        if (!firstSelectedOrEnabled) {
+            return;
+        }
+        firstSelectedOrEnabled.tabIndex = 0;
+        setTimeout(() => {
+            firstSelectedOrEnabled.focus();
+        }, 50);
+        // Set container as non-tabbable
+        this.host.tabIndex = -1;
+    }
+    /**
+     * Compute next index in row-major grid according to keyboard direction.
+     */
+    getNextIndexByKey(currentIndex, key, totalColors) {
+        const row = Math.floor(currentIndex / COLOR_GROUPS);
+        const col = currentIndex % COLOR_GROUPS;
+        let newIndex = currentIndex;
+        switch (key) {
+            case "ArrowRight": {
+                const newCol = col + 1;
+                const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;
+                newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);
+                if (newIndex >= totalColors) {
+                    newIndex = 0; // Wrap to first item
+                }
+                break;
+            }
+            case "ArrowLeft": {
+                const newCol = col - 1;
+                const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;
+                newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);
+                if (newIndex >= totalColors) {
+                    newIndex = totalColors - 1; // Wrap to last item
+                }
+                break;
+            }
+            case "ArrowDown": {
+                let newRow = row + 1;
+                let newCol = col;
+                if (newRow >= COLOR_GROUP_SIZE) {
+                    // Wrap to first item of next column
+                    newRow = 0;
+                    newCol = (col + 1) % COLOR_GROUPS;
+                }
+                newIndex = newRow * COLOR_GROUPS + newCol;
+                if (newIndex >= totalColors) {
+                    newIndex = 0; // Wrap to first item
+                }
+                break;
+            }
+            case "ArrowUp": {
+                let newRow = row - 1;
+                let newCol = col;
+                if (newRow < 0) {
+                    // Wrap to last item of previous column
+                    newRow = COLOR_GROUP_SIZE - 1;
+                    newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;
+                }
+                newIndex = newRow * COLOR_GROUPS + newCol;
+                if (newIndex >= totalColors) {
+                    newIndex = totalColors - 1; // Wrap to last item
+                }
+                break;
+            }
+        }
+        return newIndex;
+    }
+    /**
+     * Handle keyboard navigation within the color picker.
+     * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.
+     */
+    handleKeyDown(event) {
+        var _a, _b;
+        const target = event.composedPath()[0];
+        if (!target.dataset.color) {
+            return;
+        }
+        const currentIndex = this.colorButtons.indexOf(target);
+        const totalColors = this.colorButtons.length;
+        if (currentIndex < 0 || !["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp"].includes(event.key)) {
+            return;
+        }
+        let newIndex = currentIndex;
+        let attempts = 0;
+        do {
+            newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);
+            attempts++;
+        } while (attempts < totalColors && ((_a = this.colorButtons[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled));
+        if (newIndex !== currentIndex &&
+            newIndex >= 0 &&
+            newIndex < totalColors &&
+            !((_b = this.colorButtons[newIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+            this.moveFocusTo(newIndex);
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }
+    /**
+     * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.
+     */
+    handleBlur(event) {
+        const relatedTarget = event.relatedTarget;
+        if (!containsElement(this.host, relatedTarget)) {
+            this.host.tabIndex = 0;
+            this.colorButtons.forEach((btn) => (btn.tabIndex = -1));
+        }
+    }
+    componentWillLoad() {
+        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) => {
+            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 } })));
+        })));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "disableTransparent": ["validateTransparentSelection"],
+        "selectedColor": ["validateTransparentSelection", "emitColorSelected"]
+    }; }
+};
+ZColorPicker.style = ZColorPickerStyle0;
+
+export { ZColorPicker as z_color_picker };
+
+//# sourceMappingURL=z-color-picker.entry.js.map

package/dist/esm/z-color-picker.entry.js.map

@@ -0,0 +1 @@
+{"file":"z-color-picker.entry.js","mappings":";;;;;AAAA,MAAM,SAAS,GAAG,ozCAAozC,CAAC;AACv0C,2BAAe,SAAS;;ACGxB,MAAM,OAAO,GAAG;IACd,EAAE,EAAE;QACF,gBAAgB,EAAE,qBAAqB;QACvC,cAAc,EAAE,oBAAoB;KACrC;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,gBAAgB;QAClC,cAAc,EAAE,cAAc;KAC/B;CACO,CAAC;AAEX;AACA,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAE3B;AACA,MAAM,YAAY,GAAG,CAAC,CAAC;MAWV,YAAY;;;;;;;QAqCf,mBAAc,GAAyB,EAAE,CAAC;QAE1C,kBAAa,GAAwB,EAAE,CAAC;;mBA1B7B,IAAI;;kCAaF,KAAK;;IAe1B,IAAY,YAAY;QACtB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;YAC9B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAwB,CAAC;SACzG;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;KAC3B;;;;;IAMO,kBAAkB;QACxB,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAyB,CAAC;QACxE,MAAM,OAAO,GAAyB,EAAE,CAAC;;QAGzC,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,gBAAgB,EAAE,GAAG,EAAE,EAAE;YAC/C,KAAK,IAAI,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,YAAY,EAAE,GAAG,EAAE,EAAE;gBAC3C,MAAM,gBAAgB,GAAG,GAAG,GAAG,gBAAgB,GAAG,GAAG,CAAC;gBACtD,IAAI,gBAAgB,GAAG,OAAO,CAAC,MAAM,EAAE;oBACrC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;iBACzC;aACF;SACF;QAED,OAAO,OAAO,CAAC;KAChB;;IAGO,WAAW,CAAC,KAAa;;QAE/B,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC,QAAQ,GAAG,CAAC,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC;KAClC;IAID,4BAA4B;QAC1B,IAAI,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,aAAa,KAAK,WAAW,EAAE;YACjE,IAAI,CAAC,aAAa,GAAG,SAAS,CAAC;SAChC;KACF;IAGD,iBAAiB;QACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC7C;;;;IAOD,MAAM,QAAQ;;QAEZ,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,sBAAsB,GAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,YAAY,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACjH,IAAI,CAAC,sBAAsB,EAAE;YAC3B,OAAO;SACR;QAED,sBAAsB,CAAC,QAAQ,GAAG,CAAC,CAAC;QACpC,UAAU,CAAC;YACT,sBAAsB,CAAC,KAAK,EAAE,CAAC;SAChC,EAAE,EAAE,CAAC,CAAC;;QAEP,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC;KACzB;;;;IAKO,iBAAiB,CAAC,YAAoB,EAAE,GAAW,EAAE,WAAmB;QAC9E,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;QACpD,MAAM,GAAG,GAAG,YAAY,GAAG,YAAY,CAAC;QACxC,IAAI,QAAQ,GAAG,YAAY,CAAC;QAE5B,QAAQ,GAAG;YACT,KAAK,YAAY,EAAE;gBACjB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACvB,MAAM,MAAM,GAAG,MAAM,IAAI,YAAY,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,gBAAgB,GAAG,GAAG,CAAC;gBAC3E,QAAQ,GAAG,MAAM,GAAG,YAAY,IAAI,MAAM,GAAG,YAAY,CAAC,CAAC;gBAC3D,IAAI,QAAQ,IAAI,WAAW,EAAE;oBAC3B,QAAQ,GAAG,CAAC,CAAC;iBACd;gBAED,MAAM;aACP;YACD,KAAK,WAAW,EAAE;gBAChB,MAAM,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACvB,MAAM,MAAM,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,gBAAgB,IAAI,gBAAgB,GAAG,GAAG,CAAC;gBAClF,QAAQ,GAAG,MAAM,GAAG,YAAY,IAAI,CAAC,MAAM,GAAG,YAAY,IAAI,YAAY,CAAC,CAAC;gBAC5E,IAAI,QAAQ,IAAI,WAAW,EAAE;oBAC3B,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC;iBAC5B;gBAED,MAAM;aACP;YACD,KAAK,WAAW,EAAE;gBAChB,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC;gBACjB,IAAI,MAAM,IAAI,gBAAgB,EAAE;;oBAE9B,MAAM,GAAG,CAAC,CAAC;oBACX,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,IAAI,YAAY,CAAC;iBACnC;gBACD,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;gBAC1C,IAAI,QAAQ,IAAI,WAAW,EAAE;oBAC3B,QAAQ,GAAG,CAAC,CAAC;iBACd;gBAED,MAAM;aACP;YACD,KAAK,SAAS,EAAE;gBACd,IAAI,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC;gBACrB,IAAI,MAAM,GAAG,GAAG,CAAC;gBACjB,IAAI,MAAM,GAAG,CAAC,EAAE;;oBAEd,MAAM,GAAG,gBAAgB,GAAG,CAAC,CAAC;oBAC9B,MAAM,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,YAAY,IAAI,YAAY,CAAC;iBAClD;gBACD,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,MAAM,CAAC;gBAC1C,IAAI,QAAQ,IAAI,WAAW,EAAE;oBAC3B,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC;iBAC5B;gBAED,MAAM;aACP;SACF;QAED,OAAO,QAAQ,CAAC;KACjB;;;;;IAOD,aAAa,CAAC,KAAoB;;QAChC,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAgB,CAAC;QACtD,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE;YACzB,OAAO;SACR;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAA2B,CAAC,CAAC;QAC5E,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;QAC7C,IAAI,YAAY,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;YAChG,OAAO;SACR;QAED,IAAI,QAAQ,GAAG,YAAY,CAAC;QAC5B,IAAI,QAAQ,GAAG,CAAC,CAAC;QAEjB,GAAG;YACD,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,QAAQ,EAAE,KAAK,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;YACpE,QAAQ,EAAE,CAAC;SACZ,QAAQ,QAAQ,GAAG,WAAW,KAAI,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,0CAAE,QAAQ,CAAA,EAAE;QAE1E,IACE,QAAQ,KAAK,YAAY;YACzB,QAAQ,IAAI,CAAC;YACb,QAAQ,GAAG,WAAW;YACtB,EAAC,MAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,0CAAE,QAAQ,CAAA,EACtC;YACA,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;YAC3B,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;SACzB;KACF;;;;IAMD,UAAU,CAAC,KAAiB;QAC1B,MAAM,aAAa,GAAG,KAAK,CAAC,aAA4B,CAAC;QACzD,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE;YAC9C,IAAI,CAAC,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;YACvB,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,GAAG,MAAM,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SACzD;KACF;IAED,iBAAiB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;KACjD;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,IAAI,EAAC,SAAS,gBACF,IAAI,CAAC,aAAa,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,EACrE,QAAQ,EAAE,CAAC,IAEV,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,QAA4B;;YAAK,QACzD,cACE,KAAK,EAAC,cAAc,gBACR,QAAQ,EACpB,IAAI,EAAC,QAAQ,mBACE,CAAA,MAAA,IAAI,CAAC,aAAa,0CAAE,WAAW,EAAE,MAAK,QAAQ,CAAC,WAAW,EAAE,GAAG,MAAM,GAAG,OAAO,EAC9F,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,EAC9C,QAAQ,EAAE,IAAI,CAAC,kBAAkB,IAAI,QAAQ,KAAK,WAAW,IAE7D,WACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,KAAK,0BACY,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,gBAC3C,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAClD,KAAK,EAAE,kBAAkB,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAC7C,KAAK,EAAE,EAAC,eAAe,EAAE,QAAQ,EAAC,GAC7B,CACA,EACV;SAAA,CAAC,CACG,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/z-color-picker/styles.css?tag=z-color-picker&encapsulation=shadow","src/components/z-color-picker/index.tsx"],"sourcesContent":[":host {\n  display: grid;\n  width: fit-content;\n  padding: calc(var(--space-unit) * 2);\n  background: var(--color-surface01);\n  gap: var(--space-unit);\n  grid-template-columns: repeat(9, calc(var(--space-unit) * 3));\n  grid-template-rows: repeat(5, calc(var(--space-unit) * 3));\n}\n\n:host,\n* {\n  box-sizing: border-box;\n}\n\nbutton {\n  --border-color: var(--color-surface05);\n\n  padding: 0;\n  border: none;\n  appearance: none;\n  background: none;\n  border-radius: var(--border-radius);\n  cursor: pointer;\n}\n\nbutton[data-color=\"#FFFFFF00\"] {\n  position: relative;\n}\n\n/* draw a diagonal line from top right corner */\nbutton[data-color=\"#FFFFFF00\"]::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  background: linear-gradient(\n    -45deg,\n    transparent 48%,\n    var(--border-color) 48%,\n    var(--border-color) 52%,\n    transparent 52%\n  );\n  border-radius: var(--border-radius);\n  content: \"\";\n}\n\nbutton[aria-selected=\"true\"] {\n  box-shadow:\n    0 0 0 1px var(--color-white),\n    0 0 0 3px var(--color-active-primary);\n}\n\nbutton:focus-visible {\n  box-shadow: var(--shadow-focus-primary);\n}\n\nbutton .color-swatch {\n  width: calc(var(--space-unit) * 3);\n  height: calc(var(--space-unit) * 3);\n  border: var(--border-size-small) solid var(--border-color);\n  border-radius: var(--border-radius);\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled {\n  --border-color: var(--color-disabled01-icon);\n\n  cursor: not-allowed;\n}\n\nbutton[data-color=\"#FFFFFF00\"]:disabled .color-swatch {\n  background-color: var(--color-disabled02);\n}\n","import {Component, Element, Event, EventEmitter, Host, Listen, Method, Prop, Watch, h} from \"@stencil/core\";\nimport {ColorPickerPalette} from \"../../beans\";\nimport {containsElement} from \"../../utils/utils\";\n\nconst LOCALES = {\n  it: {\n    \"Select a color\": \"Seleziona un colore\",\n    \"Color swatch\": \"Campione di colore\",\n  },\n  en: {\n    \"Select a color\": \"Select a color\",\n    \"Color swatch\": \"Color swatch\",\n  },\n} as const;\n\n/** Number of colors in each group (column) of the grid. */\nconst COLOR_GROUP_SIZE = 5;\n\n/** Number of color groups (columns) in the grid. */\nconst COLOR_GROUPS = 9;\n\n/**\n * Color picker component.\n * This component allows the user to pick a color from a predefined set.\n */\n@Component({\n  tag: \"z-color-picker\",\n  styleUrl: \"styles.css\",\n  shadow: true,\n})\nexport class ZColorPicker {\n  @Element() host: HTMLZColorPickerElement;\n\n  /**\n   * The selected color to highlight.\n   */\n  @Prop({mutable: true})\n  selectedColor: ColorPickerPalette;\n\n  /**\n   * The language for the aria labels inside the color picker.\n   */\n  @Prop()\n  lng: \"it\" | \"en\" = \"it\";\n\n  /**\n   * The aria-label for the color picker, e.g. \"Select a background color for the label\".\n   */\n  @Prop()\n  htmlAriaLabel: string;\n\n  /**\n   * Disables the transparent color option.\n   * Setting `selectedColor` prop to `#FFFFFF00` while `disableTransparent` is true will default to `#333333` (\"dark gray 2\").\n   */\n  @Prop()\n  disableTransparent = false;\n\n  /**\n   * Event emitted when a color is selected.\n   */\n  @Event()\n  colorSelected: EventEmitter<ColorPickerPalette>;\n\n  /**\n   * The color keys arranged in row-major order for rendering and navigation.\n   */\n  private colorKeysByRow: ColorPickerPalette[] = [];\n\n  private _colorButtons: HTMLButtonElement[] = [];\n\n  private get colorButtons(): HTMLButtonElement[] {\n    if (!this._colorButtons.length) {\n      this._colorButtons = Array.from(this.host.shadowRoot.querySelectorAll(\"button\")) as HTMLButtonElement[];\n    }\n\n    return this._colorButtons;\n  }\n\n  /**\n   * Reorders color keys from column-major (the format of the `ColorPickerPalette` object) to row-major (visual/navigation order).\n   * This ensures button indices in the DOM match their visual position in the grid.\n   */\n  private sortColorKeysByRow(): ColorPickerPalette[] {\n    const allKeys = Object.keys(ColorPickerPalette) as ColorPickerPalette[];\n    const ordered: ColorPickerPalette[] = [];\n\n    // Iterate through visual positions (row by row, left to right)\n    for (let row = 0; row < COLOR_GROUP_SIZE; row++) {\n      for (let col = 0; col < COLOR_GROUPS; col++) {\n        const columnMajorIndex = col * COLOR_GROUP_SIZE + row;\n        if (columnMajorIndex < allKeys.length) {\n          ordered.push(allKeys[columnMajorIndex]);\n        }\n      }\n    }\n\n    return ordered;\n  }\n\n  /** Move focus to the specified color button by index. */\n  private moveFocusTo(index: number): void {\n    // Reset tabindex of other buttons and set tabindex to 0 on selected button\n    this.colorButtons.forEach((btn, i) => (btn.tabIndex = i === index ? 0 : -1));\n    this.colorButtons[index].focus();\n  }\n\n  @Watch(\"disableTransparent\")\n  @Watch(\"selectedColor\")\n  validateTransparentSelection(): void {\n    if (this.disableTransparent && this.selectedColor === \"#FFFFFF00\") {\n      this.selectedColor = \"#333333\"; // Default to dark gray 2 if transparent is disabled and currently selected\n    }\n  }\n\n  @Watch(\"selectedColor\")\n  emitColorSelected(): void {\n    this.colorSelected.emit(this.selectedColor);\n  }\n\n  /**\n   * Focuses the selected or first enabled color button and makes the container non-tabbable.\n   */\n  @Listen(\"focus\")\n  @Method()\n  async setFocus(): Promise<void> {\n    // Reset tabindex of all buttons\n    this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    const firstSelectedOrEnabled =\n      this.colorButtons.find((btn) => btn.ariaSelected === \"true\") || this.colorButtons.find((btn) => !btn.disabled);\n    if (!firstSelectedOrEnabled) {\n      return;\n    }\n\n    firstSelectedOrEnabled.tabIndex = 0;\n    setTimeout(() => {\n      firstSelectedOrEnabled.focus();\n    }, 50);\n    // Set container as non-tabbable\n    this.host.tabIndex = -1;\n  }\n\n  /**\n   * Compute next index in row-major grid according to keyboard direction.\n   */\n  private getNextIndexByKey(currentIndex: number, key: string, totalColors: number): number {\n    const row = Math.floor(currentIndex / COLOR_GROUPS);\n    const col = currentIndex % COLOR_GROUPS;\n    let newIndex = currentIndex;\n\n    switch (key) {\n      case \"ArrowRight\": {\n        const newCol = col + 1;\n        const newRow = newCol >= COLOR_GROUPS ? (row + 1) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + (newCol % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowLeft\": {\n        const newCol = col - 1;\n        const newRow = newCol < 0 ? (row - 1 + COLOR_GROUP_SIZE) % COLOR_GROUP_SIZE : row;\n        newIndex = newRow * COLOR_GROUPS + ((newCol + COLOR_GROUPS) % COLOR_GROUPS);\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n      case \"ArrowDown\": {\n        let newRow = row + 1;\n        let newCol = col;\n        if (newRow >= COLOR_GROUP_SIZE) {\n          // Wrap to first item of next column\n          newRow = 0;\n          newCol = (col + 1) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = 0; // Wrap to first item\n        }\n\n        break;\n      }\n      case \"ArrowUp\": {\n        let newRow = row - 1;\n        let newCol = col;\n        if (newRow < 0) {\n          // Wrap to last item of previous column\n          newRow = COLOR_GROUP_SIZE - 1;\n          newCol = (col - 1 + COLOR_GROUPS) % COLOR_GROUPS;\n        }\n        newIndex = newRow * COLOR_GROUPS + newCol;\n        if (newIndex >= totalColors) {\n          newIndex = totalColors - 1; // Wrap to last item\n        }\n\n        break;\n      }\n    }\n\n    return newIndex;\n  }\n\n  /**\n   * Handle keyboard navigation within the color picker.\n   * Arrow keys move focus in the expected direction, wrapping around edges. The grid is navigated in row-major order.\n   */\n  @Listen(\"keydown\")\n  handleKeyDown(event: KeyboardEvent): void {\n    const target = event.composedPath()[0] as HTMLElement;\n    if (!target.dataset.color) {\n      return;\n    }\n\n    const currentIndex = this.colorButtons.indexOf(target as HTMLButtonElement);\n    const totalColors = this.colorButtons.length;\n    if (currentIndex < 0 || ![\"ArrowRight\", \"ArrowLeft\", \"ArrowDown\", \"ArrowUp\"].includes(event.key)) {\n      return;\n    }\n\n    let newIndex = currentIndex;\n    let attempts = 0;\n\n    do {\n      newIndex = this.getNextIndexByKey(newIndex, event.key, totalColors);\n      attempts++;\n    } while (attempts < totalColors && this.colorButtons[newIndex]?.disabled);\n\n    if (\n      newIndex !== currentIndex &&\n      newIndex >= 0 &&\n      newIndex < totalColors &&\n      !this.colorButtons[newIndex]?.disabled\n    ) {\n      this.moveFocusTo(newIndex);\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n  /**\n   * When focus leaves the color picker (e.g. user tabs away), reset all buttons to non-tabbable and make the container tabbable again.\n   */\n  @Listen(\"blur\")\n  handleBlur(event: FocusEvent): void {\n    const relatedTarget = event.relatedTarget as HTMLElement;\n    if (!containsElement(this.host, relatedTarget)) {\n      this.host.tabIndex = 0;\n      this.colorButtons.forEach((btn) => (btn.tabIndex = -1));\n    }\n  }\n\n  componentWillLoad(): void {\n    this.colorKeysByRow = this.sortColorKeysByRow();\n  }\n\n  render(): HTMLZColorPickerElement {\n    return (\n      <Host\n        role=\"listbox\"\n        aria-label={this.htmlAriaLabel || LOCALES[this.lng][\"Select a color\"]}\n        tabIndex={0}\n      >\n        {this.colorKeysByRow.map((colorKey: ColorPickerPalette) => (\n          <button\n            class=\"color-swatch\"\n            data-color={colorKey}\n            role=\"option\"\n            aria-selected={this.selectedColor?.toUpperCase() === colorKey.toUpperCase() ? \"true\" : \"false\"}\n            tabIndex={-1}\n            onClick={() => (this.selectedColor = colorKey)}\n            disabled={this.disableTransparent && colorKey === \"#FFFFFF00\"}\n          >\n            <div\n              class=\"color-swatch\"\n              role=\"img\"\n              aria-roledescription={LOCALES[this.lng][\"Color swatch\"]}\n              aria-label={ColorPickerPalette[colorKey][this.lng]}\n              title={ColorPickerPalette[colorKey][this.lng]}\n              style={{backgroundColor: colorKey}}\n            ></div>\n          </button>\n        ))}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/z-combobox.entry.js

@@ -1,9 +1,9 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-c8ceadeb.js';
-import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-2a6324f8.js';
-import { r as randomId, d as handleKeyboardSubmit } from './utils-e66d94c3.js';
+import { I as InputType, e as ControlSize, i as ListSize, g as KeyboardCode, l as ListDividerType } from './index-106473a8.js';
+import { r as randomId, e as getPlainText } from './utils-8d6ca808.js';
 import './breakpoints-d148bfde.js';
 
-const stylesCss = ".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;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
+const stylesCss = ".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;color:var(--color-form-default-text);fill:var(--color-form-default-icon);font-family:var(--font-family-sans)}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--color-form-surface04);margin:0;background-color:var(--color-form-background);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--color-form-surface04);outline-offset:-2px}:host>div>div.header:focus:focus-visible{z-index:16;box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>span.body-3>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(360deg);transition:all 200ms linear}:host>div>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--color-form-active-primary);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-form-disabled03);fill:var(--color-form-disabled01-icon)}:host>div.disabled .header>span.body-3{color:var(--color-form-disabled03)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-form-disabled01-icon)}:host>div.open>.header>z-icon{fill:var(--color-form-default-icon);transform:rotate(180deg);transition:all 200ms linear}:host>div>div.open-combo-data{display:none}:host>div.open>div.open-combo-data{position:relative;z-index:12;display:block;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--color-form-surface03);border-top:0;background-color:var(--color-form-background);border-radius:0;box-shadow:var(--shadow-2)}:host .open .open-combo-data z-input .z-label{color:var(--color-form-default-text)}:host>div.open>div.open-combo-data>div>div{overflow:auto;max-height:235px;padding:0;padding-left:var(--space-unit);margin-left:calc(var(--space-unit) * -1);}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>div>ul{max-height:235px;padding:0 calc(var(--space-unit) * 0.5);margin:0}:host .open-combo-data z-list-element{--background-color-list-element:var(--color-form-background);--background-hover-color-list-element:var(--color-form-surface03);--background-active-color-list-element:var(--color-form-surface03)}:host .open-combo-data z-list-element[disabled]{pointer-events:none}:host .open-combo-data z-list-element .option-wrap{display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:var(--space-unit)}:host .open-combo-data z-list-element[size=\"medium\"] .option-wrap,:host .open-combo-data z-list-element[size=\"small\"] .option-wrap{--z-icon-width:16px;--z-icon-height:16px;font-size:var(--font-size-2);gap:calc(var(--space-unit) / 2)}:host .open-combo-data z-list-element .option-wrap>z-icon{fill:var(--color-primary01)}:host .open-combo-data z-list-element[disabled] .option-wrap>z-icon{fill:var(--color-disabled01)}:host .open-combo-data z-list-element .option-wrap>z-icon.focused{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary);outline:none}:host .open-combo-data z-list-element .option-wrap>[role=\"option\"]:focus,:host .open-combo-data z-list-element .option-wrap>[role=\"option\"]:focus-visible{outline:none}::-webkit-scrollbar{width:6px;background:linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px)}::-webkit-scrollbar-thumb{background-color:var(--color-primary01)}::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}@supports not selector(::-webkit-scrollbar-track){:host{scrollbar-color:var(--color-primary01) transparent}}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--color-form-active-primary)}:host>div.open>div.open-combo-data>div>div.search{overflow:hidden;max-height:none;margin-top:0}:host>div.open>div.open-combo-data>div>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host .open .open-combo-data .search .no-results{display:flex;align-items:center;column-gap:var(--space-unit)}:host>.open>.open-combo-data .search .close-search{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div>div.search .close-search>a{display:inline-block;height:44px;color:var(--color-form-active-primary);cursor:pointer;font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div>div.search .close-search>a:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2)\n    calc(var(--space-unit) * 1.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);margin-left:calc(var(--space-unit) * -1);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
 const ZComboboxStyle0 = stylesCss;
 
 const ZCombobox = class {
@@ -15,9 +15,6 @@ const ZCombobox = class {
     watchSearchValue() {
         this.filterItems(this.searchValue);
     }
-    watchCheckboxes() {
-        this.checkboxes.forEach((item, index) => item.setAttribute("tabindex", index === 0 ? "0" : "-1"));
-    }
     emitComboboxChange() {
         this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
     }
@@ -43,11 +40,11 @@ const ZCombobox = class {
         this.maxcheckableitems = 0;
         this.hasgroupitems = undefined;
         this.size = ControlSize.BIG;
+        this.htmlAriaLabel = undefined;
         this.searchValue = undefined;
         this.selectedCounter = undefined;
         this.renderItemsList = [];
-        this.focusedItemId = undefined;
-        this.checkboxes = [];
+        this.focusedItemId = "";
         this.toggleComboBox = this.toggleComboBox.bind(this);
         this.closeFilterItems = this.closeFilterItems.bind(this);
     }
@@ -57,21 +54,6 @@ const ZCombobox = class {
     componentWillRender() {
         this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
     }
-    componentDidRender() {
-        const checkboxes = this.getAllCheckboxes();
-        if (JSON.stringify(checkboxes) !== JSON.stringify(this.checkboxes)) {
-            this.checkboxes = checkboxes;
-        }
-    }
-    getItemId(item) {
-        return `combo-checkbox-${this.inputid}-${item.id}`;
-    }
-    getCheckboxClass() {
-        return `combo-item-checkbox-input-${this.inputid}`;
-    }
-    getAllCheckboxes() {
-        return Array.from(this.element.shadowRoot.querySelectorAll(`.${this.getCheckboxClass()} input:not([disabled])`));
-    }
     getControlToListSize() {
         switch (this.size) {
             case ControlSize.X_SMALL:
@@ -82,52 +64,111 @@ const ZCombobox = class {
                 return ListSize.LARGE;
         }
     }
-    handleSelectArrowsNavigation(e, currId) {
-        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.key) || !this.isopen) {
+    getOptionId(itemId) {
+        return `${this.inputid}-option-${itemId}`;
+    }
+    getCheckAllOptionId() {
+        return `${this.inputid}-check-all`;
+    }
+    allOptionsSelected() {
+        return this.selectedCounter === this.itemsList.length;
+    }
+    hasReachedMaxSelections() {
+        return !!(this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems);
+    }
+    handleHeaderKeyDown(e) {
+        if (e.code === KeyboardCode.ENTER && !this.focusedItemId) {
+            this.toggleComboBox();
+        }
+        if (!this.isopen || this.hassearch) {
+            return;
+        }
+        switch (e.code) {
+            case KeyboardCode.SPACE:
+            case KeyboardCode.ENTER:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                }
+                break;
+            case KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                }
+                break;
+            case KeyboardCode.ARROW_DOWN:
+            case KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+        }
+    }
+    handleInputKeyDown(e) {
+        switch (e.code) {
+            case KeyboardCode.ENTER:
+            case KeyboardCode.SPACE:
+                if (this.focusedItemId) {
+                    e.preventDefault();
+                    this.checkOption(this.focusedItemId);
+                    break;
+                }
+                break;
+            case KeyboardCode.ARROW_DOWN:
+            case KeyboardCode.ARROW_UP:
+                this.handleArrowsNavigation(e);
+                break;
+            case KeyboardCode.ESC:
+                if (this.focusedItemId) {
+                    this.focusedItemId = "";
+                    break;
+                }
+                this.closeFilterItems();
+                break;
+            case KeyboardCode.TAB:
+                this.focusedItemId = "";
+                break;
+        }
+    }
+    checkOption(optionId) {
+        if (optionId === this.getCheckAllOptionId()) {
+            this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: !this.allOptionsSelected() })));
+            this.focusedItemId = this.getCheckAllOptionId();
+        }
+        else {
+            this.itemsList = this.itemsList.map((i) => {
+                if (optionId === this.getOptionId(i.id)) {
+                    i.checked = !i.checked;
+                }
+                return i;
+            });
+        }
+        this.updateRenderItemsList();
+        this.emitComboboxChange();
+    }
+    handleArrowsNavigation(e) {
+        if (![KeyboardCode.ARROW_DOWN, KeyboardCode.ARROW_UP].includes(e.code) || !this.isopen) {
             return;
         }
         e.preventDefault();
         e.stopPropagation();
-        const currElem = this.element.shadowRoot.querySelector(`#${currId}`);
-        const checkboxes = this.checkboxes;
-        if (!checkboxes.length) {
+        const currElem = this.focusedItemId ? this.element.shadowRoot.querySelector(`#${this.focusedItemId}`) : null;
+        const options = Array.from(this.element.shadowRoot.querySelectorAll('[role="option"]'));
+        if (!options.length) {
             return;
         }
-        const currElemIndex = currElem ? checkboxes.indexOf(currElem) : null;
+        const currElemIndex = currElem ? options.indexOf(currElem) : null;
         const firstElemIndex = 0;
-        const lastElemIndex = checkboxes.length - 1;
+        const lastElemIndex = options.length - 1;
         let nextElem = null;
-        if (e.key === KeyboardCode.ARROW_DOWN) {
+        if (e.code === KeyboardCode.ARROW_DOWN) {
             nextElem =
-                currElemIndex === null || currElemIndex === lastElemIndex
-                    ? checkboxes[firstElemIndex]
-                    : checkboxes[currElemIndex + 1];
+                currElemIndex === null ? options[firstElemIndex] : options[currElemIndex + 1] || options[lastElemIndex];
         }
-        else if (e.key === KeyboardCode.ARROW_UP) {
+        else if (e.code === KeyboardCode.ARROW_UP) {
             nextElem =
-                currElemIndex === null || currElemIndex === firstElemIndex
-                    ? checkboxes[lastElemIndex]
-                    : checkboxes[currElemIndex - 1];
-        }
-        this.focusComboboxItem(nextElem);
-    }
-    handleHeaderKeyboardEvent(ev) {
-        if (ev.key === KeyboardCode.SPACE) {
-            ev.preventDefault();
+                currElemIndex === null ? options[lastElemIndex] : options[currElemIndex - 1] || options[firstElemIndex];
         }
-        if ((ev.key === KeyboardCode.ARROW_DOWN && !this.isopen) || (ev.key === KeyboardCode.ARROW_UP && this.isopen)) {
-            this.toggleComboBox();
-        }
-    }
-    handleCheckboxFocus(id) {
-        this.focusedItemId = id;
-    }
-    focusComboboxItem(elem) {
-        this.checkboxes.forEach(function (item) {
-            item.setAttribute("tabindex", "-1");
-        });
-        elem.setAttribute("tabindex", "0");
-        elem.focus();
+        this.focusedItemId = nextElem.id;
+        nextElem.scrollIntoView({ block: "center" });
     }
     updateRenderItemsList() {
         if (this.searchValue) {
@@ -161,11 +202,6 @@ const ZCombobox = class {
             return start >= 0;
         });
     }
-    checkAll(checked = true) {
-        this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
-        this.resetRenderItemsList();
-        this.emitComboboxChange();
-    }
     closeFilterItems() {
         this.searchValue = "";
         this.resetRenderItemsList();
@@ -175,12 +211,14 @@ const ZCombobox = class {
     }
     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,
                 "html-aria-expanded": ariaExpanded,
                 "html-aria-activedescendant": ariaActivedescendant,
                 "html-aria-controls": ariaControls,
@@ -188,36 +226,33 @@ const ZCombobox = class {
         }
         return {
             "role": role,
+            "aria-label": ariaLabel,
             "aria-expanded": ariaExpanded,
             "aria-activedescendant": ariaActivedescendant,
             "aria-controls": ariaControls,
         };
     }
     renderHeader() {
-        return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-                this.handleHeaderKeyboardEvent(ev);
-            }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0, "aria-controls": "open-combo-data", "aria-expanded": this.isopen ? "true" : "false" }, h("span", { class: "body-3" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", class: this.size })));
+        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 })));
     }
     renderContent() {
-        return (h("div", { id: "open-combo-data", class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), !this.hassearch ? h("span", Object.assign({}, this.getComboboxA11yAttributes(false))) : null, h("div", { role: "listbox", "aria-label": this.label, "aria-multiselectable": "true", id: `${this.inputid}_list`, "aria-owns": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
+        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": Array.from(this.element.shadowRoot.querySelectorAll("[role='option']"))
                 .map((item) => item.id)
-                .join(" ") }, this.hascheckall && this.renderCheckAll(), this.renderItems())));
+                .join(" ") }, this.renderItems())));
     }
     renderItems() {
         return (h("div", { class: this.searchValue && "search", tabIndex: -1, role: "presentation" }, this.renderList(this.renderItemsList)));
     }
     renderItem(item, index, length) {
-        const isDisabled = !item.checked && this.maxcheckableitems && this.selectedCounter >= this.maxcheckableitems;
-        return (h("z-list-element", { id: `option-${item.id}`, htmlTabindex: null, dividerType: index !== length - 1 ? ListDividerType.ELEMENT : ListDividerType.NONE, size: this.getControlToListSize(), role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false" }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: this.getItemId(item), label: item.name, class: this.getCheckboxClass(), disabled: isDisabled, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, this.getItemId(item)), onInputCheck: (e) => {
-                this.itemsList = this.itemsList.map((i) => {
-                    if (item.id === i.id) {
-                        i.checked = e.detail.checked;
-                    }
-                    return i;
-                });
-                this.updateRenderItemsList();
-                this.emitComboboxChange();
-            }, onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
+        const optionId = this.getOptionId(item.id);
+        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 = "";
+                this.checkOption(optionId);
+            } }, h("z-icon", { name: item.checked ? "checkbox-checked" : "checkbox", class: this.focusedItemId === optionId ? "focused" : "" }), h("span", { id: optionId, role: isDisabled ? "presentation" : "option", "aria-selected": item.checked ? "true" : "false", "aria-label": getPlainText(item.name), innerHTML: item.name }))));
     }
     renderList(items) {
         if (!items) {
@@ -229,53 +264,49 @@ const ZCombobox = class {
         if (this.hasgroupitems) {
             return this.renderGroups(items);
         }
-        return (h("ul", { role: "presentation" }, items.map((item, i) => {
+        return (h("ul", { role: "presentation" }, this.renderCheckAll(), items.map((item, i) => {
             return this.renderItem(item, i, items.length);
         })));
     }
     renderGroups(items) {
         const newData = items.reduce((group, item, index) => {
             var _a;
-            const { category } = item;
+            const category = item.category || "Altra categoria";
             const zListItem = this.renderItem(item, index, items.length);
             group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
             group[category].push(zListItem);
             return group;
         }, {});
-        const listGroups = Object.entries(newData).map(([key, value]) => {
-            return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
+        const listGroups = Object.entries(newData).map(([key, value], index) => {
+            return (h("z-list-group", { size: this.getControlToListSize(), "divider-type": ListDividerType.ELEMENT, ariaLabelledby: `${this.inputid}_list_group_${index}` }, h("span", { class: "body-3-sb z-list-group-title", slot: "header-title", id: `${this.inputid}_list_group_${index}`, "aria-hidden": "true" }, key), value.map((item) => item)));
         });
-        return h("ul", { role: "presentation" }, listGroups);
+        return (h("ul", { role: "presentation" }, this.renderCheckAll(), listGroups));
     }
     renderNoSearchResults() {
         return (h("div", { class: "no-results" }, h("span", null, this.noresultslabel)));
     }
     renderSearchInput() {
-        return (h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "html-aria-autocomplete": "list" }, this.getComboboxA11yAttributes(true), { onKeyUp: (e) => {
-                if (e.key === KeyboardCode.ESC) {
-                    this.closeFilterItems();
-                }
-                this.handleSelectArrowsNavigation(e);
-            }, onInputChange: (e) => {
+        return (h("z-input", Object.assign({ htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, "html-aria-autocomplete": "list" }, this.getComboboxA11yAttributes(true), { onKeyDown: (e) => this.handleInputKeyDown(e), onInputChange: (e) => {
                 this.searchValue = e.detail.value;
+                this.focusedItemId = "";
             } })));
     }
     renderCheckAll() {
-        if (this.searchValue) {
+        if (!this.hascheckall || this.searchValue) {
             return;
         }
-        const checkAllId = `combo-checkbox-${this.inputid}-check-all`;
-        const allChecked = this.selectedCounter === this.itemsList.length;
-        return (h("div", { class: "check-all-wrapper", id: "option-check-all", role: "option" }, h("z-input", { type: InputType.CHECKBOX, checked: allChecked, htmlid: checkAllId, class: this.getCheckboxClass(), label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === ControlSize.X_SMALL ? ControlSize.SMALL : this.size, onKeyDown: (e) => this.handleSelectArrowsNavigation(e, checkAllId), onInputCheck: (e) => this.checkAll(e.detail.checked), onInputFocus: (e) => this.handleCheckboxFocus(e.detail.id) })));
+        const optionId = this.getCheckAllOptionId();
+        const allChecked = this.allOptionsSelected();
+        const isDisabled = this.hasReachedMaxSelections() || (this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length);
+        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: '6cb14e4919c53bae374f2c9441b0524a06a4233d', "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: '00adbeec7501f6c4fcdb56c4ac7bd3ab911d97cb', "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
         "items": ["watchItems"],
-        "searchValue": ["watchSearchValue"],
-        "checkboxes": ["watchCheckboxes"]
+        "searchValue": ["watchSearchValue"]
     }; }
 };
 ZCombobox.style = ZComboboxStyle0;