blue-web 1.16.1 → 1.17.1

package/dist/js/input-splitted.bundle.js

@@ -0,0 +1 @@
+(()=>{"use strict";class t extends HTMLElement{#t;#e=[];#s=[];#i=!1;get lightDom(){return this.#i}set lightDom(t){this.#i=t,!0===this.lightDom?this.innerHTML=this.#r:(this.shadowRoot||this.attachShadow({mode:"open",delegatesFocus:!0}),this.shadowRoot.innerHTML=this.#r),this.#l()}#h="";get value(){return this.#h}set value(t){const e=this.#h;this.#h=t,this.#e=this.value.split("");for(let t=0;t<this.length;t++)this.#s[t]&&(this.#s[t].value=this.#e[t]||"");e!==t&&this.dispatchEvent(new CustomEvent("changeValue",{bubbles:!0,detail:t}))}#o=0;get length(){return this.#o}set length(t){if(this.#o=t,this.length>this.#s.length)for(let t=0;t<this.length;t++)!this.#s[t]&&this.didInit&&this.#n(this.#s.length);else if(this.length<this.#s.length){const t=Math.abs(this.#s.length-this.length);for(let e=0;e<t;e++){const t=this.#s.pop();t?.remove()}}this.#s=[...this.#s]}#a="";get controlClass(){return this.#a}set controlClass(t){this.#a=t;for(const t of this.#s)t.className=this.controlClass}#u="";get control1Id(){return this.#u}set control1Id(t){this.#u=t,this.#s[0]&&(this.#s[0].id=this.control1Id)}#r="<style>\n    input {\n        display: var(--blue-input-splitted-display, revert);\n        background-color: var(--blue-input-splitted-background-color, revert);\n        border: var(--blue-input-splitted-border, revert);\n        border-radius: var(--blue-input-splitted-border-radius, revert);\n        box-shadow: var(--blue-input-splitted-box-shadow, revert);\n        color: var(--blue-input-splitted-color, revert);\n        margin: var(--blue-input-splitted-margin, revert);\n        padding: var(--blue-input-splitted-padding, revert);\n        text-align: var(--blue-input-splitted-text-align, revert);\n        width: var(--blue-input-splitted-width, revert);\n    }\n</style>";didInit=!1;constructor(){super(),this.onFocus=this.onFocus.bind(this)}connectedCallback(){this.didInit=!0,this.lightDom=null!==this.getAttribute("light-dom"),this.#l(),this.value=this.getAttribute("value")||this.value,this.length=e(this),this.controlClass=this.getAttribute("control-class")||this.controlClass,this.control1Id=this.getAttribute("control-1-id")||this.control1Id,this.#d()}#n(t){const e=document.createElement("input");this.#s.push(e),e.type="text",e.className=this.controlClass,0===t&&(e.id=this.control1Id),e.maxLength=1,e.value=this.#e[t]||"",e.addEventListener("input",(e=>{let{target:s}=e;const i=s;""!==i.value&&this.#s[t+1]&&this.#s[t+1].focus(),this.#e[t]=i.value,this.value=this.#e.join("")})),e.addEventListener("keydown",(e=>{let{key:s,target:i}=e;"Backspace"===s&&""===i.value&&void 0!==this.#s[t-1]&&this.#s[t-1].focus()})),e.addEventListener("paste",(e=>{let{clipboardData:s}=e;const i=s.getData("Text");let r=0;for(let e=t;e<this.length;e++)this.#e[e]=i.split("")[r],this.#s[e].focus(),r+=1;this.value=this.#e.join("")})),this.lightDom?this.appendChild(e):this.shadowRoot.appendChild(e)}onFocus(){this.#s[0]&&this.#s[0].focus()}#l(){this.value=this.getAttribute("value")||"",this.length=e(this),this.lightDom?(this.innerHTML=this.#r,this.addEventListener("focus",this.onFocus)):(this.shadowRoot.innerHTML=this.#r,this.shadowRoot.addEventListener("focus",this.onFocus)),this.#e=this.value.split(""),this.#s=[];for(let t=0;t<this.length;t++)this.#n(t)}#d(){this.#t=this.#t||new MutationObserver((t=>{t.forEach((t=>{"value"===t.attributeName&&(this.value=this.getAttribute("value")||this.value),"length"===t.attributeName&&(this.length=e(this)),"control-class"===t.attributeName&&(this.controlClass=this.getAttribute("control-class")||this.controlClass),"control-1-id"===t.attributeName&&(this.control1Id=this.getAttribute("control-1-id")||this.control1Id),"light-dom"===t.attributeName&&(this.lightDom=null!==this.getAttribute("light-dom"))}))})),this.#t.observe(this,{attributeFilter:["value","length","control-class","control-1-id","light-dom"],attributeOldValue:!0,childList:!0,subtree:!0})}#c(){this.#t&&(this.#t.takeRecords(),this.#t.disconnect())}disconnectedCallback(){this.#c()}static get formAssociated(){return!0}}function e(t){const e=t.getAttribute("length");if(e)return parseInt(e)}customElements.define("bl-input-splitted",t)})();

package/dist/js/input-splitted.d.ts

@@ -0,0 +1,19 @@
+export declare class InputSplitted extends HTMLElement {
+    #private;
+    get lightDom(): boolean;
+    set lightDom(_lightDom: boolean);
+    get value(): string;
+    set value(_value: string);
+    get length(): number;
+    set length(_length: number);
+    get controlClass(): string;
+    set controlClass(value: string);
+    get control1Id(): string;
+    set control1Id(value: string);
+    didInit: boolean;
+    constructor();
+    connectedCallback(): void;
+    onFocus(): void;
+    disconnectedCallback(): void;
+    static get formAssociated(): boolean;
+}

package/dist/js/input-splitted.js

@@ -0,0 +1,229 @@
+export class InputSplitted extends HTMLElement {
+  #observer;
+  #valueArray = [];
+  #refArray = [];
+  #lightDom = false;
+  get lightDom() {
+    return this.#lightDom;
+  }
+  set lightDom(_lightDom) {
+    this.#lightDom = _lightDom;
+    if (this.lightDom === true) {
+      this.innerHTML = this.#styling;
+    } else {
+      if (!this.shadowRoot) this.attachShadow({
+        mode: "open",
+        delegatesFocus: true
+      });
+      this.shadowRoot.innerHTML = this.#styling;
+    }
+    this.#initDom();
+  }
+  #value = "";
+  get value() {
+    return this.#value;
+  }
+  set value(_value) {
+    const oldValue = this.#value;
+    this.#value = _value;
+    this.#valueArray = this.value.split("");
+    for (let i = 0; i < this.length; i++) {
+      if (this.#refArray[i]) this.#refArray[i].value = this.#valueArray[i] || "";
+    }
+    if (oldValue !== _value) {
+      this.dispatchEvent(new CustomEvent("changeValue", {
+        bubbles: true,
+        detail: _value
+      }));
+    }
+  }
+  #length = 0;
+  get length() {
+    return this.#length;
+  }
+  set length(_length) {
+    this.#length = _length;
+    if (this.length > this.#refArray.length) {
+      // Added length
+
+      for (let j = 0; j < this.length; j++) {
+        if (!this.#refArray[j] && this.didInit) {
+          this.#addInput(this.#refArray.length);
+        }
+      }
+    } else if (this.length < this.#refArray.length) {
+      // Removed length
+
+      const difference = Math.abs(this.#refArray.length - this.length);
+      for (let j = 0; j < difference; j++) {
+        const el = this.#refArray.pop();
+        el?.remove();
+      }
+    }
+    this.#refArray = [...this.#refArray];
+  }
+  #controlClass = "";
+  get controlClass() {
+    return this.#controlClass;
+  }
+  set controlClass(value) {
+    this.#controlClass = value;
+    for (const el of this.#refArray) {
+      el.className = this.controlClass;
+    }
+  }
+  #control1Id = "";
+  get control1Id() {
+    return this.#control1Id;
+  }
+  set control1Id(value) {
+    this.#control1Id = value;
+    if (this.#refArray[0]) {
+      this.#refArray[0].id = this.control1Id;
+    }
+  }
+  #styling = /* html */`<style>
+    input {
+        display: var(--blue-input-splitted-display, revert);
+        background-color: var(--blue-input-splitted-background-color, revert);
+        border: var(--blue-input-splitted-border, revert);
+        border-radius: var(--blue-input-splitted-border-radius, revert);
+        box-shadow: var(--blue-input-splitted-box-shadow, revert);
+        color: var(--blue-input-splitted-color, revert);
+        margin: var(--blue-input-splitted-margin, revert);
+        padding: var(--blue-input-splitted-padding, revert);
+        text-align: var(--blue-input-splitted-text-align, revert);
+        width: var(--blue-input-splitted-width, revert);
+    }
+</style>`;
+  didInit = false;
+  constructor() {
+    super();
+    this.onFocus = this.onFocus.bind(this);
+  }
+  connectedCallback() {
+    this.didInit = true;
+    this.lightDom = this.getAttribute("light-dom") !== null;
+    this.#initDom();
+    this.value = this.getAttribute("value") || this.value;
+    this.length = getLength(this);
+    this.controlClass = this.getAttribute("control-class") || this.controlClass;
+    this.control1Id = this.getAttribute("control-1-id") || this.control1Id;
+    this.#observe();
+  }
+  #addInput(i) {
+    const input = document.createElement("input");
+    this.#refArray.push(input);
+    input.type = "text";
+    input.className = this.controlClass;
+    if (i === 0) {
+      input.id = this.control1Id;
+    }
+    input.maxLength = 1;
+    input.value = this.#valueArray[i] || "";
+    input.addEventListener("input", _ref => {
+      let {
+        target
+      } = _ref;
+      const inputTarget = target;
+      if (inputTarget.value !== "" && this.#refArray[i + 1]) {
+        this.#refArray[i + 1].focus();
+      }
+      this.#valueArray[i] = inputTarget.value;
+      this.value = this.#valueArray.join("");
+    });
+    input.addEventListener("keydown", _ref2 => {
+      let {
+        key,
+        target
+      } = _ref2;
+      const inputTarget = target;
+      if (key === "Backspace" && inputTarget.value === "" && this.#refArray[i - 1] !== undefined) {
+        this.#refArray[i - 1].focus();
+      }
+    });
+    input.addEventListener("paste", _ref3 => {
+      let {
+        clipboardData
+      } = _ref3;
+      const pastedData = clipboardData.getData("Text");
+      let k = 0;
+      for (let j = i; j < this.length; j++) {
+        this.#valueArray[j] = pastedData.split("")[k];
+        this.#refArray[j].focus();
+        k = k + 1;
+      }
+      this.value = this.#valueArray.join("");
+    });
+    if (this.lightDom) {
+      this.appendChild(input);
+    } else {
+      this.shadowRoot.appendChild(input);
+    }
+  }
+  onFocus() {
+    if (this.#refArray[0]) this.#refArray[0].focus();
+  }
+  #initDom() {
+    this.value = this.getAttribute("value") || "";
+    this.length = getLength(this);
+    if (this.lightDom) {
+      this.innerHTML = this.#styling;
+      this.addEventListener("focus", this.onFocus);
+    } else {
+      this.shadowRoot.innerHTML = this.#styling;
+      this.shadowRoot.addEventListener("focus", this.onFocus);
+    }
+    this.#valueArray = this.value.split("");
+    this.#refArray = [];
+    for (let i = 0; i < this.length; i++) {
+      this.#addInput(i);
+    }
+  }
+  #observe() {
+    // Observer prüft, ob sich HTML-Attribute geändert haben.
+    // Props-Änderungen werden ohne bemerkt.
+    this.#observer = this.#observer || new MutationObserver(mutations => {
+      mutations.forEach(m => {
+        if (m.attributeName === "value") {
+          this.value = this.getAttribute("value") || this.value;
+        }
+        if (m.attributeName === "length") {
+          this.length = getLength(this);
+        }
+        if (m.attributeName === "control-class") {
+          this.controlClass = this.getAttribute("control-class") || this.controlClass;
+        }
+        if (m.attributeName === "control-1-id") {
+          this.control1Id = this.getAttribute("control-1-id") || this.control1Id;
+        }
+        if (m.attributeName === "light-dom") {
+          this.lightDom = this.getAttribute("light-dom") !== null;
+        }
+      });
+    });
+    this.#observer.observe(this, {
+      attributeFilter: ["value", "length", "control-class", "control-1-id", "light-dom"],
+      attributeOldValue: true,
+      childList: true,
+      subtree: true
+    });
+  }
+  #unobserve() {
+    if (this.#observer) {
+      this.#observer.takeRecords();
+      this.#observer.disconnect();
+    }
+  }
+  disconnectedCallback() {
+    this.#unobserve();
+  }
+  static get formAssociated() {
+    return true;
+  }
+}
+function getLength(element) {
+  const attr = element.getAttribute("length");
+  if (attr) return parseInt(attr);
+}
+customElements.define("bl-input-splitted", InputSplitted);

package/dist/js/read-view.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)),this.updateDisabledState())}updateDisabledState(){const t=this.hasAttribute("disabled");this.button?.setAttribute("aria-disabled",String(t)),this.container?.setAttribute("aria-disabled",String(t))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(this.startX=t.clientX,this.startY=t.clientY)}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("read-view",t)})();
+(()=>{"use strict";class t extends HTMLElement{startX=0;startY=0;constructor(){super(),this.attachShadow({mode:"open"})}static get observedAttributes(){return["disabled"]}connectedCallback(){this.render()}attributeChangedCallback(t,e,n){"disabled"===t&&this.updateDisabledState()}render(){this.shadowRoot&&(this.shadowRoot.innerHTML='\n            <style>\n                button {\n                    display: block;\n                    margin: 0;\n                    padding: 0;\n                    appearance: none;\n                    background-color: transparent;\n                    border: none;\n                    line-height: 1;\n                    outline: 0;\n                }\n\n                button:focus-visible + div {\n                    outline: 0;\n                    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 25%);\n                    border-color: rgba(var(--bs-primary-rgb), 50%);\n                }\n\n                div {\n                    display: inline-block;\n                    box-sizing: border-box;\n                    width: auto;\n                    max-width: 100%;\n                    border-color: transparent;\n                    border-radius: var(--bs-border-radius-sm, 3px);\n                    border: 1px solid transparent;\n                    transition: background 0.2s;\n                }\n\n                div:hover {\n                    background-color: var(--bs-secondary-bg-subtle);\n                }\n\n                :host([disabled]) div {\n                    background-color: transparent;\n                }\n            </style>\n            <button aria-label="Edit"></button>\n            <div role="presentation">\n                <slot></slot>\n            </div>\n        ',this.button=this.shadowRoot.querySelector("button"),this.container=this.shadowRoot.querySelector("div"),this.button.addEventListener("click",this.onEditRequested.bind(this)),this.container.addEventListener("click",this.onReadViewClick.bind(this)),this.container.addEventListener("mousedown",this.onMouseDown.bind(this)),this.updateDisabledState())}updateDisabledState(){const t=this.hasAttribute("disabled");this.button?.setAttribute("aria-disabled",String(t)),this.container?.setAttribute("aria-disabled",String(t))}onEditRequested(){this.hasAttribute("disabled")||this.dispatchEvent(new CustomEvent("EditRequested",{bubbles:!0,composed:!0}))}onMouseDown(t){this.hasAttribute("disabled")||(this.startX=t.clientX,this.startY=t.clientY)}mouseHasMovedAfterMouseDown(t){return Math.abs(this.startX-t.clientX)>=5||Math.abs(this.startY-t.clientY)>=5}onReadViewClick(t){this.hasAttribute("disabled")||"a"===t.target.tagName.toLowerCase()||this.mouseHasMovedAfterMouseDown(t)||(t.preventDefault(),this.onEditRequested())}}customElements.define("bl-read-view",t)})();

package/dist/js/read-view.d.ts

@@ -9,9 +9,9 @@
  * @cssprop --bs-border-radius-sm - The border radius for the read view.
  * @slot - The content to display in the read view.
  * @example
- * <read-view id="my-read-view" onEditRequested="setEditing(true)">
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
  *    <a href="#">bla</a> {value}
- * </read-view>
+ * </bl-read-view>
  * @example
  * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
  *    setEditing(true)

package/dist/js/read-view.js

@@ -11,9 +11,9 @@ const DRAG_THRESHOLD = 5;
  * @cssprop --bs-border-radius-sm - The border radius for the read view.
  * @slot - The content to display in the read view.
  * @example
- * <read-view id="my-read-view" onEditRequested="setEditing(true)">
+ * <bl-read-view id="my-read-view" onEditRequested="setEditing(true)">
  *    <a href="#">bla</a> {value}
- * </read-view>
+ * </bl-read-view>
  * @example
  * document.getElementById("my-read-view").addEventListener("EditRequested", () => {
  *    setEditing(true)
@@ -120,4 +120,4 @@ export class ReadView extends HTMLElement {
     }
   }
 }
-customElements.define("read-view", ReadView);
+customElements.define("bl-read-view", ReadView);

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

@@ -0,0 +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",`${this.id}-option-${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(console.log("select-list onKeyDown"),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];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)})();

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

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
+ *
+ * The Web Component will automatically set attributes for accessibility.
+ *
+ * @element blue-select-list
+ * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @slot - The list options.
+ * @example
+ * <input id="my-input" />
+ * <blue-select-list for="my-input">
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </blue-select-list>
+ */
+export declare class SelectList extends HTMLElement {
+    activeIndex: number;
+    items: HTMLElement[];
+    inputElement: HTMLElement | null;
+    constructor();
+    connectedCallback(): void;
+    updateItems(): void;
+    onKeyDown(e: {
+        key: string;
+        preventDefault: () => void;
+    }): void;
+    updateActiveItem(): void;
+    select(index: number): void;
+}

package/dist/js/select-list.js

@@ -0,0 +1,112 @@
+/**
+ * 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.
+ * Supports keyboard navigation and selection, and integrates with an input element for combobox behavior.
+ *
+ * The Web Component will automatically set attributes for accessibility.
+ *
+ * @element blue-select-list
+ * @attr {string} for - The id of the input element to associate as the combobox controller.
+ * @slot - The list options.
+ * @example
+ * <input id="my-input" />
+ * <blue-select-list for="my-input">
+ *   <div>Option 1</div>
+ *   <div>Option 2</div>
+ * </blue-select-list>
+ */
+export class SelectList 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();
+
+    // Input zuweisen über Attribut oder fallback
+    const inputId = this.getAttribute("for");
+    this.inputElement = inputId ? document.getElementById(inputId) : null;
+    if (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", 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"));
+        this.select(index);
+      }
+    });
+  }
+  updateItems() {
+    this.items = Array.from(this.children);
+    this.items.forEach((el, i) => {
+      if (!el.hasAttribute("id")) {
+        el.setAttribute("id", `${this.id}-option-${i}`);
+      }
+      el.setAttribute("data-blue-select-list-index", i.toString());
+      el.setAttribute("aria-selected", "false");
+      el.setAttribute("role", "option");
+      el.tabIndex = -1;
+    });
+  }
+  onKeyDown(e) {
+    console.log("select-list onKeyDown");
+    if (!this.items.length) return;
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.activeIndex = (this.activeIndex + 1) % this.items.length;
+      this.updateActiveItem();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.activeIndex = (this.activeIndex - 1 + this.items.length) % this.items.length;
+      this.updateActiveItem();
+    } else if (e.key === "Enter" && this.activeIndex >= 0) {
+      const item = this.items[this.activeIndex];
+      item?.click();
+    }
+  }
+  updateActiveItem() {
+    this.items.forEach((el, i) => {
+      const active = i === this.activeIndex;
+      el.classList.toggle("active", active);
+      el.setAttribute("aria-selected", active.toString());
+    });
+    const activeItem = this.items[this.activeIndex];
+    if (activeItem && this.inputElement) {
+      this.inputElement.setAttribute("aria-activedescendant", activeItem.id);
+      activeItem.scrollIntoView({
+        block: "nearest"
+      });
+    }
+  }
+  select(index) {
+    this.activeIndex = index;
+    this.updateActiveItem();
+    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();
+    }
+  }
+}
+customElements.define("bl-select-list", SelectList);

package/dist/js/side-layout.bundle.js

@@ -1 +1 @@
-(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    ${localStorage.getItem("side-layout-shrink")?"":"checked"}\n                />\n                <label class="toggler" for="layout-expand" title="${n}" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="${n}" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        `}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("side-layout",n)})();
+(()=>{"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.addEventListeners()}render(){if(!this.shadowRoot)return;const n=(document.documentElement.lang||navigator.language).startsWith("de")?"Seitenleiste umschalten":"Toggle sidebar";this.shadowRoot.innerHTML=`\n            <style>\n                :host {\n                    --spacing: 0.25rem;\n                    --drawer-side-shadow:\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,\n                        rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;\n                    --toggler-size: calc(\n                        var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +\n                            (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) +\n                            var(--bs-btn-padding-y, 0.375rem) + var(--bs-btn-border-width, 1px)\n                    );\n                    --side-width: 18rem;\n                    --base-z-index: 0;\n                }\n\n                .root {\n                    position: relative;\n                    display: grid;\n                    height: 100%;\n                    grid-template-columns:\n                        0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size))\n                        auto;\n                    grid-template-rows: var(--toggler-size) auto;\n                }\n\n                .hidden-input {\n                    position: fixed;\n                    --size: 0;\n                    height: var(--size);\n                    width: var(--size);\n                    appearance: none;\n                    opacity: 0;\n                }\n\n                .toggler {\n                    grid-column-start: 2;\n                }\n\n                .hidden-input:focus-visible + .toggler ::slotted(*) {\n                    --trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);\n                }\n\n                @media (width < 64rem) {\n                    .toggler[for="layout-expand"] {\n                        display: none;\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    .toggler[for="layout-drawer"] {\n                        display: none;\n                    }\n                }\n\n                .header {\n                    grid-column-start: 3;\n                    grid-column-end: 5;\n                }\n\n                .side {\n                    overflow: auto;\n                }\n\n                @media (width < 64rem) {\n                    .side {\n                        translate: -100% 0;\n                        height: 100%;\n                        transition: translate 0.2s ease;\n                    }\n\n                    #layout-drawer:checked ~ .side {\n                        position: fixed;\n                        top: 0;\n                        left: 0;\n                        z-index: calc(var(--base-z-index) + 1);\n                        translate: 0;\n                        width: calc(var(--spacing) * 80);\n                        box-shadow: var(--drawer-side-shadow);\n                    }\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .side {\n                        grid-column-start: 2;\n                        grid-column-end: 4;\n                    }\n                }\n\n                .main {\n                    overflow: auto;\n                    grid-column-start: 2;\n                    grid-column-end: 5;\n                }\n\n                @media (width >= 64rem) {\n                    #layout-expand:checked ~ .main {\n                        grid-column-start: 4;\n                    }\n                }\n\n                .overlay {\n                    position: fixed;\n                    z-index: var(--base-z-index);\n                    inset: 0;\n                    display: none;\n                }\n\n                @media (width < 64rem) {\n                    #layout-drawer:checked ~ .overlay {\n                        display: block;\n                    }\n                }\n            </style>\n\n            <div class="root">\n                <input\n                    id="layout-expand"\n                    type="checkbox"\n                    class="hidden-input"\n                    ${localStorage.getItem("side-layout-shrink")?"":"checked"}\n                />\n                <label class="toggler" for="layout-expand" title="${n}" role="button">\n                    <slot name="expand-toggler">🍔</slot>\n                </label>\n\n                <input id="layout-drawer" type="checkbox" class="hidden-input" />\n                <label class="toggler" for="layout-drawer" title="${n}" role="button">\n                    <slot name="drawer-toggler">🍔</slot>\n                </label>\n\n                <header class="header"><slot name="header"></slot></header>\n                <div class="side"><slot name="side"></slot></div>\n                <main class="main"><slot></slot></main>\n                <label aria-label="Close sidebar" for="layout-drawer" class="overlay"\n                    ><slot name="overlay"></slot\n                ></label>\n            </div>\n        `}addEventListeners(){this.shadowRoot&&this.shadowRoot.querySelector("#layout-expand").addEventListener("change",this.handleLayoutExpandChange.bind(this))}handleLayoutExpandChange(n){n.target.checked?localStorage.removeItem("side-layout-shrink"):localStorage.setItem("side-layout-shrink","true")}}customElements.define("bl-side-layout",n)})();

package/dist/js/side-layout.js

@@ -17,7 +17,8 @@ export class SideLayout extends HTMLElement {
             <style>
                 :host {
                     --spacing: 0.25rem;
-                    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+                    --drawer-side-shadow:
+                        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                         rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
                         rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
                     --toggler-size: calc(
@@ -167,4 +168,4 @@ export class SideLayout extends HTMLElement {
     }
   }
 }
-customElements.define("side-layout", SideLayout);
+customElements.define("bl-side-layout", SideLayout);

package/dist/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.16.1 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.17.1 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -12366,6 +12366,7 @@ dialog.blue-modal:has(.offcanvas-start) {
     --dxbl-toolbar-btn-border-radius: var(--bs-border-radius) !important;
     --dxbl-dropdown-border-radius: var(--bs-border-radius) !important;
     --dxbl-btn-border-radius: var(--bs-border-radius) !important;
+    --dxbl-context-menu-border-radius: var(--bs-border-radius) !important;
     --dxbl-btn-padding-x: 0.75rem !important;
     --dxbl-btn-padding-y: 0.375rem !important;
 }
@@ -12392,6 +12393,21 @@ body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
     z-index: 1056 !important;
 }
 
+@if ($enable-button-pointers: false) {
+    .dxbl-context-menu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item,
+    .dxbl-context-menu-submenu.dxbl-context-menu-dropdown
+        > .dxbl-dropdown-body
+        ul
+        li:not(.dxbl-context-menu-separator)
+        > .dxbl-context-menu-item {
+        cursor: default;
+    }
+}
+
 :root {
     --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
     font-feature-settings:
@@ -12401,6 +12417,7 @@ body.modal-open .dxbl-popup-cell[style="z-index: 1050;"] {
         "cv07" 1,
         "tnum" 1,
         "zero" 1;
+    font-size: 14px;
 }
 @supports (font-variation-settings: normal) {
     :root {