@solid-design-system/components 3.22.17 → 3.23.0

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/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

@@ -26,6 +26,7 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
     invalidMessage: HTMLDivElement;
     hasHover: boolean;
     private displayLabel;
+    private deletedTagLabel;
     hasFocus: boolean;
     currentOption: SdOption;
     selectedOptions: SdOption[];
@@ -54,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;
@@ -61,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;
@@ -75,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

@@ -38,6 +38,7 @@ let SdSelect = class extends SolidElement {
     this.typeToSelectString = "";
     this.hasHover = false;
     this.displayLabel = "";
+    this.deletedTagLabel = "";
     this.hasFocus = false;
     this.selectedOptions = [];
     this.showValidStyle = false;
@@ -66,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();
@@ -181,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);
@@ -203,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();
   }
@@ -222,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();
@@ -277,8 +315,12 @@ 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(() => {
         this.emit("sd-input");
         this.emit("sd-change");
@@ -316,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) {
@@ -325,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) {
@@ -348,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);
@@ -392,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);
@@ -424,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)));
@@ -497,7 +564,7 @@ let SdSelect = class extends SolidElement {
       cursorStyles,
       this.size === "sm" ? "text-sm" : "text-base",
       this.open && "z-50"
-    )}"><div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
+    )}"><span class="sr-only" role="alert" aria-live="assertive">${this.deletedTagLabel}</span><div class="flex items-center gap-1 mb-2"><label id="label" part="form-control-label" class="${hasLabel && "inline-block"}" aria-hidden="${hasLabel ? "false" : "true"}" @click="${this.handleLabelClick}"><slot name="label">${this.label}</slot></label><slot name="tooltip"></slot></div><div part="form-control-input" class="${cx("relative w-full bg-white", selectState === "disabled" ? "text-neutral-500" : "text-black")}"><div part="border" class="${cx(
       "absolute top-0 w-full h-full pointer-events-none border rounded-default",
       this.hasHover && "bg-neutral-200",
       {
@@ -528,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-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()}`;
@@ -548,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" })
@@ -577,6 +644,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], SdSelect.prototype, "displayLabel", 2);
+__decorateClass([
+  state()
+], SdSelect.prototype, "deletedTagLabel", 2);
 __decorateClass([
   state()
 ], SdSelect.prototype, "hasFocus", 2);

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';

package/dist/package/solid-components.js

@@ -8,41 +8,43 @@ import { default as default8 } from "./components/carousel/carousel.js";
 import { default as default9 } from "./components/carousel-item/carousel-item.js";
 import { default as default10 } from "./components/checkbox/checkbox.js";
 import { default as default11 } from "./components/checkbox-group/checkbox-group.js";
-import { default as default12 } from "./components/dialog/dialog.js";
-import { default as default13 } from "./components/divider/divider.js";
-import { default as default14 } from "./components/drawer/drawer.js";
-import { default as default15 } from "./components/dropdown/dropdown.js";
-import { default as default16 } from "./components/expandable/expandable.js";
-import { default as default17 } from "./components/flipcard/flipcard.js";
-import { default as default18 } from "./components/header/header.js";
-import { default as default19 } from "./components/icon/icon.js";
-import { default as default20 } from "./components/include/include.js";
-import { default as default21 } from "./components/input/input.js";
-import { default as default22 } from "./components/link/link.js";
-import { default as default23 } from "./components/map-marker/map-marker.js";
-import { default as default24 } from "./components/navigation-item/navigation-item.js";
-import { default as default25 } from "./components/notification/notification.js";
-import { default as default26 } from "./components/option/option.js";
-import { default as default27 } from "./components/popup/popup.js";
-import { default as default28 } from "./components/quickfact/quickfact.js";
-import { default as default29 } from "./components/radio/radio.js";
-import { default as default30 } from "./components/radio-button/radio-button.js";
-import { default as default31 } from "./components/radio-group/radio-group.js";
-import { default as default32 } from "./components/scrollable/scrollable.js";
-import { default as default33 } from "./components/select/select.js";
-import { default as default34 } from "./components/spinner/spinner.js";
-import { default as default35 } from "./components/step/step.js";
-import { default as default36 } from "./components/step-group/step-group.js";
-import { default as default37 } from "./components/switch/switch.js";
-import { default as default38 } from "./components/tab/tab.js";
-import { default as default39 } from "./components/tab-group/tab-group.js";
-import { default as default40 } from "./components/tab-panel/tab-panel.js";
-import { default as default41 } from "./components/tag/tag.js";
-import { default as default42 } from "./components/teaser/teaser.js";
-import { default as default43 } from "./components/teaser-media/teaser-media.js";
-import { default as default44 } from "./components/textarea/textarea.js";
-import { default as default45 } from "./components/tooltip/tooltip.js";
-import { default as default46 } from "./components/video/video.js";
+import { default as default12 } from "./components/combobox/combobox.js";
+import { default as default13 } from "./components/dialog/dialog.js";
+import { default as default14 } from "./components/divider/divider.js";
+import { default as default15 } from "./components/drawer/drawer.js";
+import { default as default16 } from "./components/dropdown/dropdown.js";
+import { default as default17 } from "./components/expandable/expandable.js";
+import { default as default18 } from "./components/flipcard/flipcard.js";
+import { default as default19 } from "./components/header/header.js";
+import { default as default20 } from "./components/icon/icon.js";
+import { default as default21 } from "./components/include/include.js";
+import { default as default22 } from "./components/input/input.js";
+import { default as default23 } from "./components/link/link.js";
+import { default as default24 } from "./components/map-marker/map-marker.js";
+import { default as default25 } from "./components/navigation-item/navigation-item.js";
+import { default as default26 } from "./components/notification/notification.js";
+import { default as default27 } from "./components/optgroup/optgroup.js";
+import { default as default28 } from "./components/option/option.js";
+import { default as default29 } from "./components/popup/popup.js";
+import { default as default30 } from "./components/quickfact/quickfact.js";
+import { default as default31 } from "./components/radio/radio.js";
+import { default as default32 } from "./components/radio-button/radio-button.js";
+import { default as default33 } from "./components/radio-group/radio-group.js";
+import { default as default34 } from "./components/scrollable/scrollable.js";
+import { default as default35 } from "./components/select/select.js";
+import { default as default36 } from "./components/spinner/spinner.js";
+import { default as default37 } from "./components/step/step.js";
+import { default as default38 } from "./components/step-group/step-group.js";
+import { default as default39 } from "./components/switch/switch.js";
+import { default as default40 } from "./components/tab/tab.js";
+import { default as default41 } from "./components/tab-group/tab-group.js";
+import { default as default42 } from "./components/tab-panel/tab-panel.js";
+import { default as default43 } from "./components/tag/tag.js";
+import { default as default44 } from "./components/teaser/teaser.js";
+import { default as default45 } from "./components/teaser-media/teaser-media.js";
+import { default as default46 } from "./components/textarea/textarea.js";
+import { default as default47 } from "./components/tooltip/tooltip.js";
+import { default as default48 } from "./components/video/video.js";
 import { registerIconLibrary, unregisterIconLibrary } from "./components/icon/library.js";
 import { LocalizeController } from "./utilities/localize.js";
 import { setupAutocomplete } from "./utilities/autocomplete-config.js";
@@ -58,41 +60,43 @@ export {
   default9 as SdCarouselItem,
   default10 as SdCheckbox,
   default11 as SdCheckboxGroup,
-  default12 as SdDialog,
-  default13 as SdDivider,
-  default14 as SdDrawer,
-  default15 as SdDropdown,
-  default16 as SdExpandable,
-  default17 as SdFlipcard,
-  default18 as SdHeader,
-  default19 as SdIcon,
-  default20 as SdInclude,
-  default21 as SdInput,
-  default22 as SdLink,
-  default23 as SdMapMarker,
-  default24 as SdNavigationItem,
-  default25 as SdNotification,
-  default26 as SdOption,
-  default27 as SdPopup,
-  default28 as SdQuickfact,
-  default29 as SdRadio,
-  default30 as SdRadioButton,
-  default31 as SdRadioGroup,
-  default32 as SdScrollable,
-  default33 as SdSelect,
-  default34 as SdSpinner,
-  default35 as SdStep,
-  default36 as SdStepGroup,
-  default37 as SdSwitch,
-  default38 as SdTab,
-  default39 as SdTabGroup,
-  default40 as SdTabPanel,
-  default41 as SdTag,
-  default42 as SdTeaser,
-  default43 as SdTeaserMedia,
-  default44 as SdTextarea,
-  default45 as SdTooltip,
-  default46 as SdVideo,
+  default12 as SdCombobox,
+  default13 as SdDialog,
+  default14 as SdDivider,
+  default15 as SdDrawer,
+  default16 as SdDropdown,
+  default17 as SdExpandable,
+  default18 as SdFlipcard,
+  default19 as SdHeader,
+  default20 as SdIcon,
+  default21 as SdInclude,
+  default22 as SdInput,
+  default23 as SdLink,
+  default24 as SdMapMarker,
+  default25 as SdNavigationItem,
+  default26 as SdNotification,
+  default27 as SdOptgroup,
+  default28 as SdOption,
+  default29 as SdPopup,
+  default30 as SdQuickfact,
+  default31 as SdRadio,
+  default32 as SdRadioButton,
+  default33 as SdRadioGroup,
+  default34 as SdScrollable,
+  default35 as SdSelect,
+  default36 as SdSpinner,
+  default37 as SdStep,
+  default38 as SdStepGroup,
+  default39 as SdSwitch,
+  default40 as SdTab,
+  default41 as SdTabGroup,
+  default42 as SdTabPanel,
+  default43 as SdTag,
+  default44 as SdTeaser,
+  default45 as SdTeaserMedia,
+  default46 as SdTextarea,
+  default47 as SdTooltip,
+  default48 as SdVideo,
   registerIconLibrary,
   setupAutocomplete,
   unregisterIconLibrary