blue-web 1.20.0 → 1.21.1

package/dist/js/odometer.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var t={};t.d=(e,n)=>{for(var i in n)t.o(n,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:n[i]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class e extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){var t,e,n;super(),t=this,n=!1,(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var n=e.call(t,"string");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e="_initialized"))in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const t=document.createElement("style");t.textContent="\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n          transition: background-color 0.3s;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";const e=document.createElement("span");e.classList.add("numbers"),e.setAttribute("aria-hidden","true"),this.shadowRoot.append(t,e),this.wrapper=e,this.rebuildNumbers()}rebuildNumbers(){this.wrapper.innerHTML="";const t=this.max;for(let e=0;e<=t;e++){const t=document.createElement("span");t.textContent=String(e),this.wrapper.appendChild(t)}const e=document.createElement("span");e.textContent="".concat(t,"+"),this.wrapper.appendChild(e),this._initialized&&this.updateValue(this.value)}attributeChangedCallback(t,e,n){n!==e&&this._initialized&&("value"===t?this.updateValue(parseInt(null!=n?n:"0",10)):"max"===t&&this.rebuildNumbers())}updateValue(t){const e=this.max,n=t>e?e+1:Math.max(0,t),i=this.wrapper.getBoundingClientRect().height||16;this.wrapper.style.transform="translateY(-".concat(n*i,"px)");const a=t>e?"".concat(e,"+"):"".concat(t);this.setAttribute("aria-label",a)}set value(t){this.value!==t&&(this.setAttribute("value",String(t)),this._initialized&&(this.updateValue(t),this.dispatchEvent(new CustomEvent("change",{detail:{value:t},bubbles:!0,composed:!0}))))}get value(){return parseInt(this.getAttribute("value")||"0",10)||0}set max(t){this.setAttribute("max",String(t))}get max(){return parseInt(this.getAttribute("max")||"9",10)||9}}customElements.get("bl-odometer")||customElements.define("bl-odometer",e)})();
+(()=>{"use strict";var e={};function t(e,t,i){return(t=function(e){var t=function(e){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var i=t.call(e,"string");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:i,enumerable:!0,configurable:!0,writable:!0}):e[t]=i,e}e.d=(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},e.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);class i extends HTMLElement{static get observedAttributes(){return["value","max"]}constructor(){super(),t(this,"_initialized",!1),t(this,"_resetTimer",null),this.attachShadow({mode:"open"})}connectedCallback(){this._initialized||(this.setup(),this._initialized=!0,this.updateValue(this.value))}setup(){const e=document.createElement("style");e.textContent="\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform var(--bl-odometer-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";const t=document.createElement("span");t.classList.add("numbers"),t.setAttribute("aria-hidden","true"),this.shadowRoot.append(e,t),this.wrapper=t,this.rebuildNumbers()}rebuildNumbers(){this.wrapper.innerHTML="";const e=this.max;for(let t=0;t<=e;t++){const e=document.createElement("span");e.textContent=String(t),this.wrapper.appendChild(e)}const t=document.createElement("span");t.textContent="".concat(e,"+"),this.wrapper.appendChild(t),this._initialized&&this.updateValue(this.value)}attributeChangedCallback(e,t,i){if(i!==t&&this._initialized)if("value"===e){const e=parseInt(null!=t?t:"0",10)||0,n=parseInt(null!=i?i:"0",10)||0;this.applyChangeState(e,n),this.updateValue(n)}else"max"===e&&this.rebuildNumbers()}updateValue(e){const t=this.max,i=e>t?t+1:Math.max(0,e),n=this.wrapper.getBoundingClientRect().height||16;this.wrapper.style.transform="translateY(-".concat(i*n,"px)");const r=e>t?"".concat(t,"+"):"".concat(e);this.setAttribute("aria-label",r)}clearResetTimer(){null!==this._resetTimer&&(clearTimeout(this._resetTimer),this._resetTimer=null)}scheduleResetChange(){this.clearResetTimer(),this._resetTimer=window.setTimeout(()=>{this.removeAttribute("data-change"),this._resetTimer=null},3e3)}applyChangeState(e,t){t>e?(this.setAttribute("data-change","up"),this.scheduleResetChange()):t<e&&(this.setAttribute("data-change","down"),this.scheduleResetChange())}set value(e){this.value!==e&&(this.setAttribute("value",String(e)),this._initialized&&this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})))}get value(){return parseInt(this.getAttribute("value")||"0",10)||0}set max(e){this.setAttribute("max",String(e))}get max(){return parseInt(this.getAttribute("max")||"9",10)||9}}customElements.get("bl-odometer")||customElements.define("bl-odometer",i)})();

package/dist/js/odometer.d.ts

@@ -1,6 +1,16 @@
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
 declare class Odometer extends HTMLElement {
     private wrapper;
     private _initialized;
+    private _resetTimer;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
@@ -8,6 +18,9 @@ declare class Odometer extends HTMLElement {
     private rebuildNumbers;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     private updateValue;
+    private clearResetTimer;
+    private scheduleResetChange;
+    private applyChangeState;
     set value(value: number);
     get value(): number;
     set max(value: number);

package/dist/js/odometer.js

@@ -1,6 +1,15 @@
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Odometer web component for animated number display
+ *
+ * @element bl-odometer
+ * @attr {number} value - Current value to display
+ * @attr {number} max - Maximum value before showing "+"
+ * @fires change - Fired when value changes
+ * @cssprop --bl-odometer-duration - Transition duration for number animation (default: 0.4s)
+ */
 class Odometer extends HTMLElement {
   static get observedAttributes() {
     return ["value", "max"];
@@ -8,6 +17,7 @@ class Odometer extends HTMLElement {
   constructor() {
     super();
     _defineProperty(this, "_initialized", false);
+    _defineProperty(this, "_resetTimer", null);
     this.attachShadow({
       mode: "open"
     });
@@ -22,7 +32,7 @@ class Odometer extends HTMLElement {
   }
   setup() {
     const style = document.createElement("style");
-    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n          transition: background-color 0.3s;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
+    style.textContent = /* CSS */"\n        :host {\n          display: inline-flex;\n          min-width: 1em;\n          height: 1em;\n          text-align: center;\n          overflow: hidden;\n          line-height: 1em;\n        }\n        .numbers {\n          display: flex;\n          flex-direction: column;\n          transition: transform var(--bl-odometer-duration, 0.4s) cubic-bezier(0.34, 1.56, 0.64, 1);\n        }\n        .numbers span {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          height: 1em;\n        }";
     const wrapper = document.createElement("span");
     wrapper.classList.add("numbers");
     wrapper.setAttribute("aria-hidden", "true");
@@ -50,7 +60,10 @@ class Odometer extends HTMLElement {
   attributeChangedCallback(name, oldValue, newValue) {
     if (newValue !== oldValue && this._initialized) {
       if (name === "value") {
-        this.updateValue(parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10));
+        const prev = parseInt(oldValue !== null && oldValue !== void 0 ? oldValue : "0", 10) || 0;
+        const next = parseInt(newValue !== null && newValue !== void 0 ? newValue : "0", 10) || 0;
+        this.applyChangeState(prev, next);
+        this.updateValue(next);
       } else if (name === "max") {
         this.rebuildNumbers();
       }
@@ -64,12 +77,34 @@ class Odometer extends HTMLElement {
     const displayValue = value > max ? "".concat(max, "+") : "".concat(value);
     this.setAttribute("aria-label", displayValue);
   }
+  clearResetTimer() {
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+  scheduleResetChange() {
+    this.clearResetTimer();
+    const delay = 3000;
+    this._resetTimer = window.setTimeout(() => {
+      this.removeAttribute("data-change");
+      this._resetTimer = null;
+    }, delay);
+  }
+  applyChangeState(previous, next) {
+    if (next > previous) {
+      this.setAttribute("data-change", "up");
+      this.scheduleResetChange();
+    } else if (next < previous) {
+      this.setAttribute("data-change", "down");
+      this.scheduleResetChange();
+    }
+  }
   set value(value) {
     const current = this.value;
     if (current !== value) {
       this.setAttribute("value", String(value));
       if (this._initialized) {
-        this.updateValue(value);
         this.dispatchEvent(new CustomEvent("change", {
           detail: {
             value

package/dist/js/select-list.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='<slot style="border-radius: inherit"></slot>',this.activeIndex=-1,this.items=[],this.inputElement=null}connectedCallback(){this.setAttribute("role","listbox"),this.tabIndex=-1,this.updateItems();const t=this.getAttribute("for");this.inputElement=t?document.getElementById(t):null,this.inputElement&&(this.inputElement.setAttribute("role","combobox"),this.inputElement.setAttribute("aria-controls",this.id),this.inputElement.setAttribute("aria-expanded","true"),this.inputElement.addEventListener("keydown",this.onKeyDown.bind(this))),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",t=>{const e=t.target instanceof Element?t.target.closest("[data-blue-select-list-index]"):null;if(e&&e.hasAttribute("data-blue-select-list-index")){const t=Number(e.getAttribute("data-blue-select-list-index"));this.select(t)}})}updateItems(){this.items=Array.from(this.children),this.items.forEach((t,e)=>{t.hasAttribute("id")||t.setAttribute("id","".concat(this.id,"-option-").concat(e)),t.setAttribute("data-blue-select-list-index",e.toString()),t.setAttribute("aria-selected","false"),t.setAttribute("role","option"),t.tabIndex=-1})}onKeyDown(t){if(this.items.length)if("ArrowDown"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.items.length,this.updateActiveItem();else if("ArrowUp"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex-1+this.items.length)%this.items.length,this.updateActiveItem();else if("Enter"===t.key&&this.activeIndex>=0){const t=this.items[this.activeIndex];null==t||t.click()}}updateActiveItem(){this.items.forEach((t,e)=>{const i=e===this.activeIndex;t.classList.toggle("active",i),t.setAttribute("aria-selected",i.toString())});const t=this.items[this.activeIndex];t&&this.inputElement&&(this.inputElement.setAttribute("aria-activedescendant",t.id),t.scrollIntoView({block:"nearest"}))}select(t){this.activeIndex=t,this.updateActiveItem();const e=this.items[t];e&&(this.dispatchEvent(new CustomEvent("bl-select",{detail:{index:t,item:e},bubbles:!0,composed:!0})),e.click())}}customElements.define("bl-select-list",t)})();
+(()=>{"use strict";var t={};function e(t,e,i){return(e=function(t){var e=function(t){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,"string");if("object"!=typeof i)return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==typeof e?e:e+""}(e))in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}t.d=(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},t.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);class i extends Event{constructor(t,e){super(i.eventName,{bubbles:!0,composed:!0}),this.index=t,this.item=e}}e(i,"eventName","bl-select");class s extends HTMLElement{constructor(){super(),e(this,"handleChildrenChanged",()=>{var t;const e=null===(t=this.items[this.activeIndex])||void 0===t?void 0:t.id;if(this.updateItems(),e){const t=this.items.findIndex(t=>t.id===e);this.activeIndex=t>=0?t:-1}else this.activeIndex=-1;this.updateActiveItem()}),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML='<slot style="border-radius: inherit"></slot>',this.activeIndex=-1,this.items=[],this.inputElement=null,this.slotElement=null,this.observer=null}get activeClass(){return this.getAttribute("active-class")||"active"}connectedCallback(){var t,e;this.setAttribute("role","listbox"),this.tabIndex=-1,this.updateItems(),this.syncActiveIndexFromDataSelected(),this.updateActiveItem();const i=this.getAttribute("for");this.inputElement=i?document.getElementById(i):null,this.inputElement&&(this.inputElement.setAttribute("role","combobox"),this.inputElement.setAttribute("aria-controls",this.id),this.inputElement.setAttribute("aria-expanded","true"),this.inputElement.addEventListener("keydown",this.onKeyDown.bind(this))),this.addEventListener("keydown",this.onKeyDown.bind(this)),this.addEventListener("click",t=>{const e=t.target instanceof Element?t.target.closest("[data-select-list-index]"):null;if(e&&e.hasAttribute("data-select-list-index")){const t=Number(e.getAttribute("data-select-list-index"));this.select(t)}}),this.observer=new MutationObserver(t=>{t.some(t=>"childList"===t.type)&&this.handleChildrenChanged(),t.some(t=>"attributes"===t.type&&"data-selected"===t.attributeName)&&(this.syncActiveIndexFromDataSelected(),this.updateActiveItem())}),this.observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["data-selected"]}),this.slotElement=null===(t=this.shadowRoot)||void 0===t?void 0:t.querySelector("slot"),null===(e=this.slotElement)||void 0===e||e.addEventListener("slotchange",this.handleChildrenChanged)}disconnectedCallback(){var t,e;null===(t=this.observer)||void 0===t||t.disconnect(),this.observer=null,null===(e=this.slotElement)||void 0===e||e.removeEventListener("slotchange",this.handleChildrenChanged)}syncActiveIndexFromDataSelected(){const t=this.items.findIndex(t=>t.hasAttribute("data-selected"));t>=0&&(this.activeIndex=t)}updateItems(){const t=["button:not([disabled])","a[href]","input:not([disabled])","select:not([disabled])","textarea:not([disabled])",'[tabindex]:not([tabindex="-1"])','[role="option"]'].join(", ");this.items=Array.from(this.querySelectorAll(t)),this.items.forEach((t,e)=>{t.hasAttribute("id")||t.setAttribute("id","".concat(this.id,"-option-").concat(e)),t.setAttribute("data-select-list-index",e.toString()),t.setAttribute("aria-selected","false"),t.setAttribute("role","option"),t.tabIndex=-1})}onKeyDown(t){if(this.items.length)if("ArrowDown"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex+1)%this.items.length,this.updateActiveItem();else if("ArrowUp"===t.key)t.preventDefault(),this.activeIndex=(this.activeIndex-1+this.items.length)%this.items.length,this.updateActiveItem();else if("Enter"===t.key&&this.activeIndex>=0){t.preventDefault();const e=this.items[this.activeIndex];null==e||e.click()}}updateActiveItem(){const t=this.activeClass.split(" ");this.items.forEach((e,i)=>{const s=i===this.activeIndex;t.forEach(t=>{e.classList.toggle(t,s)}),e.setAttribute("aria-selected",s.toString())});const e=this.items[this.activeIndex];e&&this.inputElement?(this.inputElement.setAttribute("aria-activedescendant",e.id),e.scrollIntoView({block:"nearest"})):this.inputElement&&this.inputElement.removeAttribute("aria-activedescendant")}select(t){this.activeIndex=t,this.items.forEach(t=>t.removeAttribute("data-selected"));const e=this.items[t];e&&(e.setAttribute("data-selected",""),this.dispatchEvent(new i(t,e)),this.updateActiveItem())}}customElements.get("bl-select-list")||customElements.define("bl-select-list",s)})();

package/dist/js/select-list.d.ts

@@ -1,3 +1,9 @@
+declare class BlSelectEvent extends Event {
+    static readonly eventName = "bl-select";
+    readonly index: number;
+    readonly item: HTMLElement;
+    constructor(index: number, item: HTMLElement);
+}
 /**
  * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
  * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
@@ -5,22 +11,29 @@
  *
  * The Web Component will automatically set attributes for accessibility.
  *
- * @element blue-select-list
+ * @element bl-select-list
  * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
  * @slot - The list options.
  * @example
  * <input id="my-input" />
- * <blue-select-list for="my-input">
+ * <bl-select-list for="my-input">
  *   <div>Option 1</div>
  *   <div>Option 2</div>
- * </blue-select-list>
+ * </bl-select-list>
  */
-export declare class SelectList extends HTMLElement {
+declare class SelectList extends HTMLElement {
     activeIndex: number;
     items: HTMLElement[];
     inputElement: HTMLElement | null;
+    slotElement: HTMLSlotElement | null;
+    observer: MutationObserver | null;
     constructor();
+    get activeClass(): string;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleChildrenChanged: () => void;
+    syncActiveIndexFromDataSelected(): void;
     updateItems(): void;
     onKeyDown(e: {
         key: string;
@@ -29,3 +42,5 @@ export declare class SelectList extends HTMLElement {
     updateActiveItem(): void;
     select(index: number): void;
 }
+export { SelectList, BlSelectEvent };
+export default SelectList;

package/dist/js/select-list.js

@@ -1,3 +1,17 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+class BlSelectEvent extends Event {
+  constructor(index, item) {
+    super(BlSelectEvent.eventName, {
+      bubbles: true,
+      composed: true
+    });
+    this.index = index;
+    this.item = item;
+  }
+}
+
 /**
  * A Web Component that provides a keyboard-accessible selectable list, typically used for dropdowns or autocomplete lists.
  * Together with `popover` and CSS Anchoring, it's also useful to create a dropdown list.
@@ -5,19 +19,33 @@
  *
  * The Web Component will automatically set attributes for accessibility.
  *
- * @element blue-select-list
+ * @element bl-select-list
  * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @attr {string} active-class - The CSS class name to apply to the active item (default: "active").
  * @slot - The list options.
  * @example
  * <input id="my-input" />
- * <blue-select-list for="my-input">
+ * <bl-select-list for="my-input">
  *   <div>Option 1</div>
  *   <div>Option 2</div>
- * </blue-select-list>
+ * </bl-select-list>
  */
-export class SelectList extends HTMLElement {
+_defineProperty(BlSelectEvent, "eventName", "bl-select");
+class SelectList extends HTMLElement {
   constructor() {
     super();
+    _defineProperty(this, "handleChildrenChanged", () => {
+      var _this$items$this$acti;
+      const previousActiveId = (_this$items$this$acti = this.items[this.activeIndex]) === null || _this$items$this$acti === void 0 ? void 0 : _this$items$this$acti.id;
+      this.updateItems();
+      if (previousActiveId) {
+        const newIndex = this.items.findIndex(el => el.id === previousActiveId);
+        this.activeIndex = newIndex >= 0 ? newIndex : -1;
+      } else {
+        this.activeIndex = -1;
+      }
+      this.updateActiveItem();
+    });
     this.attachShadow({
       mode: "open"
     });
@@ -25,13 +53,19 @@ export class SelectList extends HTMLElement {
     this.activeIndex = -1;
     this.items = [];
     this.inputElement = null;
+    this.slotElement = null;
+    this.observer = null;
+  }
+  get activeClass() {
+    return this.getAttribute("active-class") || "active";
   }
   connectedCallback() {
+    var _this$shadowRoot, _this$slotElement;
     this.setAttribute("role", "listbox");
     this.tabIndex = -1;
     this.updateItems();
-
-    // Input zuweisen über Attribut oder fallback
+    this.syncActiveIndexFromDataSelected();
+    this.updateActiveItem();
     const inputId = this.getAttribute("for");
     this.inputElement = inputId ? document.getElementById(inputId) : null;
     if (this.inputElement) {
@@ -42,20 +76,50 @@ export class SelectList extends HTMLElement {
     }
     this.addEventListener("keydown", this.onKeyDown.bind(this));
     this.addEventListener("click", e => {
-      const target = e.target instanceof Element ? e.target.closest("[data-blue-select-list-index]") : null;
-      if (target && target.hasAttribute("data-blue-select-list-index")) {
-        const index = Number(target.getAttribute("data-blue-select-list-index"));
+      const target = e.target instanceof Element ? e.target.closest("[data-select-list-index]") : null;
+      if (target && target.hasAttribute("data-select-list-index")) {
+        const index = Number(target.getAttribute("data-select-list-index"));
         this.select(index);
       }
     });
+    this.observer = new MutationObserver(mutations => {
+      if (mutations.some(m => m.type === "childList")) {
+        this.handleChildrenChanged();
+      }
+      if (mutations.some(m => m.type === "attributes" && m.attributeName === "data-selected")) {
+        this.syncActiveIndexFromDataSelected();
+        this.updateActiveItem();
+      }
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-selected"]
+    });
+    this.slotElement = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector("slot");
+    (_this$slotElement = this.slotElement) === null || _this$slotElement === void 0 || _this$slotElement.addEventListener("slotchange", this.handleChildrenChanged);
+  }
+  disconnectedCallback() {
+    var _this$observer, _this$slotElement2;
+    (_this$observer = this.observer) === null || _this$observer === void 0 || _this$observer.disconnect();
+    this.observer = null;
+    (_this$slotElement2 = this.slotElement) === null || _this$slotElement2 === void 0 || _this$slotElement2.removeEventListener("slotchange", this.handleChildrenChanged);
+  }
+  syncActiveIndexFromDataSelected() {
+    const selectedIndex = this.items.findIndex(el => el.hasAttribute("data-selected"));
+    if (selectedIndex >= 0) {
+      this.activeIndex = selectedIndex;
+    }
   }
   updateItems() {
-    this.items = Array.from(this.children);
+    const selectableSelectors = ["button:not([disabled])", "a[href]", "input:not([disabled])", "select:not([disabled])", "textarea:not([disabled])", '[tabindex]:not([tabindex="-1"])', '[role="option"]'].join(", ");
+    this.items = Array.from(this.querySelectorAll(selectableSelectors));
     this.items.forEach((el, i) => {
       if (!el.hasAttribute("id")) {
         el.setAttribute("id", "".concat(this.id, "-option-").concat(i));
       }
-      el.setAttribute("data-blue-select-list-index", i.toString());
+      el.setAttribute("data-select-list-index", i.toString());
       el.setAttribute("aria-selected", "false");
       el.setAttribute("role", "option");
       el.tabIndex = -1;
@@ -72,14 +136,18 @@ export class SelectList extends HTMLElement {
       this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
       this.updateActiveItem();
     } else if (e.key === "Enter" && this.activeIndex >= 0) {
+      e.preventDefault();
       const item = this.items[this.activeIndex];
       item === null || item === void 0 || item.click();
     }
   }
   updateActiveItem() {
+    const activeClassNames = this.activeClass.split(" ");
     this.items.forEach((el, i) => {
       const active = i === this.activeIndex;
-      el.classList.toggle("active", active);
+      activeClassNames.forEach(activeClassName => {
+        el.classList.toggle(activeClassName, active);
+      });
       el.setAttribute("aria-selected", active.toString());
     });
     const activeItem = this.items[this.activeIndex];
@@ -88,24 +156,23 @@ export class SelectList extends HTMLElement {
       activeItem.scrollIntoView({
         block: "nearest"
       });
+    } else if (this.inputElement) {
+      this.inputElement.removeAttribute("aria-activedescendant");
     }
   }
   select(index) {
     this.activeIndex = index;
-    this.updateActiveItem();
+    this.items.forEach(el => el.removeAttribute("data-selected"));
     const selectedItem = this.items[index];
     if (selectedItem) {
-      // Fire a custom event with the selected item and index
-      this.dispatchEvent(new CustomEvent("bl-select", {
-        detail: {
-          index,
-          item: selectedItem
-        },
-        bubbles: true,
-        composed: true
-      }));
-      selectedItem.click();
+      selectedItem.setAttribute("data-selected", "");
+      this.dispatchEvent(new BlSelectEvent(index, selectedItem));
+      this.updateActiveItem();
     }
   }
 }
-customElements.define("bl-select-list", SelectList);
+if (!customElements.get("bl-select-list")) {
+  customElements.define("bl-select-list", SelectList);
+}
+export { SelectList, BlSelectEvent };
+export default SelectList;