@solid-design-system/components 3.22.18 → 3.23.1

package/dist/package/components/combobox/option-renderer.d.ts

@@ -0,0 +1,5 @@
+import type { TemplateResult } from 'lit';
+import type SdOption from '../option/option.js';
+export type OptionRenderer = (option: SdOption, query?: string) => TemplateResult | string | HTMLElement;
+export declare const defaultOptionRenderer: OptionRenderer;
+export declare const highlightOptionRenderer: OptionRenderer;

package/dist/package/components/combobox/option-renderer.js

@@ -0,0 +1,4 @@
+const defaultOptionRenderer = (option) => option;
+export {
+  defaultOptionRenderer
+};

package/dist/package/components/combobox/utils.d.ts

@@ -0,0 +1,8 @@
+import type SdOptGroup from '../optgroup/optgroup.js';
+import type SdOption from '../option/option.js';
+export declare const getAssignedElementsForSlot: (slot: HTMLSlotElement) => HTMLElement[];
+export declare const getOptionOrNestedOptions: (item: HTMLElement) => SdOption | SdOption[];
+export declare const isOptgroup: (item: HTMLElement) => item is SdOptGroup;
+export declare const getAllOptions: (items: HTMLElement[]) => (SdOption | SdOption[])[];
+export declare const filterOnlyOptgroups: (items: HTMLElement[]) => SdOptGroup[];
+export declare const normalizeString: (str: string) => string;

package/dist/package/components/combobox/utils.js

@@ -0,0 +1,14 @@
+const getAssignedElementsForSlot = (slot) => Array.from(slot.assignedElements({ flatten: true }));
+const getOptionOrNestedOptions = (item) => item.tagName.toLocaleLowerCase() === "sd-option" ? item : Array.from(item.querySelectorAll(":scope > sd-option"));
+const isOptgroup = (item) => item.tagName.toLocaleLowerCase() === "sd-optgroup";
+const getAllOptions = (items) => items.map(getOptionOrNestedOptions);
+const filterOnlyOptgroups = (items) => items.filter(isOptgroup);
+const normalizeString = (str) => str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+export {
+  filterOnlyOptgroups,
+  getAllOptions,
+  getAssignedElementsForSlot,
+  getOptionOrNestedOptions,
+  isOptgroup,
+  normalizeString
+};

package/dist/package/components/dropdown/dropdown.d.ts

@@ -22,6 +22,8 @@ export default class SdDropdown extends SolidElement {
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
+    getAccessibleTrigger(): HTMLElement | null;
+    updateAccessibleTrigger(): void;
     focusOnTrigger(): void;
     getMenu(): SdMenu | undefined;
     handleKeyDown(event: KeyboardEvent): void;
@@ -33,7 +35,6 @@ export default class SdDropdown extends SolidElement {
     handleTriggerKeyDown(event: KeyboardEvent): void;
     handleTriggerKeyUp(event: KeyboardEvent): void;
     handleTriggerSlotChange(): void;
-    updateAccessibleTrigger(): void;
     show(): Promise<void>;
     hide(): Promise<void>;
     reposition(): void;

package/dist/package/components/dropdown/dropdown.js

@@ -60,8 +60,44 @@ let SdDropdown = class extends SolidElement {
     this.removeOpenListeners();
     this.hide();
   }
+  /**
+   * Slotted triggers can be arbitrary content. The accessible trigger is the tabbable element
+   * within the slotted trigger. This could be the slotted element itself, a child of the slotted element,
+   * or an element within the slotted elements shadow root.
+   *
+   * e.g. the accessible trigger of an <sd-button> is a <button> located inside its shadow root.
+   *
+   * To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
+   * */
+  getAccessibleTrigger() {
+    const assignedElements = this.trigger.assignedElements({ flatten: true });
+    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
+    let target = null;
+    if (accessibleTrigger) {
+      switch (accessibleTrigger.tagName.toLowerCase()) {
+        case "sd-button":
+        case "sd-icon-button":
+          target = accessibleTrigger.button;
+          break;
+        case "sd-navigation-item":
+          target = accessibleTrigger.button;
+          break;
+        default:
+          target = accessibleTrigger;
+      }
+    }
+    return target;
+  }
+  // Slotted triggers can be arbitrary content, but we need to connect them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the `accessible trigger`.
+  updateAccessibleTrigger() {
+    const target = this.getAccessibleTrigger();
+    if (!target) return;
+    target.setAttribute("aria-haspopup", "true");
+    target.setAttribute("aria-expanded", this.open ? "true" : "false");
+  }
   focusOnTrigger() {
-    const trigger = this.trigger.assignedElements({ flatten: true })[0];
+    const trigger = this.getAccessibleTrigger();
     if (typeof (trigger == null ? void 0 : trigger.focus) === "function") {
       trigger.focus();
     }
@@ -163,33 +199,6 @@ let SdDropdown = class extends SolidElement {
   handleTriggerSlotChange() {
     this.updateAccessibleTrigger();
   }
-  //
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  // a child of the slotted element, or an element in the slotted element's shadow root.
-  //
-  // For example, the accessible trigger of an <sd-button> is a <button> located inside its shadow root.
-  //
-  // To determine this, we assume the first tabbable element in the trigger slot is the "accessible trigger."
-  //
-  updateAccessibleTrigger() {
-    const assignedElements = this.trigger.assignedElements({ flatten: true });
-    const accessibleTrigger = assignedElements.find((el) => getTabbableBoundary(el).start);
-    let target;
-    if (accessibleTrigger) {
-      switch (accessibleTrigger.tagName.toLowerCase()) {
-        case "sd-button":
-        case "sd-icon-button":
-          target = accessibleTrigger.button;
-          break;
-        default:
-          target = accessibleTrigger;
-      }
-      target.setAttribute("aria-haspopup", "true");
-      target.setAttribute("aria-expanded", this.open ? "true" : "false");
-    }
-  }
   /** Shows the dropdown panel. */
   async show() {
     if (this.open) {

package/dist/package/components/navigation-item/navigation-item.d.ts

@@ -1,6 +1,7 @@
 import SolidElement from '../../internal/solid-element';
 export default class SdNavigationItem extends SolidElement {
     private readonly hasSlotController;
+    button: HTMLButtonElement | HTMLLinkElement | null;
     vertical: boolean;
     size: 'base' | 'lg' | 'sm';
     href: string;

package/dist/package/components/navigation-item/navigation-item.js

@@ -3,7 +3,7 @@ import { customElement } from "../../internal/register-custom-element.js";
 import { HasSlotController } from "../../internal/slot.js";
 import { literal, html } from "lit/static-html.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { property } from "lit/decorators.js";
+import { query, property } from "lit/decorators.js";
 import componentStyles from "../../styles/component.styles.js";
 import cx from "classix";
 import InteractiveStyles from "../../styles/interactive/interactive.css.js";
@@ -145,6 +145,9 @@ SdNavigationItem.styles = [
   unsafeCSS(InteractiveStyles),
   css`:host{position:relative;box-sizing:border-box;display:inline-block}:host([vertical]){display:block}details summary::-webkit-details-marker{display:none}`
 ];
+__decorateClass([
+  query('a[part="base"], button[part="base"]')
+], SdNavigationItem.prototype, "button", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], SdNavigationItem.prototype, "vertical", 2);

package/dist/package/components/optgroup/optgroup.d.ts

@@ -0,0 +1,20 @@
+import SdDivider from '../divider/divider';
+import SolidElement from '../../internal/solid-element';
+import type { CSSResultGroup } from 'lit';
+export default class SdOptgroup extends SolidElement {
+    static dependencies: {
+        'sd-divider': typeof SdDivider;
+    };
+    defaultSlot: HTMLSlotElement;
+    private handleDisableOptions;
+    disabled: boolean;
+    label: string;
+    handleDisabledChange(): void;
+    render(): import("lit").TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sd-optgroup': SdOptgroup;
+    }
+}

package/dist/package/components/optgroup/optgroup.js

@@ -0,0 +1,68 @@
+import { css } from "lit";
+import { customElement } from "../../internal/register-custom-element.js";
+import { html } from "lit/static-html.js";
+import { query, property } from "lit/decorators.js";
+import { watch } from "../../internal/watch.js";
+import componentStyles from "../../styles/component.styles.js";
+import cx from "classix";
+import SdDivider from "../divider/divider.js";
+import SolidElement from "../../internal/solid-element.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let SdOptgroup = class extends SolidElement {
+  constructor() {
+    super(...arguments);
+    this.disabled = false;
+    this.label = "";
+  }
+  /**
+   * Syncs the disabled prop for all slotted sd-options when it is triggered
+   */
+  handleDisableOptions() {
+    const { disabled } = this;
+    this.defaultSlot.assignedElements().filter((opt) => opt.tagName.toLowerCase() === "sd-option").forEach((opt) => {
+      opt.disabled = disabled;
+    });
+  }
+  handleDisabledChange() {
+    this.handleDisableOptions();
+  }
+  render() {
+    const { disabled } = this;
+    return html`<div role="${disabled ? "presentation" : "group"}" class="${cx(this.disabled ? "text-neutral-500" : "")}" part="base" aria-labelledby="group-label"><sd-divider id="divider" class="pt-2 pb-4" part="divider"></sd-divider><div part="label-container" class="${cx(this.disabled ? "text-neutral-500" : "text-black")} px-4 font-bold text-left" role="presentation" id="group-label"><slot name="label"><span>${this.label}</span></slot></div><div role="group" part="options"><slot @slotchange="${this.handleDisableOptions}"></slot></div></div>`;
+  }
+};
+SdOptgroup.dependencies = {
+  "sd-divider": SdDivider
+};
+SdOptgroup.styles = [
+  componentStyles,
+  SolidElement.styles,
+  css`:host{--display-divider:block}#divider{display:var(--display-divider)}`
+];
+__decorateClass([
+  query("slot:not([name])")
+], SdOptgroup.prototype, "defaultSlot", 2);
+__decorateClass([
+  property({ reflect: true, type: Boolean })
+], SdOptgroup.prototype, "disabled", 2);
+__decorateClass([
+  property()
+], SdOptgroup.prototype, "label", 2);
+__decorateClass([
+  watch("disabled", { waitUntilFirstUpdate: true })
+], SdOptgroup.prototype, "handleDisabledChange", 1);
+SdOptgroup = __decorateClass([
+  customElement("sd-optgroup")
+], SdOptgroup);
+export {
+  SdOptgroup as default
+};

package/dist/package/components/select/select.d.ts

@@ -55,6 +55,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     get validity(): ValidityState;
     get validationMessage(): string;
     connectedCallback(): void;
+    firstUpdated(): void;
     private addOpenListeners;
     private removeOpenListeners;
     private handleFocus;
@@ -62,10 +63,13 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     private handleDocumentFocusIn;
     private handleDocumentKeyDown;
     private handleDocumentMouseDown;
+    private handleTagKeyDown;
+    private handleTagMaxOptionsKeyDown;
     private handleLabelClick;
     private handleComboboxMouseDown;
     private handleComboboxKeyDown;
     private handleClearClick;
+    private clearSelect;
     private handleClearMouseDown;
     private handleOptionClick;
     private handleDefaultSlotChange;
@@ -76,7 +80,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     private setSelectedOptions;
     private toggleOptionSelection;
     private selectionChanged;
-    protected get tags(): TemplateResult<1>[];
+    protected get tags(): (TemplateResult<1> | TemplateResult<1>[])[];
     private handleInvalid;
     private handleMouseEnter;
     private handleMouseLeave;

package/dist/package/components/select/select.js

@@ -67,7 +67,7 @@ let SdSelect = class extends SolidElement {
               base:tag__base,
               content:tag__content,
               removable-indicator:tag__removable-indicator,
-            " size="${this.size === "sm" ? "sm" : "lg"}" removable @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-tag>`;
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagKeyDown(event, option)}" @sd-remove="${(event) => this.handleTagRemove(event, option)}">${option.getTextLabel()}</sd-tag>`;
     };
     this.handleDocumentFocusIn = (event) => {
       const path = event.composedPath();
@@ -182,9 +182,11 @@ let SdSelect = class extends SolidElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.applySizeToOptions();
     this.open = false;
   }
+  firstUpdated() {
+    this.applySizeToOptions();
+  }
   addOpenListeners() {
     document.addEventListener("focusin", this.handleDocumentFocusIn);
     document.addEventListener("keydown", this.handleDocumentKeyDown);
@@ -204,6 +206,40 @@ let SdSelect = class extends SolidElement {
     this.hasFocus = false;
     this.emit("sd-blur");
   }
+  handleTagKeyDown(event, option) {
+    var _a, _b, _c;
+    if (event.key === "Backspace" && this.multiple) {
+      event.stopPropagation();
+      const tagParent = (_a = event.currentTarget) == null ? void 0 : _a.parentElement;
+      const previousTag = (_b = tagParent == null ? void 0 : tagParent.previousElementSibling) == null ? void 0 : _b.querySelector("sd-tag");
+      const nextTag = (_c = tagParent == null ? void 0 : tagParent.nextElementSibling) == null ? void 0 : _c.querySelector("sd-tag");
+      this.handleTagRemove(new CustomEvent("sd-remove"), option);
+      this.updateComplete.then(() => {
+        if (nextTag) {
+          nextTag.focus();
+        } else if (previousTag) {
+          previousTag.focus();
+        } else {
+          this.focus({ preventScroll: true });
+        }
+      });
+    }
+  }
+  handleTagMaxOptionsKeyDown(event) {
+    if (event.key === "Backspace" && this.multiple) {
+      event.stopPropagation();
+      this.handleTagRemove(new CustomEvent("sd-remove"), this.selectedOptions[this.selectedOptions.length - 1]);
+      this.updateComplete.then(() => {
+        var _a;
+        const tags = (_a = this.shadowRoot) == null ? void 0 : _a.querySelectorAll("sd-tag");
+        if (tags && tags.length > 0) {
+          tags == null ? void 0 : tags[(tags == null ? void 0 : tags.length) - 1].focus();
+        } else {
+          this.focus({ preventScroll: true });
+        }
+      });
+    }
+  }
   handleLabelClick() {
     this.displayInput.focus();
   }
@@ -223,15 +259,16 @@ let SdSelect = class extends SolidElement {
   }
   handleClearClick(event) {
     event.stopPropagation();
-    if (this.value !== "") {
-      this.setSelectedOptions([]);
-      this.displayInput.focus({ preventScroll: true });
-      this.updateComplete.then(() => {
-        this.emit("sd-clear");
-        this.emit("sd-input");
-        this.emit("sd-change");
-      });
-    }
+    this.clearSelect();
+  }
+  clearSelect() {
+    this.setSelectedOptions([]);
+    this.displayInput.focus({ preventScroll: true });
+    this.updateComplete.then(() => {
+      this.emit("sd-clear");
+      this.emit("sd-input");
+      this.emit("sd-change");
+    });
   }
   handleClearMouseDown(event) {
     event.stopPropagation();
@@ -278,7 +315,10 @@ let SdSelect = class extends SolidElement {
   }
   handleTagRemove(event, option) {
     event.stopPropagation();
-    if (!this.disabled) {
+    if (!option) {
+      this.clearSelect();
+    }
+    if (option && !this.disabled) {
       this.toggleOptionSelection(option, false);
       this.deletedTagLabel = this.localize.term("removed", option.textContent);
       this.updateComplete.then(() => {
@@ -318,7 +358,11 @@ let SdSelect = class extends SolidElement {
     if (newSelectedOptions.length) {
       newSelectedOptions.forEach((el) => el.selected = true);
     }
-    this.selectionChanged();
+    if (Array.isArray(option)) {
+      this.selectionChanged();
+    } else {
+      this.selectionChanged(option);
+    }
   }
   // Toggles an option's selected state
   toggleOptionSelection(option, force) {
@@ -327,13 +371,25 @@ let SdSelect = class extends SolidElement {
     } else {
       option.selected = !option.selected;
     }
-    this.selectionChanged();
+    if (Array.isArray(option)) {
+      this.selectionChanged();
+    } else {
+      this.selectionChanged(option);
+    }
   }
   // This method must be called whenever the selection changes. It will update the selected options cache, the current
   // value, and the display value
-  selectionChanged() {
+  selectionChanged(option) {
     var _a, _b;
-    this.selectedOptions = this.getAllOptions().filter((el) => el.selected);
+    if (option && this.multiple) {
+      if (this.selectedOptions.find((el) => el.value === option.value)) {
+        this.selectedOptions = this.selectedOptions.filter((el) => el.value !== option.value);
+      } else {
+        this.selectedOptions = [...this.selectedOptions, option];
+      }
+    } else {
+      this.selectedOptions = this.getAllOptions().filter((el) => el.selected);
+    }
     if (this.multiple) {
       this.value = this.selectedOptions.map((el) => el.value);
       if (this.useTags || this.value.length === 0) {
@@ -350,15 +406,23 @@ let SdSelect = class extends SolidElement {
     });
   }
   get tags() {
-    return this.selectedOptions.map((option, index) => {
-      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
-        const tag = this.getTag(option, index);
-        return html`<div @sd-remove="${(e) => this.handleTagRemove(e, option)}">${typeof tag === "string" ? unsafeHTML(tag) : tag}</div>`;
-      } else if (index === this.maxOptionsVisible) {
-        return html`<sd-tag size="${this.size === "sm" ? "sm" : "lg"}" ?disabled="${this.disabled}">+${this.selectedOptions.length - index}</sd-tag>`;
-      }
-      return html``;
-    });
+    if (this.selectedOptions.length <= this.maxOptionsVisible) {
+      return this.selectedOptions.map((option, index) => {
+        if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {
+          const tag = this.getTag(option, index);
+          return html`<div @sd-remove="${(e) => this.handleTagRemove(e, option)}">${typeof tag === "string" ? unsafeHTML(tag) : tag}</div>`;
+        }
+        return [html``];
+      });
+    } else {
+      return [
+        html`<sd-tag ?disabled="${this.disabled}" part="tag" exportparts="
+              base:tag__base,
+              content:tag__content,
+              removable-indicator:tag__removable-indicator,
+            " size="${this.size === "sm" ? "sm" : "lg"}" removable @keydown="${(event) => this.handleTagMaxOptionsKeyDown(event)}" @sd-remove="${(event) => this.handleTagRemove(event)}">${this.selectedOptions.length} ${this.localize.term("tagsSelected")}</sd-tag>`
+      ];
+    }
   }
   handleInvalid(event) {
     this.formControlController.setValidity(false);
@@ -394,7 +458,7 @@ let SdSelect = class extends SolidElement {
   }
   async handleOpenChange() {
     if (this.open && !this.disabled) {
-      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
+      if (!this.multiple) this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
       this.emit("sd-show");
       this.addOpenListeners();
       await stopAnimations(this);
@@ -426,6 +490,7 @@ let SdSelect = class extends SolidElement {
     });
   }
   handleValueChange() {
+    if (this.selectedOptions.length === (Array.isArray(this.value) ? this.value.length : 1)) return;
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
     this.setSelectedOptions(allOptions.filter((el) => value.includes(el.value)));
@@ -530,13 +595,13 @@ let SdSelect = class extends SolidElement {
       "appearance-none outline-none flex-grow bg-transparent w-full placeholder-neutral-700",
       cursorStyles,
       this.multiple && this.useTags && this.value.length > 0 ? "hidden" : ""
-    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""} <input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
+    )}" type="text" placeholder="${this.placeholder}" .disabled="${this.disabled}" .value="${this.displayLabel}" autocomplete="off" spellcheck="false" autocapitalize="off" readonly="readonly" aria-controls="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-haspopup="listbox" aria-labelledby="label" aria-disabled="${this.disabled ? "true" : "false"}" aria-invalid="${this.showInvalidStyle}" aria-describedby="help-text invalid-message" role="combobox" tabindex="0" @focus="${this.handleFocus}" @blur="${this.handleBlur}"> ${this.multiple && this.useTags ? html`<div part="tags" class="flex-grow flex flex-wrap items-center gap-1">${this.tags}</div>` : ""}<div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">${this.selectedOptions.map((option) => option == null ? void 0 : option.getTextLabel()).join(", ")}</div><input class="${cx("value-input absolute top-0 left-0 w-full h-full opacity-0 -z-10", cursorStyles)}" type="text" ?disabled="${this.disabled}" ?required="${this.required}" .value="${Array.isArray(this.value) ? this.value.join(", ") : this.value}" tabindex="-1" aria-controls="control-value" aria-hidden="true" @focus="${() => this.focus()}" @invalid="${this.handleInvalid}"> ${hasClearIcon ? html`<button part="clear-button" class="${cx("select__clear flex justify-center", iconMarginLeft)}" type="button" aria-label="${this.localize.term("clearEntry")}" @mousedown="${this.handleClearMouseDown}" @click="${this.handleClearClick}" tabindex="-1"><slot name="clear-icon"><sd-icon class="${cx("text-icon-fill-neutral-800", iconSize)}" library="system" name="closing-round"></sd-icon></slot></button>` : ""} ${this.showInvalidStyle ? html`<sd-icon part="invalid-icon" class="${cx(iconMarginLeft, iconSize, "text-error")}" library="system" name="risk"></sd-icon>` : ""} ${this.styleOnValid && this.showValidStyle ? html`<sd-icon part="valid-icon" class="${cx("flex-shrink-0 text-success", iconMarginLeft, iconSize)}" library="system" name="status-check"></sd-icon>` : ""}<slot name="expand-icon" part="expand-icon" class="${cx(
       "inline-flex ml-2 transition-all",
       this.open ? "rotate-180" : "rotate-0",
       this.disabled ? "text-neutral-500" : "text-primary",
       iconSize
     )}"><sd-icon name="chevron-down" part="chevron" library="system" color="currentColor"></sd-icon></slot></div><div id="listbox" role="listbox" aria-expanded="${this.open ? "true" : "false"}" aria-multiselectable="${this.multiple ? "true" : "false"}" aria-labelledby="label" part="listbox" class="${cx(
-      "bg-white px-2 py-3 relative border-primary overflow-y-auto",
+      "bg-white px-2 py-3 relative border-primary overflow-y-scroll",
       this.open && "shadow",
       this.currentPlacement === "bottom" ? "border-r-2 border-b-2 border-l-2 rounded-br-default rounded-bl-default" : "border-r-2 border-t-2 border-l-2 rounded-tr-default rounded-tl-default"
     )}" tabindex="-1" @mouseup="${this.handleOptionClick}" @slotchange="${this.handleDefaultSlotChange}"><slot></slot></div></sd-popup></div><div class="text-sm text-neutral-700" part="form-control-help-text" id="help-text" aria-hidden="${hasHelpText ? "false" : "true"}"><slot name="help-text">${this.helpText}</slot></div></div>${this.formControlController.renderInvalidMessage()}`;
@@ -550,7 +615,7 @@ SdSelect.dependencies = {
 SdSelect.styles = [
   componentStyles,
   SolidElement.styles,
-  css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900);overflow-y:scroll}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
+  css`:host{position:relative;display:block;width:100%}:host([required]) #label::after{content:' *'}[part=listbox]{max-height:var(--auto-size-available-height,auto)}sd-popup::part(popup){z-index:var(--sd-z-index-dropdown,900)}sd-tag::part(base){border-radius:var(--sd-border-radius-default,.25rem);padding-left:var(--sd-spacing-1,.25rem);padding-right:var(--sd-spacing-1,.25rem)}sd-tag[size=lg]::part(base){padding-left:var(--sd-spacing-2,.5rem);padding-right:var(--sd-spacing-2,.5rem)}sd-tag[disabled=false]::part(base):hover{--tw-bg-opacity:1;background-color:rgb(var(--sd-color-primary-100,236 240 249) / var(--tw-bg-opacity))}`
 ];
 __decorateClass([
   queryAssignedElements({ selector: "sd-option" })

package/dist/package/internal/tabbable.js

@@ -12,7 +12,7 @@ function isTabbable(el) {
   if (tag === "input" && el.getAttribute("type") === "radio" && !el.hasAttribute("checked")) {
     return false;
   }
-  if (el.offsetParent === null) {
+  if (el.offsetParent === null && !(el.getRootNode() instanceof ShadowRoot)) {
     return false;
   }
   if (window.getComputedStyle(el).visibility === "hidden") {

package/dist/package/solid-components.d.ts

@@ -8,6 +8,7 @@ export { default as SdCarousel } from './components/carousel/carousel';
 export { default as SdCarouselItem } from './components/carousel-item/carousel-item';
 export { default as SdCheckbox } from './components/checkbox/checkbox';
 export { default as SdCheckboxGroup } from './components/checkbox-group/checkbox-group';
+export { default as SdCombobox } from './components/combobox/combobox';
 export { default as SdDialog } from './components/dialog/dialog';
 export { default as SdDivider } from './components/divider/divider';
 export { default as SdDrawer } from './components/drawer/drawer';
@@ -22,6 +23,7 @@ export { default as SdLink } from './components/link/link';
 export { default as SdMapMarker } from './components/map-marker/map-marker';
 export { default as SdNavigationItem } from './components/navigation-item/navigation-item';
 export { default as SdNotification } from './components/notification/notification';
+export { default as SdOptgroup } from './components/optgroup/optgroup';
 export { default as SdOption } from './components/option/option';
 export { default as SdPopup } from './components/popup/popup';
 export { default as SdQuickfact } from './components/quickfact/quickfact';