kr-elements 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/cjs/combobox/Boolean.attribute.value.normalizer.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.toBoolean = void 0;
+exports.toBoolean = toBoolean;
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;
@@ -8,4 +9,3 @@ function toBoolean(value) {
         value = true;
     return Boolean(value);
 }
-exports.toBoolean = toBoolean;

package/dist/cjs/combobox/Combobox.markup.js

@@ -39,12 +39,15 @@ class ComboboxMarkup {
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -85,6 +88,7 @@ class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -96,6 +100,7 @@ class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";

package/dist/cjs/combobox/HTML.combobox.element.js

@@ -1,4 +1,5 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxElement = void 0;
 const Combobox_markup_js_1 = require("./Combobox.markup.js");
@@ -22,14 +23,15 @@ class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
         this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.internals);
         this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
-        this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
+        this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
     }
+    // Lifecycle callbacks
     connectedCallback() {
         this.#markup.connect();
         this.#initialAttributesSynchronization();
         this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
-        this.#observer.observe(this, HTMLComboboxElement.observerOptions);
+        this.#observer.observe(this, _a.observerOptions);
         this.#markup.clearAllButton.addEventListener('click', this.#onClickClearAllButton);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
     }
@@ -47,6 +49,8 @@ class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -59,6 +63,7 @@ class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -154,23 +159,24 @@ class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
             return;
         }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, value);
             return;
         }
         super.setAttribute(name, value);
     }
     removeAttribute(name) {
-        if (HTMLComboboxElement.booleanAttributes.has(name)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, false);
             return;
         }
-        if (HTMLComboboxElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             return;
         }
         super.removeAttribute(name);
@@ -189,6 +195,7 @@ class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {
@@ -276,11 +283,11 @@ class HTMLComboboxElement extends HTMLElement {
         }
     }
     #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxElement.booleanAttributes) {
+        for (const key of _a.booleanAttributes) {
             const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
             Reflect.set(this, key, value);
         }
-        for (const key of HTMLComboboxElement.stringAttributes) {
+        for (const key of _a.stringAttributes) {
             if (this.hasAttribute(key)) {
                 Reflect.set(this, key, this.getAttribute(key));
             }
@@ -290,17 +297,17 @@ class HTMLComboboxElement extends HTMLElement {
     }
     static loadCssFromDocumentStyleSheets() {
         if (document.readyState === 'complete') {
-            HTMLComboboxElement.#loadDocumentStyleSheets();
+            _a.#loadDocumentStyleSheets();
         }
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', HTMLComboboxElement.#loadDocumentStyleSheets);
+            document.addEventListener('DOMContentLoaded', _a.#loadDocumentStyleSheets);
         }
         if (document.readyState === 'interactive') {
-            queueMicrotask(HTMLComboboxElement.#loadDocumentStyleSheets);
+            queueMicrotask(_a.#loadDocumentStyleSheets);
         }
     }
     static #loadDocumentStyleSheets() {
-        const [innerSheet] = HTMLComboboxElement.styleSheet;
+        const [innerSheet] = _a.styleSheet;
         for (const outerSheet of document.styleSheets) {
             for (const rule of outerSheet.cssRules) {
                 innerSheet.insertRule(rule.cssText, innerSheet.cssRules.length);
@@ -309,6 +316,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
 }
 exports.HTMLComboboxElement = HTMLComboboxElement;
+_a = HTMLComboboxElement;
 document.addEventListener('keypress', (event) => {
     if (document.activeElement instanceof HTMLComboboxElement) {
         if (document.activeElement.shadowRoot.activeElement instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {

package/dist/cjs/combobox/HTML.combobox.option.element.js

@@ -1,4 +1,5 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxOptionElement = void 0;
 const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.value.normalizer.js");
@@ -35,11 +36,11 @@ class HTMLComboboxOptionElement extends HTMLElement {
         super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     #initialAttributesSynchronization() {
-        for (const key of HTMLComboboxOptionElement.booleanAttributes) {
+        for (const key of _a.booleanAttributes) {
             const value = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(this.getAttribute(key));
             Reflect.set(this, key, value);
         }
-        for (const key of HTMLComboboxOptionElement.stringAttributes) {
+        for (const key of _a.stringAttributes) {
             Reflect.set(this, key, this.getAttribute(key));
         }
     }
@@ -68,28 +69,29 @@ class HTMLComboboxOptionElement extends HTMLElement {
         throw new TypeError('Invalid value');
     }
     setAttribute(name, value) {
-        if (HTMLComboboxOptionElement.booleanAttributes.has(name)) {
+        if (_a.booleanAttributes.has(name)) {
             Reflect.set(this, name, (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
             return;
         }
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, value);
             return;
         }
         super.setAttribute(name, value);
     }
     removeAttribute(name) {
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             Reflect.set(this, name, false);
             return;
         }
-        if (HTMLComboboxOptionElement.stringAttributes.has(name)) {
+        if (_a.stringAttributes.has(name)) {
             return;
         }
         super.removeAttribute(name);
     }
 }
 exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
+_a = HTMLComboboxOptionElement;
 if (!window.customElements.get('box-option')) {
     window.customElements.define('box-option', HTMLComboboxOptionElement);
 }

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./combobox/index.js"), exports);

package/dist/cjs/tsconfig.cjs.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/esm/combobox/Boolean.attribute.value.normalizer.js

@@ -1,3 +1,4 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;

package/dist/esm/combobox/Combobox.markup.js

@@ -36,12 +36,15 @@ export class ComboboxMarkup {
         this.optionsContainer.querySelectorAll('box-option')
             .forEach(option => {
             if (query === '') {
+                // option.style.order = "unset";
                 option.style.display = "initial";
             }
             else if (!regex.test(option.label)) {
+                // option.style.order = "-1";
                 option.style.display = "none";
             }
             else {
+                // option.style.order = "unset";
                 option.style.order = "initial";
             }
         });
@@ -82,6 +85,7 @@ export class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
+            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -93,6 +97,7 @@ export class ComboboxMarkup {
         if (event.composedPath().includes(this.#shadowRoot.host))
             return;
         try {
+            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";

package/dist/esm/combobox/HTML.combobox.element.js

@@ -22,6 +22,7 @@ export class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
     }
+    // Lifecycle callbacks
     connectedCallback() {
         this.#markup.connect();
         this.#initialAttributesSynchronization();
@@ -44,6 +45,8 @@ export class HTMLComboboxElement extends HTMLElement {
     formDisabledCallback(isDisabled) {
         this.disabled = isDisabled;
     }
+    // Instance properties
+    // readonly
     get valueAsArray() {
         return Array.from(this.#values);
     }
@@ -56,6 +59,7 @@ export class HTMLComboboxElement extends HTMLElement {
     get willValidate() {
         return this.internals.willValidate;
     }
+    // configurable
     get value() {
         return this.valueAsArray.join(',');
     }
@@ -151,6 +155,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.#markup.searchInput.placeholder = value;
         }
     }
+    // Instance methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.booleanAttributes.has(name)) {
             Reflect.set(this, name, toBoolean(value));
@@ -186,6 +191,7 @@ export class HTMLComboboxElement extends HTMLElement {
             this.internals.setValidity({ customError: true }, message);
         }
     }
+    // Internal
     #onInput = (event) => {
         if (this.filterable) {
             if (event.target && event.target instanceof HTMLInputElement) {

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './combobox/index.js';

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts

@@ -1 +1,3 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
 export declare function toBoolean(value: any): boolean;
+//# sourceMappingURL=Boolean.attribute.value.normalizer.d.ts.map

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Boolean.attribute.value.normalizer.d.ts","sourceRoot":"","sources":["../../../src/combobox/Boolean.attribute.value.normalizer.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,WAInC"}

package/dist/types/combobox/Combobox.markup.d.ts

@@ -24,3 +24,4 @@ export declare class ComboboxMarkup {
     get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
     static get template(): string;
 }
+//# sourceMappingURL=Combobox.markup.d.ts.map

package/dist/types/combobox/Combobox.markup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAE5C,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAcP,IAAI,CAAC,KAAK,EAAE,MAAM;IAiBlB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAUX;IAED,YAAY,GAAI,OAAO,KAAK,UAU3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAqBpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,WAAW,2BAQd;IAGD,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAmLlB;CACF"}

package/dist/types/combobox/HTML.combobox.element.d.ts

@@ -47,3 +47,4 @@ export declare class HTMLComboboxElement extends HTMLElement {
     static staticLoadCssByUrls(urls: string[]): void;
     static loadCssFromDocumentStyleSheets(): void;
 }
+//# sourceMappingURL=HTML.combobox.element.d.ts.map

package/dist/types/combobox/HTML.combobox.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAG9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,gBAAgB,cAAgD;IACvE,MAAM,CAAC,iBAAiB,cAA4F;IACpH,MAAM,CAAC,eAAe;;;;MAA0D;IAChF,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;;IAkBvB,iBAAiB;IASjB,oBAAoB;IAKpB,iBAAiB;IAQjB,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAMxC,IAAI,YAAY,aAEf;IACD,IAAI,eAAe,0CAElB;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,YAAY,YAEf;IAGD,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAgCtB;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAMpB;IAID,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAYrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAW5B,cAAc;IAId,aAAa;IAIb,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAgHjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}

package/dist/types/combobox/HTML.combobox.option.element.d.ts

@@ -12,3 +12,4 @@ export declare class HTMLComboboxOptionElement extends HTMLElement {
     setAttribute(name: string, value: string): void;
     removeAttribute(name: string): void;
 }
+//# sourceMappingURL=HTML.combobox.option.element.d.ts.map

package/dist/types/combobox/HTML.combobox.option.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,iBAAiB,cAAyB;IACjD,MAAM,CAAC,gBAAgB,cAA+B;IAEtD,iBAAiB;IAUjB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAoCD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAYxC,eAAe,CAAC,IAAI,EAAE,MAAM;CAU7B"}

package/dist/types/combobox/HTML.combobox.tag.element.d.ts

@@ -1,3 +1,4 @@
 export declare class HTMLComboboxTagElement extends HTMLElement {
     connectedCallback(): void;
 }
+//# sourceMappingURL=HTML.combobox.tag.element.d.ts.map

package/dist/types/combobox/HTML.combobox.tag.element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.combobox.tag.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.tag.element.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,iBAAiB;CAalB"}

package/dist/types/combobox/index.d.ts

@@ -1,61 +1,2 @@
-interface HTMLComboboxTagElement extends HTMLElement {
-}
-interface HTMLComboboxOptionElement extends HTMLOptionElement {
-    value: string;
-    label: string;
-}
-interface HTMLComboboxElement extends HTMLSelectElement {
-    query: string;
-    valueAsArray: string[];
-    placeholder: string;
-    clearable?: boolean;
-    searchable?: boolean;
-    filterable?: boolean;
-    selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
-    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    onchange: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
-    oninput: ((this: HTMLComboboxElement, ev: ComboboxInputEvent) => any) | null;
-    oninvalid: ((this: HTMLComboboxElement, ev: ComboboxEvent) => any) | null;
-}
-interface ComboboxEvent extends Event {
-    readonly target: HTMLComboboxElement;
-    readonly currentTarget: HTMLComboboxElement;
-}
-interface ComboboxInputEvent extends InputEvent {
-    readonly target: HTMLComboboxElement;
-    readonly currentTarget: HTMLComboboxElement;
-}
-interface ComboboxFocusEvent extends FocusEvent {
-    readonly target: HTMLComboboxElement;
-}
-interface ComboboxEventMap extends HTMLElementEventMap {
-    "change": ComboboxEvent;
-    "blur": ComboboxFocusEvent;
-    "focus": ComboboxFocusEvent;
-    "focusin": ComboboxFocusEvent;
-    "focusout": ComboboxFocusEvent;
-    "input": ComboboxInputEvent;
-    "invalid": ComboboxEvent;
-    "selectionchange": ComboboxEvent;
-    "selectstart": ComboboxEvent;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'combo-box': HTMLComboboxElement;
-        'box-option': HTMLComboboxOptionElement;
-        'box-tag': HTMLComboboxTagElement;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'combo-box': HTMLComboboxElement;
-            'box-option': HTMLComboboxOptionElement;
-            'box-tag': HTMLComboboxTagElement;
-        }
-    }
-}
 export * from './HTML.combobox.element.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/types/index.d.ts

@@ -0,0 +1,134 @@
+export * from './combobox/index.js';
+interface HTMLComboboxTagElement extends HTMLElement {
+}
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+    value: string;
+    label: string;
+}
+interface HTMLComboboxElement extends HTMLSelectElement {
+    /** List of selected options value attribute */
+    valueAsArray: string[];
+    multiple: boolean;
+    /** The value of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+    query: string;
+    /** The placeholder of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented
+     *
+     * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+     * */
+    placeholder: string;
+    /** When is true, the clear-all-button is shown in the <combo-box> itself,
+     * and the clear-button is shown for each selected tag.
+     *
+     * If multiple attribute is set to "true", this is also enabled.
+     *
+     * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+     * then setting this attribute to "true" will make the clear-button of selected tag visible
+     * */
+    clearable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are not filtered by this query.
+     * You have to set an "input" listener to the <combo-box> and filter options by yourself
+     *
+     * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+     * */
+    searchable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are filtered by this query.
+     *
+     * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+     * */
+    filterable: boolean;
+    selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+interface ComboboxEvent extends Event {
+    readonly target: HTMLComboboxElement;
+    readonly currentTarget: HTMLComboboxElement;
+}
+interface ComboboxInputEvent extends InputEvent {
+    readonly target: HTMLComboboxElement;
+    readonly currentTarget: HTMLComboboxElement;
+}
+interface ComboboxFocusEvent extends FocusEvent {
+    readonly target: HTMLComboboxElement;
+}
+interface ComboboxEventMap extends HTMLElementEventMap {
+    "change": ComboboxEvent;
+    "blur": ComboboxFocusEvent;
+    "focus": ComboboxFocusEvent;
+    "focusin": ComboboxFocusEvent;
+    "focusout": ComboboxFocusEvent;
+    "input": ComboboxInputEvent;
+    "invalid": ComboboxEvent;
+    "selectionchange": ComboboxEvent;
+    "selectstart": ComboboxEvent;
+}
+interface ComboboxJsxAttributes {
+    /** The value of the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * Setting ""
+     * */
+    query?: string;
+    /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+     *
+     * When the `multiple` attribute is present, only the first option will be selected.
+     *
+     * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+    value?: string;
+    /** This Boolean attribute indicates that multiple options can be selected.
+     *
+     * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+    multiple?: boolean;
+    /** The placeholder for the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+    placeholder?: string;
+    /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+     *
+     * This attribute is automatically enabled when the `multiple` attribute is present.
+     *
+     * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+    clearable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+     *
+     * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+    searchable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are filtered by the query automatically.
+     *
+     * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+    filterable?: boolean;
+    /** A Boolean attribute indicating that at least one option must be selected. */
+    required?: boolean;
+    disabled?: boolean;
+}
+declare global {
+    namespace React {
+        namespace JSX {
+            interface IntrinsicElements {
+                'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>, HTMLComboboxElement> & ComboboxJsxAttributes;
+                'box-option': HTMLComboboxOptionElement;
+                'box-tag': HTMLComboboxTagElement;
+            }
+        }
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/types/tsconfig.types.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

package/dist/types/types.d.ts

@@ -0,0 +1,198 @@
+interface HTMLComboboxTagElement extends HTMLElement {}
+
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+  value: string
+  label: string
+}
+
+interface HTMLComboboxElement extends HTMLSelectElement {
+  /** List of selected options value attribute */
+  valueAsArray: string[];
+
+  multiple: boolean;
+
+  /** The value of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+  query: string;
+
+  /** The placeholder of internal input
+   *
+   * Internal input is visible when either "searchable" or "filterable" attribute is presented
+   *
+   * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+   * */
+  placeholder: string;
+
+  /** When is true, the clear-all-button is shown in the <combo-box> itself,
+   * and the clear-button is shown for each selected tag.
+   *
+   * If multiple attribute is set to "true", this is also enabled.
+   *
+   * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+   * then setting this attribute to "true" will make the clear-button of selected tag visible
+   * */
+  clearable: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are not filtered by this query.
+   * You have to set an "input" listener to the <combo-box> and filter options by yourself
+   *
+   * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+   * */
+  searchable: boolean;
+
+  /** When is true, the internal input is shown.
+   *
+   * When user type something, available options are filtered by this query.
+   *
+   * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+   * */
+  filterable: boolean;
+
+  selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+
+
+  // For standard events - let TypeScript infer correctly
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // For your custom events
+  addEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Fallback
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  // Similar for removeEventListener
+  removeEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener<K extends keyof ComboboxEventMap>(
+    type: K,
+    listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any,
+    options?: boolean | EventListenerOptions
+  ): void;
+
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+interface ComboboxEvent extends Event {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxInputEvent extends InputEvent {
+  readonly target: HTMLComboboxElement;
+  readonly currentTarget: HTMLComboboxElement;
+}
+
+interface ComboboxFocusEvent extends FocusEvent {
+  readonly target: HTMLComboboxElement;
+}
+
+interface ComboboxEventMap extends HTMLElementEventMap {
+  "change": ComboboxEvent;
+  "blur": ComboboxFocusEvent;
+  "focus": ComboboxFocusEvent;
+  "focusin": ComboboxFocusEvent;
+  "focusout": ComboboxFocusEvent;
+  "input": ComboboxInputEvent;
+  "invalid": ComboboxEvent;
+  // "select": ComboboxEvent;
+  "selectionchange": ComboboxEvent;
+  "selectstart": ComboboxEvent;
+}
+
+interface HTMLElementTagNameMap {
+  'combo-box': HTMLComboboxElement;
+  'box-option': HTMLComboboxOptionElement;
+  'box-tag': HTMLComboboxTagElement;
+}
+
+interface ComboboxJsxAttributes {
+  /** The value of the internal input.
+   *
+   * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+   *
+   * Setting ""
+   * */
+  query?: string;
+
+  /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+   *
+   * When the `multiple` attribute is present, only the first option will be selected.
+   *
+   * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+  value?: string;
+
+  /** This Boolean attribute indicates that multiple options can be selected.
+   *
+   * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+  multiple?: boolean;
+
+  /** The placeholder for the internal input.
+   *
+   * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+   *
+   * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+  placeholder?: string;
+
+  /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+   *
+   * This attribute is automatically enabled when the `multiple` attribute is present.
+   *
+   * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+  clearable?: boolean;
+
+  /** When present, the internal input is shown.
+   *
+   * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+   *
+   * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+  searchable?: boolean;
+
+  /** When present, the internal input is shown.
+   *
+   * As the user types, available options are filtered by the query automatically.
+   *
+   * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+  filterable?: boolean;
+
+  /** A Boolean attribute indicating that at least one option must be selected. */
+  required?: boolean;
+
+  disabled?: boolean;
+}
+
+declare namespace React {
+  namespace JSX {
+    interface IntrinsicElements {
+      // @ts-ignore
+      'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
+        HTMLComboboxElement
+      > & ComboboxJsxAttributes;
+
+      'box-option': HTMLComboboxOptionElement;
+      'box-tag': HTMLComboboxTagElement;
+    }
+  }
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.11",
+  "version": "0.0.1-alpha.13",
   "description": "Custom elements",
   "type": "module",
   "scripts": {
     "prepare": "husky",
     "clean": "rm -rf dist",
-    "build:combobox": "tsc -b configs/combobox.tsconfig.cjs.json configs/combobox.tsconfig.esm.json configs/combobox.tsconfig.types.json",
+    "build:combobox": "tsc -b configs/tsconfig.cjs.json configs/tsconfig.esm.json configs/tsconfig.types.json",
     "generate": "node --import tsx ./scripts/genPackageFiles.ts",
     "build": "npm-run-all clean build:combobox generate",
     "check-types": "tsc --noEmit"
@@ -30,22 +30,14 @@
     "react": "^19.2.4",
     "solid": "^0.2.1",
     "tsx": "^4.19.2",
-    "typescript": "latest",
+    "typescript": "5.9.3",
     "xml-splitter": "1.2.1"
   },
   "sideEffect": false,
   "files": [
     "dist"
   ],
-  "exports": {
-    "./combobox": {
-      "types": "./dist/types/combobox/index.d.ts",
-      "require": "./dist/cjs/combobox/index.js",
-      "import": "./dist/esm/combobox/index.js"
-    }
-  },
-  "main": "dist/cjs/combobox/index.js",
-  "module": "dist/esm/combobox/index.js",
-  "types": "dist/types/combobox/index.d.ts",
-  "combobox": "dist/cjs/combobox/index.js"
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts"
 }