@haiilo/catalyst 0.14.3 → 0.15.2

package/dist/esm/catalyst.js

@@ -13,7 +13,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["cat-alert_22",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]},[[2,"blur","onBlur"]]],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
+  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-remote-test"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]},[[2,"blur","onBlur"]]],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select-remote",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
 });
 
 //# sourceMappingURL=catalyst.js.map

package/dist/esm/loader.js

@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["cat-alert_22",[[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]},[[2,"blur","onBlur"]]],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
+  return bootstrapLazy([["cat-alert_24",[[1,"cat-select-remote-test"],[1,"cat-input",{"autoComplete":[1,"auto-complete"],"clearable":[4],"disabled":[4],"hint":[1],"icon":[1],"iconRight":[4,"icon-right"],"label":[1],"labelHidden":[4,"label-hidden"],"max":[8],"maxLength":[2,"max-length"],"min":[8],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"textPrefix":[1,"text-prefix"],"textSuffix":[1,"text-suffix"],"readonly":[4],"required":[4],"round":[4],"type":[1],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64],"clear":[64]}],[1,"cat-modal",{"size":[1],"isVisible":[32],"show":[64]}],[1,"cat-select",{"label":[1],"labelHidden":[4,"label-hidden"],"required":[4],"items":[16],"value":[1032],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"search":[4],"hint":[1],"hasSlottedLabel":[32]},[[2,"blur","onBlur"]]],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"tabs":[32],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[1,"cat-alert",{"color":[1],"icon":[1],"noIcon":[4,"no-icon"]}],[1,"cat-avatar",{"size":[1],"round":[4],"label":[1],"initials":[1],"src":[1],"icon":[1],"url":[1],"urlTarget":[1,"url-target"],"backgroundImage":[32]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-menu",{"placement":[1]},[[0,"catClick","clickHandler"]]],[1,"cat-radio",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"value":[1025],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"],[2,"blur","onBlur"]]],[1,"cat-tab",{"label":[513],"icon":[513],"iconOnly":[520,"icon-only"],"iconRight":[516,"icon-right"],"url":[513],"urlTarget":[513,"url-target"],"deactivated":[516]},[[0,"click","onClick"]]],[1,"cat-textarea",{"disabled":[4],"hint":[1],"label":[1],"labelHidden":[4,"label-hidden"],"maxLength":[2,"max-length"],"minLength":[2,"min-length"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1032],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-toggle",{"checked":[1028],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-tooltip",{"content":[1],"disabled":[4],"placement":[1],"showDelay":[2,"show-delay"],"hideDelay":[2,"hide-delay"],"longTouchDuration":[2,"long-touch-duration"]},[[0,"keydown","handleKeyDown"]]],[1,"cat-select-remote",{"multiple":[4],"debounce":[2],"placement":[1],"value":[1025],"disabled":[4],"placeholder":[1],"hint":[1],"label":[1],"name":[1],"labelHidden":[4,"label-hidden"],"required":[4],"clearable":[4],"connector":[32],"state":[32],"hasSlottedLabel":[32],"connect":[64]},[[0,"blur","onBlur"],[0,"keydown","onKeyDown"],[0,"keyup","onKeyUp"]]],[1,"cat-checkbox",{"checked":[1028],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1032],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-scrollable",{"noShadowX":[4,"no-shadow-x"],"noShadowY":[4,"no-shadow-y"],"noOverflowX":[4,"no-overflow-x"],"noOverflowY":[4,"no-overflow-y"],"noOverscroll":[4,"no-overscroll"],"noScrolledInit":[4,"no-scrolled-init"],"scrolledBuffer":[2,"scrolled-buffer"]}],[1,"cat-skeleton",{"effect":[1],"variant":[1],"size":[1],"lines":[2]}],[1,"cat-button",{"variant":[1],"color":[1],"active":[4],"size":[1],"name":[1],"value":[1],"disabled":[4],"loading":[4],"submit":[4],"noEllipsis":[4,"no-ellipsis"],"round":[4],"url":[1],"urlTarget":[1,"url-target"],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"buttonId":[1,"button-id"],"a11yLabel":[1,"a11y-label"],"_iconOnly":[32],"setFocus":[64]},[[0,"click","haltDisabledEvents"]]],[1,"cat-spinner",{"size":[1],"a11yLabel":[1,"a11y-label"]}],[1,"cat-icon",{"icon":[1],"size":[1],"a11yLabel":[1,"a11y-label"]}]]]], options);
   });
 };
 

package/dist/types/components/cat-select-remote/autosize.d.ts

@@ -0,0 +1 @@
+declare module 'autosize-input';

package/dist/types/components/cat-select-remote/cat-select-remote.d.ts

@@ -0,0 +1,164 @@
+import { Placement } from '@floating-ui/dom';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Observable } from 'rxjs';
+export interface Item {
+  id: string;
+}
+export interface Page<T> {
+  content: T[];
+  last: boolean;
+  totalElements?: number;
+}
+export interface RenderInfo {
+  label: string;
+  description?: string;
+}
+/**
+ * @property resolve - Resolves the value of the select.
+ * @property retrieve - Retrieves the options of the select.
+ * @property render - Renders the selected elements.
+ */
+export interface CatSelectRemoteConnector<T extends Item = any> {
+  resolve: (id: string[]) => Observable<T[]>;
+  retrieve: (term: string, page: number) => Observable<Page<T>>;
+  render: (item: T) => RenderInfo;
+}
+export interface CatSelectRemoteState {
+  term: string;
+  isOpen: boolean;
+  isLoading: boolean;
+  isResolving: boolean;
+  options: {
+    item: Item;
+    render: RenderInfo;
+  }[];
+  selection: {
+    item: Item;
+    render: RenderInfo;
+  }[];
+  activeOptionIndex: number;
+  activeSelectionIndex: number;
+  totalElements?: number;
+}
+/**
+ * Select lets user choose one option from an options' menu. Consider using
+ * select when you have 6 or more options. Select component supports any content
+ * type.
+ *
+ * @slot hint - Optional hint element to be displayed with the select.
+ * @slot label - The slotted label. If both the label property and the label slot are present, only the label slot will be displayed.
+ * @part label - The label content.
+ */
+export declare class CatSelectRemote {
+  private static readonly SKELETON_COUNT;
+  private static readonly DROPDOWN_OFFSET;
+  private readonly i18n;
+  private readonly id;
+  private dropdown?;
+  private trigger?;
+  private input?;
+  private subscription?;
+  private term$;
+  private more$;
+  hostElement: HTMLElement;
+  connector?: CatSelectRemoteConnector;
+  state: CatSelectRemoteState;
+  hasSlottedLabel: boolean;
+  /**
+   * Enable multiple selection.
+   */
+  multiple: boolean;
+  /**
+   * The debounce time for the search.
+   */
+  debounce: number;
+  /**
+   * The placement of the select.
+   */
+  placement: Placement;
+  /**
+   * The value of the select.
+   */
+  value?: string | string[];
+  /**
+   * Whether the select is disabled.
+   */
+  disabled: boolean;
+  /**
+   * The placeholder text to display within the select.
+   */
+  placeholder?: string;
+  /**
+   * Optional hint text(s) to be displayed with the select.
+   */
+  hint?: string | string[];
+  /**
+   * The label for the select.
+   */
+  label: string;
+  /**
+   * The name of the form control. Submitted with the form as part of a name/value pair.
+   */
+  name: string;
+  /**
+   * Visually hide the label, but still show it to assistive technologies like screen readers.
+   */
+  labelHidden: boolean;
+  /**
+   * A value is required or must be checked for the form to be submittable.
+   */
+  required: boolean;
+  /**
+   * Whether the select should show a clear button.
+   */
+  clearable: boolean;
+  onConnectorChange(connector: CatSelectRemoteConnector): void;
+  onStateChange(newState: CatSelectRemoteState, oldState: CatSelectRemoteState): void;
+  /**
+   * Emitted when the select dropdown is opened.
+   */
+  catOpen: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the select dropdown is closed.
+   */
+  catClose: EventEmitter<FocusEvent>;
+  /**
+   * Emitted when the value is changed.
+   */
+  catChange: EventEmitter;
+  /**
+   * Emitted when the select loses the focus.
+   */
+  catBlur: EventEmitter<FocusEvent>;
+  componentDidLoad(): void;
+  componentWillRender(): void;
+  onBlur(event: FocusEvent): void;
+  onKeyDown(event: KeyboardEvent): void;
+  onKeyUp(event: KeyboardEvent): void;
+  /**
+   * Connect the functions of the select
+   *
+   * @param connector - The {@link CatSelectRemoteConnector} of the select.
+   */
+  connect(connector: CatSelectRemoteConnector): Promise<void>;
+  render(): any;
+  private get hintSection();
+  private get connectorSafe();
+  private resolve;
+  private show;
+  private hide;
+  private search;
+  private isSelected;
+  private select;
+  private deselect;
+  private toggle;
+  private clear;
+  private reset;
+  private onClick;
+  private onInput;
+  private update;
+  private patchState;
+  private isPillboxActive;
+  private get activeDescendant();
+  private onArrowKeyDown;
+}

package/dist/types/components/cat-select-remote-test/cat-select-remote-test.d.ts

@@ -0,0 +1,6 @@
+export declare class CatSelectRemoteTest {
+  private multipleSelect?;
+  private singleSelect?;
+  componentDidLoad(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -9,6 +9,8 @@ import { Breakpoint } from "./utils/breakpoints";
 import { InputType } from "./components/cat-input/input-type";
 import { Placement } from "@floating-ui/dom";
 import { CatSelectItem } from "./components/cat-select/cat-select";
+import { CatSelectRemoteConnector, Item } from "./components/cat-select-remote/cat-select-remote";
+import { Observable } from "rxjs";
 export namespace Components {
     interface CatAlert {
         /**
@@ -474,6 +476,63 @@ export namespace Components {
          */
         "value"?: any;
     }
+    interface CatSelectRemote {
+        /**
+          * Whether the select should show a clear button.
+         */
+        "clearable": boolean;
+        /**
+          * Connect the functions of the select
+          * @param connector - The {@link CatSelectRemoteConnector} of the select.
+         */
+        "connect": (connector: CatSelectRemoteConnector) => Promise<void>;
+        /**
+          * The debounce time for the search.
+         */
+        "debounce": number;
+        /**
+          * Whether the select is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Optional hint text(s) to be displayed with the select.
+         */
+        "hint"?: string | string[];
+        /**
+          * The label for the select.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * Enable multiple selection.
+         */
+        "multiple": boolean;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name": string;
+        /**
+          * The placeholder text to display within the select.
+         */
+        "placeholder"?: string;
+        /**
+          * The placement of the select.
+         */
+        "placement": Placement;
+        /**
+          * A value is required or must be checked for the form to be submittable.
+         */
+        "required": boolean;
+        /**
+          * The value of the select.
+         */
+        "value"?: string | string[];
+    }
+    interface CatSelectRemoteTest {
+    }
     interface CatSkeleton {
         /**
           * The animation style of the skeleton.
@@ -701,6 +760,10 @@ export interface CatSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatSelectElement;
 }
+export interface CatSelectRemoteCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatSelectRemoteElement;
+}
 export interface CatTabCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatTabElement;
@@ -798,6 +861,18 @@ declare global {
         prototype: HTMLCatSelectElement;
         new (): HTMLCatSelectElement;
     };
+    interface HTMLCatSelectRemoteElement extends Components.CatSelectRemote, HTMLStencilElement {
+    }
+    var HTMLCatSelectRemoteElement: {
+        prototype: HTMLCatSelectRemoteElement;
+        new (): HTMLCatSelectRemoteElement;
+    };
+    interface HTMLCatSelectRemoteTestElement extends Components.CatSelectRemoteTest, HTMLStencilElement {
+    }
+    var HTMLCatSelectRemoteTestElement: {
+        prototype: HTMLCatSelectRemoteTestElement;
+        new (): HTMLCatSelectRemoteTestElement;
+    };
     interface HTMLCatSkeletonElement extends Components.CatSkeleton, HTMLStencilElement {
     }
     var HTMLCatSkeletonElement: {
@@ -861,6 +936,8 @@ declare global {
         "cat-radio-group": HTMLCatRadioGroupElement;
         "cat-scrollable": HTMLCatScrollableElement;
         "cat-select": HTMLCatSelectElement;
+        "cat-select-remote": HTMLCatSelectRemoteElement;
+        "cat-select-remote-test": HTMLCatSelectRemoteTestElement;
         "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
         "cat-tab": HTMLCatTabElement;
@@ -1404,6 +1481,74 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface CatSelectRemote {
+        /**
+          * Whether the select should show a clear button.
+         */
+        "clearable"?: boolean;
+        /**
+          * The debounce time for the search.
+         */
+        "debounce"?: number;
+        /**
+          * Whether the select is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional hint text(s) to be displayed with the select.
+         */
+        "hint"?: string | string[];
+        /**
+          * The label for the select.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * Enable multiple selection.
+         */
+        "multiple"?: boolean;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the select loses the focus.
+         */
+        "onCatBlur"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CatSelectRemoteCustomEvent<any>) => void;
+        /**
+          * Emitted when the select dropdown is closed.
+         */
+        "onCatClose"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the select dropdown is opened.
+         */
+        "onCatOpen"?: (event: CatSelectRemoteCustomEvent<FocusEvent>) => void;
+        /**
+          * The placeholder text to display within the select.
+         */
+        "placeholder"?: string;
+        /**
+          * The placement of the select.
+         */
+        "placement"?: Placement;
+        /**
+          * A value is required or must be checked for the form to be submittable.
+         */
+        "required"?: boolean;
+        /**
+          * The value of the select.
+         */
+        "value"?: string | string[];
+    }
+    interface CatSelectRemoteTest {
+    }
     interface CatSkeleton {
         /**
           * The animation style of the skeleton.
@@ -1631,6 +1776,8 @@ declare namespace LocalJSX {
         "cat-radio-group": CatRadioGroup;
         "cat-scrollable": CatScrollable;
         "cat-select": CatSelect;
+        "cat-select-remote": CatSelectRemote;
+        "cat-select-remote-test": CatSelectRemoteTest;
         "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
         "cat-tab": CatTab;
@@ -1659,6 +1806,8 @@ declare module "@stencil/core" {
             "cat-radio-group": LocalJSX.CatRadioGroup & JSXBase.HTMLAttributes<HTMLCatRadioGroupElement>;
             "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
             "cat-select": LocalJSX.CatSelect & JSXBase.HTMLAttributes<HTMLCatSelectElement>;
+            "cat-select-remote": LocalJSX.CatSelectRemote & JSXBase.HTMLAttributes<HTMLCatSelectRemoteElement>;
+            "cat-select-remote-test": LocalJSX.CatSelectRemoteTest & JSXBase.HTMLAttributes<HTMLCatSelectRemoteTestElement>;
             "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
             "cat-tab": LocalJSX.CatTab & JSXBase.HTMLAttributes<HTMLCatTabElement>;

package/dist/types/index.d.ts

@@ -3,3 +3,6 @@ export { CatI18nRegistry } from './components/cat-i18n/cat-i18n-registry';
 export { CatIconRegistry } from './components/cat-icon/cat-icon-registry';
 export { NotificationsService } from './components/cat-notification/cat-notification';
 export { CatSelectItem } from './components/cat-select/cat-select';
+export { CatSelectRemoteConnector } from './components/cat-select-remote/cat-select-remote';
+export { RenderInfo } from './components/cat-select-remote/cat-select-remote';
+export { Page } from './components/cat-select-remote/cat-select-remote';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.14.3",
+  "version": "0.15.2",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -38,14 +38,15 @@
     "reset": "rm -rf ./dist ./loader ./www ./node_modules"
   },
   "peerDependencies": {
-    "@haiilo/catalyst-icons": ">=0.3.9",
+    "@haiilo/catalyst-icons": ">=0.3.10",
     "rxjs": "^7.5.5"
   },
   "dependencies": {
     "@floating-ui/dom": "0.4.1",
-    "@haiilo/catalyst-tokens": "0.14.3",
+    "@haiilo/catalyst-tokens": "0.15.2",
     "@stencil/core": "2.17.0",
     "autosize": "5.0.1",
+    "autosize-input": "^1.0.2",
     "choices.js": "10.1.0",
     "focus-trap": "6.8.1",
     "loglevel": "1.8.0",
@@ -55,7 +56,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.16.5",
-    "@haiilo/catalyst-icons": "^0.3.9",
+    "@haiilo/catalyst-icons": "^0.3.10",
     "@stencil/angular-output-target": "^0.4.0",
     "@stencil/react-output-target": "^0.3.1",
     "@stencil/sass": "^1.5.2",