@odx/foundation 1.0.0-beta.10 → 1.0.0-beta.12

package/dist/cdk/control/listbox-form-control.d.ts

@@ -0,0 +1,22 @@
+import { CustomElement } from '../../lib/main.js';
+import { PropertyValues } from 'lit';
+import { OptionControl } from './option-control.js';
+declare const ListboxFormControl_base: import('../../lib/main.js').Constructor<import('../../lib/main.js').IsFormControl<string | string[]>> & typeof CustomElement;
+export declare abstract class ListboxFormControl<Option extends OptionControl> extends ListboxFormControl_base {
+    #private;
+    protected abstract options: Option[];
+    autoSelect: boolean;
+    multiple: boolean;
+    value: string[] | string;
+    get selectedOptions(): MapIterator<Option>;
+    constructor();
+    canAutoSelect(option: Option): boolean;
+    canSelect(option: Option): boolean;
+    toggleOption(option: Option, state?: boolean): void;
+    connectedCallback(): void;
+    protected updateValue(option: Option): void;
+    protected willUpdate(props: PropertyValues<this>): void;
+    protected updateSelection(): void;
+}
+export {};
+//# sourceMappingURL=listbox-form-control.d.ts.map

package/dist/cdk/control/option-control.d.ts

@@ -1,15 +1,24 @@
-import { CanBeDisabled, CustomElement } from '../../lib/main.js';
+import { CanBeDisabled, CanBeHighlighted, CustomElement } from '../../lib/main.js';
 import { PropertyValueMap } from 'lit';
-declare const OptionControl_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
-export declare abstract class OptionControl extends OptionControl_base {
-    role: 'option' | 'gridcell' | 'row' | 'tab' | null;
+export interface Option {
+    label?: string;
+    value: string;
     selected: boolean;
+    disabled?: boolean;
+}
+declare const OptionControl_base: import('../../lib/main.js').Constructor<CanBeHighlighted> & import('../../lib/main.js').Constructor<CanBeDisabled> & typeof CustomElement;
+export declare abstract class OptionControl extends OptionControl_base implements Option {
+    #private;
+    role: 'option' | 'gridcell' | 'row' | 'tab' | null;
+    set label(value: string);
+    get label(): string;
     value: string;
+    selected: boolean;
+    type?: 'checkbox' | null;
     getTextLabel(): string;
-    setActive(): void;
-    setInactive(): void;
+    toggle(force?: boolean): void;
     connectedCallback(): void;
-    protected willUpdate(changes: PropertyValueMap<this>): void;
+    protected willUpdate(props: PropertyValueMap<this>): void;
 }
 export {};
 //# sourceMappingURL=option-control.d.ts.map

package/dist/cdk/interactive/interactive-element.d.ts

@@ -15,8 +15,8 @@ declare const InteractiveElement_base: import('../../lib/main.js').Constructor<i
  */
 export declare class InteractiveElement extends InteractiveElement_base implements InteractiveElement {
     #private;
-    nativeElement: HTMLButtonElement | HTMLAnchorElement;
     static readonly styles: import('lit').CSSResult;
+    nativeElement: HTMLButtonElement | HTMLAnchorElement;
     loaderSlot?: 'prefix' | 'suffix';
     lineClamp: 1 | 2;
     protected render(): TemplateResult;

package/dist/cdk/main.d.ts

@@ -1,8 +1,8 @@
 export * from './control/checkbox-form-control.js';
 export * from './control/checkbox-group-form-control.js';
+export * from './control/listbox-form-control.js';
 export * from './control/option-control.js';
 export * from './control/radio-group-form-control.js';
-export * from './control/select-form-control.js';
 export * from './drag-drop/drag-events.js';
 export * from './drag-drop/drag.controller.js';
 export * from './drag-drop/is-draggable.js';

package/dist/cdk/popover/popover-host.d.ts

@@ -15,9 +15,11 @@ export declare class PopoverHost extends CustomElement {
     unmountPopover(referenceElement: HTMLElement): void;
     isPopoverOpen(): boolean;
     togglePopover(force?: boolean): boolean;
+    canPopoverShow?(): boolean;
     onBeforePopoverShow?(): void;
     onPopoverShow?(): void;
     onBeforePopoverHide?(): void;
     onPopoverHide?(): void;
+    canPopoverHide?(): boolean;
 }
 //# sourceMappingURL=popover-host.d.ts.map

package/dist/cdk.js

@@ -1,4 +1,4 @@
-import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeDisabled, getElementFromEvent, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
+import { FormControl, CustomElement, getKeyboardEventInfo, toAriaBooleanAttribute, CanBeHighlighted, CanBeDisabled, toggleAttribute, getUniqueId, getElementFromEvent, ActiveDescendantsController, dedupeMixin, optionalAttr, requestUpdateOnAriaChange, WithLoadingState, getAssignedElements, toPx, waitForAnimations, findClosestDocument, createMutationObserver, customElement } from '@odx/foundation';
 import { isServer, html, unsafeCSS } from 'lit';
 import { property, queryAssignedElements, query, state } from 'lit/decorators.js';
 import { R as RovingTabindexController, m as minBy } from './vendor-dJxQG085.js';
@@ -189,39 +189,50 @@ var __decorateClass$7 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$7(target, key, result);
   return result;
 };
-class OptionControl extends CanBeDisabled(CustomElement) {
+class OptionControl extends CanBeHighlighted(CanBeDisabled(CustomElement)) {
   constructor() {
     super(...arguments);
     this.role = null;
-    this.selected = false;
     this.value = "";
+    this.selected = false;
+  }
+  #label;
+  set label(value) {
+    this.#label = value;
+  }
+  get label() {
+    return this.#label || this.getTextLabel();
   }
   getTextLabel() {
     return this.textContent?.trim() ?? "";
   }
-  setActive() {
-    this.setAttribute("odx-active", "true");
-  }
-  setInactive() {
-    this.removeAttribute("odx-active");
+  toggle(force) {
+    toggleAttribute(this, "odx-active", force ?? !this.hasAttribute("odx-active"));
   }
   connectedCallback() {
     super.connectedCallback();
     this.role ||= "option";
+    this.id ||= getUniqueId(this.localName);
   }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("selected")) {
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("selected")) {
       this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
     }
   }
 }
 __decorateClass$7([
-  property({ type: Boolean })
-], OptionControl.prototype, "selected", 2);
+  property({ type: String })
+], OptionControl.prototype, "label", 1);
 __decorateClass$7([
   property()
 ], OptionControl.prototype, "value", 2);
+__decorateClass$7([
+  property({ type: Boolean })
+], OptionControl.prototype, "selected", 2);
+__decorateClass$7([
+  property({ reflect: true })
+], OptionControl.prototype, "type", 2);
 
 var __defProp$6 = Object.defineProperty;
 var __getOwnPropDesc$6 = Object.getOwnPropertyDescriptor;
@@ -233,6 +244,148 @@ var __decorateClass$6 = (decorators, target, key, kind) => {
   if (kind && result) __defProp$6(target, key, result);
   return result;
 };
+class ListboxFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.#selectedOptions = /* @__PURE__ */ new Map();
+    this.autoSelect = false;
+    this.multiple = false;
+    this.value = "";
+    this.#handleBlur = (_event) => {
+      this.#activeDecendants.deactivate();
+    };
+    this.#handleClick = (event) => {
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option) return;
+      this.toggleOption(option);
+    };
+    this.#handleFocus = (_event) => {
+      const selectedIndex = this.options.findIndex((option) => !option.disabled && option.selected);
+      this.#activeDecendants.activate(selectedIndex === -1 ? void 0 : selectedIndex);
+    };
+    this.#handleKeyEvent = (event) => {
+      const activeOption = this.#activeDecendants.activeItem;
+      if (!activeOption) return;
+      const { actions } = getKeyboardEventInfo(event);
+      if (actions.enter || actions.space || actions.tab && this.canAutoSelect(activeOption)) {
+        if (this.multiple) {
+          event.stopPropagation();
+          event.stopImmediatePropagation();
+        }
+        this.toggleOption(activeOption);
+      }
+    };
+    if (!isServer) {
+      this.addEventListener("blur", this.#handleBlur);
+      this.addEventListener("focusin", this.#handleFocus);
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.#handleKeyEvent);
+    }
+    this.#activeDecendants = new ActiveDescendantsController(this, {
+      getItems: () => this.options,
+      onChange: (_, option, firstChange) => {
+        option?.scrollIntoView();
+        if (!option || !this.canAutoSelect(option) || firstChange || option.selected) return;
+        this.toggleOption(option, true);
+      }
+    });
+  }
+  #activeDecendants;
+  #selectedOptions;
+  get selectedOptions() {
+    return this.#selectedOptions.values();
+  }
+  canAutoSelect(option) {
+    return this.autoSelect && !option.disabled && !this.multiple;
+  }
+  canSelect(option) {
+    return !option.disabled;
+  }
+  toggleOption(option, state) {
+    if (!this.canSelect(option)) return;
+    const newState = state ?? (this.required && !this.multiple || !option.selected);
+    if (this.disabled || newState === option.selected) return;
+    option.selected = newState;
+    this.updateValue(option);
+    if (newState) {
+      option.scrollIntoView();
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.role ||= "listbox";
+    this.id ||= getUniqueId(this.localName);
+  }
+  updateValue(option) {
+    if (this.multiple) {
+      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
+      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
+    } else {
+      this.value = option.selected ? option.value : "";
+    }
+    this.#activeDecendants.select(option);
+    this.updateSelection();
+    this.emit("change");
+  }
+  willUpdate(props) {
+    super.willUpdate?.(props);
+    if (props.has("multiple")) {
+      this.#handleMultipleChange();
+    }
+    if (props.has("required") || props.has("value")) {
+      const [selectedOption] = this.#selectedOptions.values();
+      if (!selectedOption?.selected) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
+    }
+  }
+  updateSelection() {
+    if (this.disabled) return;
+    for (const option of this.options ?? []) {
+      if (option.disabled) continue;
+      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      if (option.selected) {
+        this.#selectedOptions.set(option.value, option);
+      } else {
+        this.#selectedOptions.delete(option.value);
+      }
+    }
+  }
+  #handleBlur;
+  #handleClick;
+  #handleFocus;
+  #handleKeyEvent;
+  #handleMultipleChange() {
+    const optionType = this.multiple ? "checkbox" : null;
+    for (const option of this.options) {
+      option.type = optionType;
+    }
+    if (this.multiple) return;
+    const [selectedOption] = this.#selectedOptions.values();
+    if (selectedOption) {
+      this.updateValue(selectedOption);
+    }
+  }
+}
+__decorateClass$6([
+  property({ type: Boolean, attribute: "auto-select", reflect: true })
+], ListboxFormControl.prototype, "autoSelect", 2);
+__decorateClass$6([
+  property({ type: Boolean, reflect: true })
+], ListboxFormControl.prototype, "multiple", 2);
+__decorateClass$6([
+  property()
+], ListboxFormControl.prototype, "value", 2);
+
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
+var __decorateClass$5 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result);
+  return result;
+};
 class RadioGroupFormControl extends FormControl(CustomElement) {
   static {
     this.shadowRootOptions = {
@@ -299,110 +452,10 @@ class RadioGroupFormControl extends FormControl(CustomElement) {
     this.value = target.value;
   };
 }
-__decorateClass$6([
+__decorateClass$5([
   queryAssignedElements({ flatten: true })
 ], RadioGroupFormControl.prototype, "elements", 2);
 
-var __defProp$5 = Object.defineProperty;
-var __getOwnPropDesc$5 = Object.getOwnPropertyDescriptor;
-var __decorateClass$5 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$5(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$5(target, key, result);
-  return result;
-};
-class SelectFormControl extends FormControl(
-  CustomElement
-) {
-  constructor() {
-    super();
-    this.#selectedOptions = /* @__PURE__ */ new Map();
-    this.multiple = false;
-    this.value = "";
-    this.handleKeyboardEvent = (event) => {
-      const { actions } = getKeyboardEventInfo(event);
-      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
-      if (!option || !actions.enter && !actions.space) return;
-      event.preventDefault();
-      if (event.type === "keydown") return;
-      this.toggle(option, void 0, true);
-    };
-    this.#handleClick = (event) => {
-      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
-      if (!option) return;
-      this.toggle(option, void 0, true);
-    };
-    if (!isServer) {
-      this.addEventListener("click", this.#handleClick);
-      this.addEventListener("keydown", this.handleKeyboardEvent);
-      this.addEventListener("keyup", this.handleKeyboardEvent);
-    }
-  }
-  #selectedOptions;
-  get selectedOptions() {
-    return this.#selectedOptions.values();
-  }
-  toggle(option, state, emitEvent = false) {
-    const currentState = option.selected;
-    const newState = state ?? !option.selected;
-    if (this.disabled || newState === option.selected) return;
-    option.selected = newState;
-    this.updateValue(option);
-    if (!emitEvent || !this.emit("change")) return;
-    option.selected = currentState;
-    this.updateValue(option);
-  }
-  updateValue(option) {
-    if (this.multiple) {
-      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
-      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
-    } else {
-      this.value = option.value;
-    }
-  }
-  willUpdate(changes) {
-    super.willUpdate?.(changes);
-    if (changes.has("multiple")) {
-      const [selectedOption] = Array.from(this.#selectedOptions.entries());
-      if (selectedOption) {
-        this.updateValue(selectedOption[1]);
-      }
-    }
-    if (changes.has("value")) {
-      this.updateSelection();
-    }
-    if (changes.has("required") || changes.has("value")) {
-      const [selectedOption] = this.#selectedOptions.values();
-      if (!selectedOption?.selected) return;
-      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
-    }
-  }
-  async updateSelection() {
-    if (this.disabled) return;
-    await 0;
-    for (const option of this.options ?? []) {
-      if (option.disabled) continue;
-      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
-      option.setInactive();
-      if (option.selected) {
-        this.#selectedOptions.set(option.value, option);
-      } else {
-        this.#selectedOptions.delete(option.value);
-      }
-    }
-    this.requestUpdate();
-  }
-  #handleClick;
-}
-__decorateClass$5([
-  property({ type: Boolean, reflect: true })
-], SelectFormControl.prototype, "multiple", 2);
-__decorateClass$5([
-  property()
-], SelectFormControl.prototype, "value", 2);
-
 var __defProp$4 = Object.defineProperty;
 var __getOwnPropDesc$4 = Object.getOwnPropertyDescriptor;
 var __decorateClass$4 = (decorators, target, key, kind) => {
@@ -763,7 +816,6 @@ class PopoverHost extends CustomElement {
     this.referenceElement = null;
     this.anchor = "";
     this.#handleToggle = async ({ newState }) => {
-      this.isOpen = newState === "open";
       if (this.isOpen) {
         this.onBeforePopoverShow?.();
         await waitForAnimations(this);
@@ -773,6 +825,7 @@ class PopoverHost extends CustomElement {
         await waitForAnimations(this);
         this.onPopoverHide?.();
       }
+      this.isOpen = newState === "open";
     };
     if (!isServer) {
       this.addEventListener("toggle", this.#handleToggle);
@@ -816,13 +869,13 @@ class PopoverHost extends CustomElement {
     this.hidePopover();
   }
   isPopoverOpen() {
-    return this.isOpen || this.matches(":popover-open");
+    return this.isOpen;
   }
   togglePopover(force) {
     const isOpen = force ?? !this.isPopoverOpen();
-    if (isOpen) {
+    if (isOpen && this.canPopoverShow?.() !== false) {
       this.showPopover();
-    } else {
+    } else if (this.canPopoverHide?.() !== false) {
       this.hidePopover();
     }
     return isOpen;
@@ -859,7 +912,7 @@ __decorateClass$1([
   property({ reflect: true })
 ], PopoverHost.prototype, "placement", 2);
 
-const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent}:host::part(arrow),:host::part(content){background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;box-shadow:var(--_popover-shadow);color:var(--_popover-color-foreground);padding:var(--_outer-padding);border-radius:var(--_border-radius);z-index:2;overflow:auto;scrollbar-width:thin}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
+const styles = ":host{--_arrow-size: var(--odx-size-50);--_outer-padding: var(--odx-size-75);--_border-radius: var(--odx-popover-border-radius, var(--odx-border-radius-controls));display:flex;background-color:transparent;border-radius:var(--_border-radius);padding-block:var(--_outer-padding);box-shadow:var(--_popover-shadow)}:host::part(arrow),:host{background-color:var(--_popover-color-background)}:host::part(content){display:flex;flex-direction:column;position:relative;inset-block-start:0!important;inset-inline-start:0!important;block-size:fit-content;min-block-size:var(--_popover-min-block-size);max-block-size:100%;min-inline-size:var(--_popover-min-inline-size);max-inline-size:100%;color:var(--_popover-color-foreground);padding-inline:var(--_outer-padding);border-radius:inherit;z-index:2;overflow:auto;scrollbar-width:thin;scroll-behavior:smooth;scroll-padding-block:calc(var(--odx-size-150) + var(--_outer-padding))}:host::part(arrow){border-radius:var(--odx-border-radius-sm);position:absolute;inline-size:var(--_arrow-size);block-size:var(--_arrow-size);z-index:3;inset:0;transform:translate3d(var(--_popover-arrow-position-x),var(--_popover-arrow-position-y),0) rotate(45deg)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -892,4 +945,4 @@ OdxPopover = __decorateClass([
   customElement("odx-popover", [styles])
 ], OdxPopover);
 
-export { CheckboxFormControl, CheckboxGroupFormControl, DragController, DragControllerOptions, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, SelectFormControl, isDraggableElement };
+export { CheckboxFormControl, CheckboxGroupFormControl, DragController, DragControllerOptions, IS_DRAG_ACTIVE_ATTRIBUTE, InteractiveElement, InteractiveLink, IsDraggable, ListboxFormControl, OdxPopover, OptionControl, PopoverHost, PopoverPlacement, PopoverPlacementOptions, PopoverSide, RadioGroupFormControl, isDraggableElement };

package/dist/components/checkbox/checkbox.d.ts

@@ -8,7 +8,7 @@ declare global {
 export declare class OdxCheckbox extends CheckboxFormControl {
     indeterminate: boolean;
     protected render(): TemplateResult;
-    protected willUpdate(changes: PropertyValueMap<this>): void;
+    protected willUpdate(props: PropertyValueMap<this>): void;
     toggle(state?: boolean, dispatchEvent?: boolean): void;
 }
 //# sourceMappingURL=checkbox.d.ts.map

package/dist/components/chip/chip.d.ts

@@ -15,8 +15,8 @@ export declare class OdxChip extends OdxChip_base {
     variant?: ChipVariant;
     protected render(): TemplateResult;
     protected renderAction(): TemplateResult;
-    protected willUpdate(changes: PropertyValues<this>): void;
-    protected updated(changes: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
+    protected updated(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=chip.d.ts.map

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

@@ -0,0 +1,20 @@
+import { ListboxFormControl, OptionControl } from '../../cdk/main.js';
+import { TemplateResult } from 'lit';
+import { OdxDropdown } from '../dropdown/index.js';
+import { OdxOption } from '../option/index.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'odx-combobox': OdxCombobox;
+    }
+}
+export declare class OdxCombobox extends ListboxFormControl<OptionControl> {
+    #private;
+    control?: HTMLInputElement | HTMLButtonElement;
+    protected options: OdxOption[];
+    protected readonly dropdown: OdxDropdown;
+    protected base?: HTMLDivElement;
+    constructor();
+    canAutoSelect(option: OptionControl): boolean;
+    protected render(): TemplateResult;
+}
+//# sourceMappingURL=combobox.d.ts.map

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

@@ -0,0 +1,2 @@
+export * from './combobox.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -10,15 +10,19 @@ declare global {
 declare const OdxDropdown_base: import('../../lib/main.js').Constructor<CanBeDisabled> & typeof PopoverHost;
 export declare class OdxDropdown extends OdxDropdown_base {
     #private;
-    protected popoverElement: OdxPopover;
+    popoverElement: OdxPopover;
     matchReferenceWidth: boolean;
     placement: DropdownPlacement;
     get options(): PopoverPlacementOptions;
     connectedCallback(): void;
     mountPopover(referenceElement?: HTMLElement | null): void;
     unmountPopover(referenceElement: HTMLElement): void;
+    onBeforePopoverShow(): void;
+    onPopoverShow(): void;
+    onBeforePopoverHide(): void;
+    onPopoverHide(): void;
     protected render(): TemplateResult;
-    protected willUpdate(changes: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=dropdown.d.ts.map

package/dist/components/highlight/highlight.d.ts

@@ -7,7 +7,10 @@ declare global {
 }
 export declare class OdxHighlight extends CustomElement {
     query?: string | null;
+    selector?: string;
     minlength: number;
+    subtle: boolean;
+    disabled: boolean;
     protected updated(props: PropertyValueMap<this>): void;
     protected highlight(): void;
 }

package/dist/components/main.d.ts

@@ -13,6 +13,7 @@ export * from './checkbox-group/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './circular-progress-bar/index.js';
+export * from './combobox/index.js';
 export * from './content-box/index.js';
 export * from './dropdown/index.js';
 export * from './form-field/index.js';

package/dist/components/option/option.d.ts

@@ -6,7 +6,6 @@ declare global {
     }
 }
 export declare class OdxOption extends OptionControl {
-    type?: 'checkbox' | null;
     protected render(): TemplateResult;
 }
 //# sourceMappingURL=option.d.ts.map

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

@@ -1,5 +1,5 @@
-import { SelectFormControl } from '../../cdk/main.js';
-import { PropertyValues, TemplateResult } from 'lit';
+import { ListboxFormControl, OptionControl } from '../../cdk/main.js';
+import { TemplateResult } from 'lit';
 import { OdxDropdown } from '../dropdown/index.js';
 import { OdxOption } from '../option/index.js';
 declare global {
@@ -7,12 +7,13 @@ declare global {
         'odx-select': OdxSelect;
     }
 }
-export declare class OdxSelect extends SelectFormControl {
+export declare class OdxSelect extends ListboxFormControl<OptionControl> {
     #private;
     protected options: OdxOption[];
-    protected dropdownElement: OdxDropdown;
+    protected readonly dropdown: OdxDropdown;
+    maxVisibleSelectedOptions: number;
+    constructor();
     protected render(): TemplateResult;
     protected renderSelectedOptions(): TemplateResult;
-    protected willUpdate(changes: PropertyValues<this>): void;
 }
 //# sourceMappingURL=select.d.ts.map

package/dist/components/table/table-row.d.ts

@@ -14,7 +14,7 @@ export declare class OdxTableRow extends OdxTableRow_base {
     value: string;
     connectedCallback(): void;
     protected render(): TemplateResult;
-    protected willUpdate(changes: PropertyValues<this>): void;
+    protected willUpdate(props: PropertyValues<this>): void;
 }
 export {};
 //# sourceMappingURL=table-row.d.ts.map