blue-web 1.19.1 → 1.21.0

package/dist/js/button.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.innerHTML='<button part="base" type="button">Hello world</button>'}}customElements.get("bl-button")||customElements.define("bl-button",t)})();

package/dist/js/button.d.ts

@@ -0,0 +1,6 @@
+declare class Button extends HTMLElement {
+    constructor();
+    connectedCallback(): void;
+}
+export { Button };
+export default Button;

package/dist/js/button.js

@@ -0,0 +1,16 @@
+class Button extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({
+      mode: "open"
+    });
+  }
+  connectedCallback() {
+    this.shadowRoot.innerHTML = /* html*/"<button part=\"base\" type=\"button\">Hello world</button>";
+  }
+}
+if (!customElements.get("bl-button")) {
+  customElements.define("bl-button", Button);
+}
+export { Button };
+export default Button;

package/dist/js/dialog.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";var n={762:(n,e,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(e,{Os:()=>a});const a=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()},786:(n,e,t)=>{t.d(e,{k:()=>a});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"]};function a(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return e=e||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[n]?e.indexOf("de-")>-1?t[n][1]:t[n][0]:n}}},e={};function t(o){var a=e[o];if(void 0!==a)return a.exports;var l=e[o]={exports:{}};return n[o](l,l.exports,t),l.exports}t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e);var o=t(762),a=t(786);async function l(n,e){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:l=(0,a.k)("Message"),icon:c,switchPrimaryBtn:i=!1,acceptBtnText:r=("verify"===n?(0,a.k)("Yes"):"OK"),cancelBtnText:s=("verify"===n?(0,a.k)("No"):(0,a.k)("Cancel")),inputType:d="text",defaultValue:u}="string"==typeof t?JSON.parse(t):t;const m=(0,o.Os)();return document.getElementById(m)||document.body.insertAdjacentHTML("beforeend",'<dialog class="blue-modal modal" id="'.concat(m,'" aria-labelledby="').concat(m,'-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ').concat(c?'<div class="me-2">'.concat(c,"</div>"):"",'\n                                <h1 class="modal-title fs-5" id="').concat(m,'-label">').concat(l,'</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="').concat(s,'"\n                                    onclick="document.getElementById(\'').concat(m,'\').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ').concat("ask"===n?'<label for="'.concat(m,'-input">').concat(e,'</label>\n                                          <input\n                                              type="').concat(d,'"\n                                              ').concat(void 0!==u?' value="'.concat(u,'"'):"",'\n                                              id="').concat(m,'-input"\n                                              class="form-control mt-3"\n                                          />'):e,'\n                            </div>\n                            <div class="modal-footer">\n                                ').concat("verify"===n||"ask"===n?'<button\n                                          type="button"\n                                          class="btn '.concat(i?"btn-primary":"blue-btn-plain-primary",'"\n                                          onclick="document.getElementById(\'').concat(m,"').close()\"\n                                      >\n                                          ").concat(s,"\n                                      </button>"):"",'\n                                <button\n                                    type="submit"\n                                    class="btn ').concat(i?"blue-btn-plain-primary":"btn-primary",'"\n                                >\n                                    ').concat(r,'\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>').concat(s,"</button>\n                </form>\n            </dialog>")),new Promise(e=>{var t;const o=document.getElementById(m),a=()=>{const n=document.getElementById(m);n&&n.remove()};null==o||o.showModal(),null==o||o.addEventListener("close",()=>{a(),e(!1)}),null==o||null===(t=o.querySelector(".modal-content > form"))||void 0===t||t.addEventListener("submit",t=>{t.preventDefault(),"ask"===n&&(o.close(),a(),e((null==o?void 0:o.querySelector("input")).value||"")),o.close(),a(),e(!0)})})}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await l("ask",n,e)},tell:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await l("tell",n,e)},verify:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await l("verify",n,e)}}})();
+(()=>{"use strict";var n={762:(n,e,t)=>{function o(){return Math.floor(65536*(1+Math.random())).toString(16).substring(1)}t.d(e,{Os:()=>a});const a=()=>o()+o()+"-"+o()+"-"+o()+"-"+o()+"-"+o()+o()+o()},786:(n,e,t)=>{t.d(e,{k:()=>a});const o={Cancel:["Cancel","Abbrechen"],Yes:["Yes","Ja"],No:["No","Nein"],Message:["Message","Nachricht"],"Toggle menu":["Toggle menu","Menü umschalten"],"Close all":["Close all","Alle schließen"],Error:["Error","Fehler"],Information:["Information","Information"],Loading:["Loading","Laden"],Successful:["Successful","Erfolgreich"]};function a(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:void 0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:void 0;return e=e||navigator.language.toLowerCase().indexOf("de")>-1?"de-DE":"en-US",t=t||o,t[n]?e.indexOf("de-")>-1?t[n][1]:t[n][0]:n}}},e={};function t(o){var a=e[o];if(void 0!==a)return a.exports;var l=e[o]={exports:{}};return n[o](l,l.exports,t),l.exports}t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e);var o=t(762),a=t(786);async function l(n,e){let t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},{title:l=(0,a.k)("Message"),icon:c,switchPrimaryBtn:i=!1,acceptBtnText:r=("verify"===n?(0,a.k)("Yes"):"OK"),cancelBtnText:s=("verify"===n?(0,a.k)("No"):(0,a.k)("Cancel")),inputType:d="text",defaultValue:u}="string"==typeof t?JSON.parse(t):t;const m=(0,o.Os)();return document.getElementById(m)||document.body.insertAdjacentHTML("beforeend",'<dialog class="blue-modal modal" id="'.concat(m,'" aria-labelledby="').concat(m,'-label">\n                <div class="modal-dialog">\n                    <div class="modal-content">\n                        <form>\n                            <div class="modal-header">\n                                ').concat(c?'<div class="me-2">'.concat(c,"</div>"):"",'\n                                <h1 class="modal-title fs-5" id="').concat(m,'-label">').concat(l,'</h1>\n                                <button\n                                    type="button"\n                                    class="btn-close"\n                                    aria-label="').concat(s,'"\n                                    onclick="document.getElementById(\'').concat(m,'\').close()"\n                                ></button>\n                            </div>\n                            <div class="modal-body">\n                                ').concat("ask"===n?'<label for="'.concat(m,'-input">').concat(e,'</label>\n                                          <input\n                                              type="').concat(d,'"\n                                              ').concat(void 0!==u?' value="'.concat(u,'"'):"",'\n                                              id="').concat(m,'-input"\n                                              class="form-control mt-3"\n                                          />'):e,'\n                            </div>\n                            <div class="modal-footer">\n                                ').concat("verify"===n||"ask"===n?'<button\n                                          type="button"\n                                          class="btn '.concat(i?"btn-primary":"blue-btn-plain-primary",'"\n                                          onclick="document.getElementById(\'').concat(m,"').close()\"\n                                      >\n                                          ").concat(s,"\n                                      </button>"):"",'\n                                <button\n                                    type="submit"\n                                    class="btn ').concat(i?"blue-btn-plain-primary":"btn-primary",'"\n                                >\n                                    ').concat(r,'\n                                </button>\n                            </div>\n                        </form>\n                    </div>\n                </div>\n\n                <form method="dialog" class="blue-modal-backdrop">\n                    <button>').concat(s,"</button>\n                </form>\n            </dialog>")),new Promise(e=>{var t;const o=document.getElementById(m),a=()=>{const n=document.getElementById(m);n&&n.remove()};null==o||o.showModal(),null==o||o.addEventListener("close",()=>{a(),e(!1)}),null==o||null===(t=o.querySelector(".modal-content > form"))||void 0===t||t.addEventListener("submit",t=>{t.preventDefault(),"ask"===n&&(o.close(),a(),e((null==o?void 0:o.querySelector("input")).value||"")),o.close(),a(),e(!0)})})}window.blueWeb=window.blueWeb||{},window.blueWeb.dialog={ask:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return await l("ask",n,e)},tell:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};await l("tell",n,e)},verify:async function(n){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return!0===await l("verify",n,e)}}})();

package/dist/js/dxf-viewer.js

@@ -0,0 +1,129 @@
+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); }
+import { DxfViewer as DxfViewerLib } from "dxf-viewer";
+export class DxfViewer extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "viewer", null);
+    _defineProperty(this, "container", null);
+    _defineProperty(this, "resizeObserver", null);
+    _defineProperty(this, "THREE", null);
+  }
+  static get observedAttributes() {
+    return ["src", "clear-color", "auto-resize"];
+  }
+  async connectedCallback() {
+    if (!this.THREE) {
+      this.THREE = await import("three");
+    }
+    this.render();
+    this.loadDxf();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (name === "src") {
+      this.loadDxf();
+    }
+  }
+  render() {
+    this.container = document.createElement("div");
+    this.container.style.width = "100%";
+    this.container.style.height = "100%";
+    this.container.style.minHeight = "400px";
+    this.appendChild(this.container);
+    if (this.getAttribute("auto-resize") !== "false") {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.viewer && this.container) {
+          this.viewer.SetSize(this.container.clientWidth, this.container.clientHeight);
+        }
+      });
+      this.resizeObserver.observe(this.container);
+    }
+  }
+  async loadDxf() {
+    if (!this.container) return;
+    const src = this.getAttribute("src");
+    if (!src) return;
+    try {
+      if (this.viewer) {
+        this.viewer.Destroy();
+        this.viewer = null;
+      }
+      this.container.innerHTML = "";
+      this.viewer = new DxfViewerLib(this.container, {
+        clearColor: this.parseClearColor(this.getAttribute("clear-color") || "#ffffff"),
+        autoResize: this.getAttribute("auto-resize") !== "false",
+        sceneOptions: {
+          wireframeMesh: this.getAttribute("wireframe") === "true"
+        }
+      });
+      const fontsAttr = this.getAttribute("fonts");
+      const fonts = fontsAttr ? fontsAttr.split(",").map(f => f.trim()) : null;
+      await this.viewer.Load({
+        url: src,
+        fonts: fonts
+      });
+      this.viewer.Subscribe("loaded", () => {
+        this.dispatchEvent(new CustomEvent("dxf-loaded", {
+          detail: {
+            viewer: this.viewer
+          }
+        }));
+      });
+      this.viewer.Subscribe("message", event => {
+        console.log("DXF Viewer message:", event.message);
+      });
+    } catch (error) {
+      console.error("Error loading DXF file:", error);
+      this.dispatchEvent(new CustomEvent("dxf-error", {
+        detail: {
+          error
+        }
+      }));
+    }
+  }
+  parseClearColor(color) {
+    if (!this.THREE) return null;
+    if (!color) return new this.THREE.Color(0xffffff);
+    return new this.THREE.Color(color);
+  }
+  cleanup() {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.viewer) {
+      this.viewer.Destroy();
+      this.viewer = null;
+    }
+  }
+  getViewer() {
+    return this.viewer;
+  }
+  async reload() {
+    await this.loadDxf();
+  }
+  showLayer(name, show) {
+    if (this.viewer) {
+      this.viewer.ShowLayer(name, show);
+    }
+  }
+  fitView(minX, maxX, minY, maxY) {
+    let padding = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+    if (this.viewer) {
+      this.viewer.FitView(minX, maxX, minY, maxY, padding);
+    }
+  }
+  getLayers() {
+    return this.viewer ? Array.from(this.viewer.GetLayers()) : [];
+  }
+  getBounds() {
+    var _this$viewer;
+    return ((_this$viewer = this.viewer) === null || _this$viewer === void 0 ? void 0 : _this$viewer.GetBounds()) || null;
+  }
+}
+customElements.define("dxf-viewer", DxfViewer);

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;

package/dist/js/shared.js

@@ -6,7 +6,9 @@ const phrases = {
   "Toggle menu": ["Toggle menu", "Menü umschalten"],
   "Close all": ["Close all", "Alle schließen"],
   Error: ["Error", "Fehler"],
-  Information: ["Information", "Information"]
+  Information: ["Information", "Information"],
+  Loading: ["Loading", "Laden"],
+  Successful: ["Successful", "Erfolgreich"]
 };
 export function getPhrase(keyword) {
   let countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;