@nectary/components 5.29.2 → 5.31.0

package/bundle.js

@@ -2348,9 +2348,12 @@ class Button extends NectaryElement {
     super.connectedCallback();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    this.#internals.role = "button";
-    this.tabIndex = 0;
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
     this.addEventListener("click", this.#onButtonClick, { signal });
     this.addEventListener("focus", this.#onButtonFocus, { signal });
     this.addEventListener("blur", this.#onButtonBlur, { signal });
@@ -2374,7 +2377,9 @@ class Button extends NectaryElement {
       "toggled",
       "size",
       "data-size",
-      "data-managed-aria-disabled"
+      "data-managed-aria-disabled",
+      "role",
+      "tabindex"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -2412,6 +2417,33 @@ class Button extends NectaryElement {
         this.#onSizeUpdate();
         break;
       }
+      case "role": {
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const effectiveRole = newVal !== null && newVal !== "" ? newVal : "button";
+        this.#internals.role = effectiveRole;
+        if (newVal === null || newVal === "") {
+          this.setAttribute("role", "button");
+        }
+        break;
+      }
+      case "tabindex": {
+        if (newVal === null) {
+          if (this.isDomConnected) {
+            this.setAttribute("tabindex", "0");
+          }
+          break;
+        }
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const parsed = Number.parseInt(newVal, 10);
+        if (Number.isNaN(parsed)) {
+          this.setAttribute("tabindex", "0");
+        }
+        break;
+      }
     }
   }
   set type(value) {
@@ -12567,7 +12599,7 @@ class SelectButton extends NectaryElement {
   };
 }
 defineCustomElement("sinch-select-button", SelectButton);
-const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template$i = document.createElement("template");
 template$i.innerHTML = templateHTML$i;
 class SelectMenuOption extends NectaryElement {
@@ -12633,6 +12665,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
@@ -12704,6 +12742,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -12862,7 +12901,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -12927,7 +12966,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -12943,6 +12982,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -12958,7 +13004,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -12969,7 +13015,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -13058,7 +13104,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -13076,10 +13122,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/button/index.js

@@ -1,5 +1,5 @@
 import { Context, subscribeContext } from "../utils/context.js";
-import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, updateLiteralAttribute, getLiteralAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { requestSubmitForm } from "../utils/form.js";
@@ -28,9 +28,12 @@ class Button extends NectaryElement {
     super.connectedCallback();
     this.#controller = new AbortController();
     const { signal } = this.#controller;
-    this.setAttribute("role", "button");
-    this.#internals.role = "button";
-    this.tabIndex = 0;
+    if (!this.hasAttribute("tabindex")) {
+      this.setAttribute("tabindex", "0");
+    }
+    if (!this.hasAttribute("role")) {
+      this.setAttribute("role", "button");
+    }
     this.addEventListener("click", this.#onButtonClick, { signal });
     this.addEventListener("focus", this.#onButtonFocus, { signal });
     this.addEventListener("blur", this.#onButtonBlur, { signal });
@@ -54,7 +57,9 @@ class Button extends NectaryElement {
       "toggled",
       "size",
       "data-size",
-      "data-managed-aria-disabled"
+      "data-managed-aria-disabled",
+      "role",
+      "tabindex"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -92,6 +97,33 @@ class Button extends NectaryElement {
         this.#onSizeUpdate();
         break;
       }
+      case "role": {
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const effectiveRole = newVal !== null && newVal !== "" ? newVal : "button";
+        this.#internals.role = effectiveRole;
+        if (newVal === null || newVal === "") {
+          this.setAttribute("role", "button");
+        }
+        break;
+      }
+      case "tabindex": {
+        if (newVal === null) {
+          if (this.isDomConnected) {
+            this.setAttribute("tabindex", "0");
+          }
+          break;
+        }
+        if (isAttrEqual(oldVal, newVal)) {
+          break;
+        }
+        const parsed = Number.parseInt(newVal, 10);
+        if (Number.isNaN(parsed)) {
+          this.setAttribute("tabindex", "0");
+        }
+        break;
+      }
     }
   }
   set type(value) {

package/button/types.d.ts

@@ -5,6 +5,10 @@ export type TSinchButtonType = 'primary' | 'secondary'
 /** @deprecated */
  | 'tertiary' | 'subtle-primary' | 'subtle-secondary' | 'cta-primary' | 'cta-secondary' | 'destructive';
 export type TSinchButtonProps = {
+    /** ARIA role, `button` by default. Curated union for common use cases; hosts can still set other roles in HTML. */
+    role?: 'button' | 'tab' | 'menuitem' | 'switch' | 'link' | 'option';
+    /** Keyboard navigation order, `0` by default */
+    tabIndex?: number;
     /** Button Type */
     type?: TSinchButtonType;
     /** Size, `m` by default */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.29.2",
+  "version": "5.31.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -71,6 +71,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -229,7 +230,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -294,7 +295,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -310,6 +311,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -325,7 +333,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -336,7 +344,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -425,7 +433,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -443,10 +451,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/select-menu/types.d.ts

@@ -24,6 +24,8 @@ export type TSinchSelectMenuEvents = {
     '-search-change'?: (e: CustomEvent<string>) => void;
     /** Change value handler */
     '-change'?: (e: CustomEvent<string>) => void;
+    /** Action option activated handler — detail is the action option's value */
+    '-action'?: (e: CustomEvent<string>) => void;
 };
 export type TSinchSelectMenuStyle = {
     '--sinch-comp-select-menu-color-default-title-initial'?: string;

package/select-menu-option/index.d.ts

@@ -14,5 +14,7 @@ export declare class SelectMenuOption extends NectaryElement {
     get text(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    set action(isAction: boolean);
+    get action(): boolean;
     matchesSearch(searchValue: string): boolean;
 }

package/select-menu-option/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import "../text/index.js";
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SelectMenuOption extends NectaryElement {
@@ -68,6 +68,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }

package/select-menu-option/types.d.ts

@@ -6,6 +6,8 @@ export type TSinchSelectMenuOptionProps = {
     text: string;
     /** Disabled state */
     disabled?: boolean;
+    /** Marks this option as an action — activating it triggers an action event instead of changing the select value */
+    action?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
 };