@haiilo/catalyst 0.10.5 → 0.11.0

package/dist/esm/catalyst.js

@@ -13,7 +13,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy([["cat-textarea",[[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]}]]],["cat-alert_21",[[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":[2],"maxLength":[2,"max-length"],"min":[2],"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],"choices":[16],"value":[1025],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"noSearch":[4,"no-search"],"hint":[1],"hasSlottedLabel":[32],"setValue":[64],"setChoices":[64],"clearChoices":[64],"clearInput":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[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-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"]]],[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":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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-textarea",[[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]}]]],["cat-alert_21",[[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":[2],"maxLength":[2,"max-length"],"min":[2],"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]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[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-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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"]]],[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":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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);
 });
 
 //# 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-textarea",[[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]}]]],["cat-alert_21",[[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":[2],"maxLength":[2,"max-length"],"min":[2],"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],"choices":[16],"value":[1025],"disabled":[4],"multiple":[4],"placeholder":[1],"position":[1],"noSearch":[4,"no-search"],"hint":[1],"hasSlottedLabel":[32],"setValue":[64],"setChoices":[64],"clearChoices":[64],"clearInput":[64]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[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-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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":[1025],"hint":[1],"labelLeft":[4,"label-left"],"hasSlottedLabel":[32],"setFocus":[64]}],[1,"cat-radio-group",{"name":[1],"disabled":[4],"a11yLabel":[1,"a11y-label"],"labelLeft":[4,"label-left"]},[[0,"keydown","onKeydown"],[0,"input","onInput"]]],[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":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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-textarea",[[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]}]]],["cat-alert_21",[[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":[2],"maxLength":[2,"max-length"],"min":[2],"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]}],[1,"cat-tabs",{"activeTab":[1,"active-tab"],"tabsAlign":[1,"tabs-align"],"activeTabId":[32]},[[0,"keydown","onKeydown"]]],[0,"cat-toast-demo"],[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-alert",{"color":[1]}],[1,"cat-badge",{"variant":[1],"color":[1],"size":[1],"round":[4],"pulse":[4]}],[1,"cat-card"],[1,"cat-checkbox",{"checked":[4],"disabled":[4],"indeterminate":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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"]]],[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":[1],"icon":[1],"iconOnly":[8,"icon-only"],"iconRight":[4,"icon-right"],"url":[1],"urlTarget":[1,"url-target"],"deactivated":[4]},[[0,"click","onClick"]]],[1,"cat-toggle",{"checked":[4],"disabled":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1025],"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);
   });
 };
 

package/dist/types/components/cat-input/cat-input.d.ts

@@ -97,7 +97,7 @@ export declare class CatInput {
    */
   type: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
   /**
-   * The initial value of the control.
+   * The value of the control.
    */
   value?: string | number;
   /**

package/dist/types/components/cat-radio-group/cat-radio-group.d.ts

@@ -1,3 +1,7 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * A group of radio buttons.
+ */
 export declare class CatRadioGroup {
   private catRadioGroup;
   hostElement: HTMLElement;
@@ -5,6 +9,10 @@ export declare class CatRadioGroup {
    * The name of the radio group component.
    */
   name?: string;
+  /**
+   * The value of the radio group.
+   */
+  value?: string;
   /**
    * Whether this radio group is disabled.
    */
@@ -18,7 +26,12 @@ export declare class CatRadioGroup {
    * Whether the label of the radios should appear to the left of them.
    */
   labelLeft: boolean;
+  /**
+   * Emitted when the value is changed.
+   */
+  catChange: EventEmitter;
   onNameChanged(newName?: string): void;
+  onValueChanged(newValue?: string): void;
   onDisabledChanged(disabled: boolean): void;
   onLabelLeftChanged(labelLeft: boolean): void;
   componentDidLoad(): void;

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

@@ -1,5 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { Choice, Group, Item } from 'choices.js';
+import { Choice } from 'choices.js';
+/**
+ * A single option in the select.
+ */
+export declare type CatSelectItem = Pick<Choice, 'label' | 'value' | 'customProperties'>;
 /**
  * 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
@@ -12,6 +16,7 @@ import { Choice, Group, Item } from 'choices.js';
 export declare class CatSelect {
   private readonly i18n;
   private readonly id;
+  private resetItemsOnNextValueChange;
   private choice?;
   private choiceInner?;
   private choiceDropdown?;
@@ -34,11 +39,11 @@ export declare class CatSelect {
   /**
    * The available options for the input.
    */
-  choices: Choice[];
+  items: CatSelectItem[];
   /**
-   * The pre-selected items for the input.
+   * The value of the select.
    */
-  value?: string | string[] | Choice | Choice[];
+  value?: any;
   /**
    * Disable the select.
    */
@@ -60,7 +65,7 @@ export declare class CatSelect {
   /**
    * Enable search for the select.
    */
-  noSearch: boolean;
+  search: boolean;
   /**
    * Optional hint text(s) to be displayed with the select.
    */
@@ -77,38 +82,18 @@ export declare class CatSelect {
    * Emitted when scrolled to the bottom.
    */
   catScrolledBottom: EventEmitter;
-  setChoicesHandler(choices: Choice[]): void;
-  setValueHandler(value?: string[] | Choice[]): void;
+  setChoicesHandler(items: CatSelectItem[]): void;
+  setValueHandler(value?: any): void;
   componentWillRender(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  /**
-   * Set value of input based on an array of objects or strings. This behaves
-   * exactly the same as passing items via the items option but can be called
-   * after initialisation.
-   */
-  setValue(args: Array<string> | Array<Item>): Promise<this>;
-  /**
-   * Set choices of select input via an array of objects (or function that
-   * returns array of object or promise of it), a value field name and a label
-   * field name.
-   */
-  setChoices(choices: Array<Choice> | Array<Group>, value?: string, label?: string, replaceChoices?: boolean): Promise<this>;
-  /**
-   * Clear all choices from select.
-   */
-  clearChoices(): Promise<this>;
-  /**
-   * Clear input of any user inputted text.
-   */
-  clearInput(): Promise<this>;
   render(): any;
   private init;
   private get hintSection();
   private onChange;
+  private onChoice;
   private onSearch;
   private onScrolledBottom;
-  private onChoice;
   private showDropdownHandler;
   private createRemoveItemButton;
   private updateRemoveItemButtonVisibility;

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Breakpoint } from "./utils/breakpoints";
 import { Placement } from "@floating-ui/dom";
-import { Choice, Group, Item } from "choices.js";
+import { CatSelectItem } from "./components/cat-select/cat-select";
 export namespace Components {
     interface CatAlert {
         /**
@@ -304,7 +304,7 @@ export namespace Components {
          */
         "type": 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
         /**
-          * The initial value of the control.
+          * The value of the control.
          */
         "value"?: string | number;
     }
@@ -384,6 +384,10 @@ export namespace Components {
           * The name of the radio group component.
          */
         "name"?: string;
+        /**
+          * The value of the radio group.
+         */
+        "value"?: string;
     }
     interface CatScrollable {
         /**
@@ -416,18 +420,6 @@ export namespace Components {
         "scrolledBuffer": number;
     }
     interface CatSelect {
-        /**
-          * The available options for the input.
-         */
-        "choices": Choice[];
-        /**
-          * Clear all choices from select.
-         */
-        "clearChoices": () => Promise<this>;
-        /**
-          * Clear input of any user inputted text.
-         */
-        "clearInput": () => Promise<this>;
         /**
           * Disable the select.
          */
@@ -436,6 +428,10 @@ export namespace Components {
           * Optional hint text(s) to be displayed with the select.
          */
         "hint"?: string | string[];
+        /**
+          * The available options for the input.
+         */
+        "items": CatSelectItem[];
         /**
           * The label for the select.
          */
@@ -448,10 +444,6 @@ export namespace Components {
           * Enable multiple selection.
          */
         "multiple": boolean;
-        /**
-          * Enable search for the select.
-         */
-        "noSearch": boolean;
         /**
           * The placeholder for the select.
          */
@@ -465,17 +457,13 @@ export namespace Components {
          */
         "required": boolean;
         /**
-          * Set choices of select input via an array of objects (or function that returns array of object or promise of it), a value field name and a label field name.
-         */
-        "setChoices": (choices: Array<Choice> | Array<Group>, value?: string | undefined, label?: string | undefined, replaceChoices?: boolean | undefined) => Promise<this>;
-        /**
-          * Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the items option but can be called after initialisation.
+          * Enable search for the select.
          */
-        "setValue": (args: Array<string> | Array<Item>) => Promise<this>;
+        "search": boolean;
         /**
-          * The pre-selected items for the input.
+          * The value of the select.
          */
-        "value"?: string | string[] | Choice | Choice[];
+        "value"?: any;
     }
     interface CatSkeleton {
         /**
@@ -692,6 +680,10 @@ export interface CatRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatRadioElement;
 }
+export interface CatRadioGroupCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCatRadioGroupElement;
+}
 export interface CatScrollableCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCatScrollableElement;
@@ -1183,7 +1175,7 @@ declare namespace LocalJSX {
          */
         "type"?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
         /**
-          * The initial value of the control.
+          * The value of the control.
          */
         "value"?: string | number;
     }
@@ -1274,6 +1266,14 @@ declare namespace LocalJSX {
           * The name of the radio group component.
          */
         "name"?: string;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CatRadioGroupCustomEvent<any>) => void;
+        /**
+          * The value of the radio group.
+         */
+        "value"?: string;
     }
     interface CatScrollable {
         /**
@@ -1322,10 +1322,6 @@ declare namespace LocalJSX {
         "scrolledBuffer"?: number;
     }
     interface CatSelect {
-        /**
-          * The available options for the input.
-         */
-        "choices"?: Choice[];
         /**
           * Disable the select.
          */
@@ -1334,6 +1330,10 @@ declare namespace LocalJSX {
           * Optional hint text(s) to be displayed with the select.
          */
         "hint"?: string | string[];
+        /**
+          * The available options for the input.
+         */
+        "items"?: CatSelectItem[];
         /**
           * The label for the select.
          */
@@ -1346,10 +1346,6 @@ declare namespace LocalJSX {
           * Enable multiple selection.
          */
         "multiple"?: boolean;
-        /**
-          * Enable search for the select.
-         */
-        "noSearch"?: boolean;
         /**
           * Emitted when the value is changed.
          */
@@ -1375,9 +1371,13 @@ declare namespace LocalJSX {
          */
         "required"?: boolean;
         /**
-          * The pre-selected items for the input.
+          * Enable search for the select.
+         */
+        "search"?: boolean;
+        /**
+          * The value of the select.
          */
-        "value"?: string | string[] | Choice | Choice[];
+        "value"?: any;
     }
     interface CatSkeleton {
         /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haiilo/catalyst",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "Catalyst Design System",
   "license": "MIT",
   "repository": {
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "0.4.1",
-    "@haiilo/catalyst-tokens": "0.10.5",
+    "@haiilo/catalyst-tokens": "0.11.0",
     "@stencil/core": "2.17.0",
     "autosize": "5.0.1",
     "choices.js": "10.1.0",