blue-web 1.20.0 → 1.21.0

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/merged.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.20.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.21.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -48,6 +48,7 @@ $focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;
 $input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
 
 $enable-button-pointers: false !default;
+$focus-ring-width: 0.125rem !default;
 
 
 // Bootstrap functions
@@ -10906,6 +10907,20 @@ body {
     margin: 0 !important;
 }
 
+// Shows empty message if the element has no children.
+// Can be used for lists and such.
+// For localization you should override CSS variable `--message` dynamically.
+.blue-empty-message {
+    --message: "No items found.";
+    &:empty::before {
+        content: var(--message);
+        color: var(--bs-secondary-color);
+        display: flex;
+        padding: 1rem;
+        justify-content: center;
+    }
+}
+
 .blue-loading {
     background-color: $primary;
 }
@@ -12097,6 +12112,12 @@ dialog.blue-modal:has(.offcanvas-start) {
     grid-area: side;
     overflow: auto;
     background: inherit;
+    scrollbar-color: transparent transparent;
+
+    &:hover,
+    &:focus-within {
+        scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
+    }
 }
 
 @media (width < 64rem) {
@@ -12132,6 +12153,7 @@ dialog.blue-modal:has(.offcanvas-start) {
     margin-left: auto;
     margin-right: auto;
     overflow: auto;
+    scrollbar-color: color-mix(in srgb, currentColor 50%, transparent) transparent;
     background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity, 1));
     color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity, 1));
     box-shadow: var(--bs-box-shadow-sm);
@@ -12307,6 +12329,12 @@ dialog.blue-modal:has(.offcanvas-start) {
     }
 }
 
+.btn:has(+ :popover-open):not(:focus-visible):not(.blue-menu-item) {
+    --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), 0.25);
+    box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
+        var(--bs-focus-ring-width) var(--bs-focus-ring-color);
+}
+
 .blue-scrollspy {
     --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x * 0.5};
     --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y * 0.5};
@@ -12341,9 +12369,11 @@ dialog.blue-modal:has(.offcanvas-start) {
                 (var(--#{$prefix}nav-link-font-size) * var(--#{$prefix}body-line-height))
         );
         margin-bottom: 0.25rem;
+        padding-inline: var(--blue-scrollspy-marker-group-padding-inline);
+        gap: var(--blue-scrollspy-marker-group-gap);
     }
 
-    & > section {
+    & > :is(section, .blue-scrollspy-group) {
         &::scroll-marker {
             content: attr(aria-label);