@haiilo/catalyst 0.4.0 → 0.5.0

package/dist/types/components.d.ts

@@ -41,6 +41,10 @@ export namespace Components {
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
         "a11yLabel"?: string;
+        /**
+          * Show an active status indicator on the left side of the button.
+         */
+        "active": boolean;
         /**
           * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
          */
@@ -66,9 +70,9 @@ export namespace Components {
          */
         "iconOnly": boolean | Breakpoint;
         /**
-          * Display the icon as a suffix.
+          * Display the icon on the right.
          */
-        "iconSuffix": boolean;
+        "iconRight": boolean;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -111,6 +115,47 @@ export namespace Components {
          */
         "variant": 'filled' | 'outlined' | 'text';
     }
+    interface CatCard {
+    }
+    interface CatCheckbox {
+        /**
+          * Checked state of the checkbox
+         */
+        "checked": boolean;
+        /**
+          * Disabled state of the checkbox
+         */
+        "disabled": boolean;
+        /**
+          * Indeterminate state of the checkbox
+         */
+        "indeterminate": boolean;
+        /**
+          * Label of the checkbox which is presented in the UI
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Required state of the checkbox
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the checkbox. Use this method instead of `checkbox.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
+        /**
+          * The value of the checkbox
+         */
+        "value"?: string;
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -125,12 +170,142 @@ export namespace Components {
          */
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatInput {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Clear the input.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Whether the input should show a clear button.
+         */
+        "clearable": boolean;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Optional hint text to be displayed with the input.
+         */
+        "hint"?: string;
+        /**
+          * The name of an icon to be displayed in the input.
+         */
+        "icon"?: string;
+        /**
+          * Display the icon on the right.
+         */
+        "iconRight": boolean;
+        /**
+          * The label for the input.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * A maximum value for numeric values.
+         */
+        "max"?: number;
+        /**
+          * A maximum length (number of characters) for textual values.
+         */
+        "maxLength"?: number;
+        /**
+          * A minimum value for numeric values.
+         */
+        "min"?: number;
+        /**
+          * A minimum length (number of characters) for textual values.
+         */
+        "minLength"?: number;
+        /**
+          * 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 input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly": boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required": boolean;
+        /**
+          * Use round input edges.
+         */
+        "round": boolean;
+        /**
+          * Sets focus on the input. Use this method instead of `input.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * Type of form control.
+         */
+        "type": 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
+        /**
+          * The initial value of the control.
+         */
+        "value"?: string | number;
+    }
     interface CatMenu {
         /**
           * The placement of the menu.
          */
         "placement": Placement;
     }
+    interface CatRadio {
+        /**
+          * Whether this radio is checked.
+         */
+        "checked": boolean;
+        /**
+          * Whether this radio is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * The label of the radio that is visible.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * The name of the radio component.
+         */
+        "name"?: string;
+        /**
+          * Whether the radio is required.
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the radio. Use this method instead of `radio.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
+        /**
+          * The value of the radio component.
+         */
+        "value"?: string;
+    }
     interface CatScrollable {
         /**
           * Flags to enable/disable overflowX.
@@ -189,6 +364,96 @@ export namespace Components {
          */
         "size": 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatTextarea {
+        /**
+          * Whether the textarea is disabled.
+         */
+        "disabled": boolean;
+        /**
+          * Optional hint text to be displayed with the textarea.
+         */
+        "hint"?: string;
+        /**
+          * The label for the textarea.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * A maximum length (number of characters) for textual values.
+         */
+        "maxLength"?: number;
+        /**
+          * A minimum length (number of characters) for textual values.
+         */
+        "minLength"?: number;
+        /**
+          * 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 input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly": boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required": boolean;
+        /**
+          * Specifies the initial number of lines in the textarea.
+         */
+        "rows": number;
+        /**
+          * Sets focus on the textarea. Use this method instead of `textarea.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
+        /**
+          * The initial value of the control.
+         */
+        "value"?: string | number;
+    }
+    interface CatToggle {
+        /**
+          * Checked state of the toggle.
+         */
+        "checked": boolean;
+        /**
+          * Disabled state of the toggle.
+         */
+        "disabled": boolean;
+        /**
+          * The label of the toggle that is visible.
+         */
+        "label": string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden": boolean;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Required state of the toggle
+         */
+        "required": boolean;
+        /**
+          * Sets focus on the toggle. Use this method instead of `toggle.focus()`.
+          * @param options An optional object providing options to control aspects of the focusing process.
+         */
+        "setFocus": (options?: FocusOptions | undefined) => Promise<void>;
+        /**
+          * The value of the toggle
+         */
+        "value"?: string;
+    }
     interface CatTooltip {
         /**
           * The content of the tooltip.
@@ -235,18 +500,42 @@ declare global {
         prototype: HTMLCatButtonElement;
         new (): HTMLCatButtonElement;
     };
+    interface HTMLCatCardElement extends Components.CatCard, HTMLStencilElement {
+    }
+    var HTMLCatCardElement: {
+        prototype: HTMLCatCardElement;
+        new (): HTMLCatCardElement;
+    };
+    interface HTMLCatCheckboxElement extends Components.CatCheckbox, HTMLStencilElement {
+    }
+    var HTMLCatCheckboxElement: {
+        prototype: HTMLCatCheckboxElement;
+        new (): HTMLCatCheckboxElement;
+    };
     interface HTMLCatIconElement extends Components.CatIcon, HTMLStencilElement {
     }
     var HTMLCatIconElement: {
         prototype: HTMLCatIconElement;
         new (): HTMLCatIconElement;
     };
+    interface HTMLCatInputElement extends Components.CatInput, HTMLStencilElement {
+    }
+    var HTMLCatInputElement: {
+        prototype: HTMLCatInputElement;
+        new (): HTMLCatInputElement;
+    };
     interface HTMLCatMenuElement extends Components.CatMenu, HTMLStencilElement {
     }
     var HTMLCatMenuElement: {
         prototype: HTMLCatMenuElement;
         new (): HTMLCatMenuElement;
     };
+    interface HTMLCatRadioElement extends Components.CatRadio, HTMLStencilElement {
+    }
+    var HTMLCatRadioElement: {
+        prototype: HTMLCatRadioElement;
+        new (): HTMLCatRadioElement;
+    };
     interface HTMLCatScrollableElement extends Components.CatScrollable, HTMLStencilElement {
     }
     var HTMLCatScrollableElement: {
@@ -265,6 +554,18 @@ declare global {
         prototype: HTMLCatSpinnerElement;
         new (): HTMLCatSpinnerElement;
     };
+    interface HTMLCatTextareaElement extends Components.CatTextarea, HTMLStencilElement {
+    }
+    var HTMLCatTextareaElement: {
+        prototype: HTMLCatTextareaElement;
+        new (): HTMLCatTextareaElement;
+    };
+    interface HTMLCatToggleElement extends Components.CatToggle, HTMLStencilElement {
+    }
+    var HTMLCatToggleElement: {
+        prototype: HTMLCatToggleElement;
+        new (): HTMLCatToggleElement;
+    };
     interface HTMLCatTooltipElement extends Components.CatTooltip, HTMLStencilElement {
     }
     var HTMLCatTooltipElement: {
@@ -275,11 +576,17 @@ declare global {
         "cat-alert": HTMLCatAlertElement;
         "cat-badge": HTMLCatBadgeElement;
         "cat-button": HTMLCatButtonElement;
+        "cat-card": HTMLCatCardElement;
+        "cat-checkbox": HTMLCatCheckboxElement;
         "cat-icon": HTMLCatIconElement;
+        "cat-input": HTMLCatInputElement;
         "cat-menu": HTMLCatMenuElement;
+        "cat-radio": HTMLCatRadioElement;
         "cat-scrollable": HTMLCatScrollableElement;
         "cat-skeleton": HTMLCatSkeletonElement;
         "cat-spinner": HTMLCatSpinnerElement;
+        "cat-textarea": HTMLCatTextareaElement;
+        "cat-toggle": HTMLCatToggleElement;
         "cat-tooltip": HTMLCatTooltipElement;
     }
 }
@@ -317,6 +624,10 @@ declare namespace LocalJSX {
           * Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.
          */
         "a11yLabel"?: string;
+        /**
+          * Show an active status indicator on the left side of the button.
+         */
+        "active"?: boolean;
         /**
           * Adds a unique identifier for the button. Please note that with this particular component this ID is added inside the web component. If you need an ID on the HTML element, use the regular `id` attribute instead.
          */
@@ -342,9 +653,9 @@ declare namespace LocalJSX {
          */
         "iconOnly"?: boolean | Breakpoint;
         /**
-          * Display the icon as a suffix.
+          * Display the icon on the right.
          */
-        "iconSuffix"?: boolean;
+        "iconRight"?: boolean;
         /**
           * Displays the button in a loading state with a spinner. Just like a disabled button, an inactive button is unusable and un-clickable. However, it retains the current focus state.
          */
@@ -394,6 +705,54 @@ declare namespace LocalJSX {
          */
         "variant"?: 'filled' | 'outlined' | 'text';
     }
+    interface CatCard {
+    }
+    interface CatCheckbox {
+        /**
+          * Checked state of the checkbox
+         */
+        "checked"?: boolean;
+        /**
+          * Disabled state of the checkbox
+         */
+        "disabled"?: boolean;
+        /**
+          * Indeterminate state of the checkbox
+         */
+        "indeterminate"?: boolean;
+        /**
+          * Label of the checkbox which is presented in the UI
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the checkbox loses focus.
+         */
+        "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the checked status of the checkbox is changed.
+         */
+        "onCatChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the checkbox received focus.
+         */
+        "onCatFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Required state of the checkbox
+         */
+        "required"?: boolean;
+        /**
+          * The value of the checkbox
+         */
+        "value"?: string;
+    }
     interface CatIcon {
         /**
           * Adds accessible label for the icon that is only shown for screen readers. The `aria-hidden` attribute will be set if no label is present.
@@ -408,6 +767,104 @@ declare namespace LocalJSX {
          */
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatInput {
+        /**
+          * Hint for form autofill feature.
+         */
+        "autoComplete"?: string;
+        /**
+          * Whether the input should show a clear button.
+         */
+        "clearable"?: boolean;
+        /**
+          * Whether the input is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional hint text to be displayed with the input.
+         */
+        "hint"?: string;
+        /**
+          * The name of an icon to be displayed in the input.
+         */
+        "icon"?: string;
+        /**
+          * Display the icon on the right.
+         */
+        "iconRight"?: boolean;
+        /**
+          * The label for the input.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * A maximum value for numeric values.
+         */
+        "max"?: number;
+        /**
+          * A maximum length (number of characters) for textual values.
+         */
+        "maxLength"?: number;
+        /**
+          * A minimum value for numeric values.
+         */
+        "min"?: number;
+        /**
+          * A minimum length (number of characters) for textual values.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the input loses focus.
+         */
+        "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the input received focus.
+         */
+        "onCatFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * The placeholder text to display within the input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly"?: boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required"?: boolean;
+        /**
+          * Use round input edges.
+         */
+        "round"?: boolean;
+        /**
+          * A textual prefix to be displayed in the input.
+         */
+        "textPrefix"?: string;
+        /**
+          * A textual suffix to be displayed in the input.
+         */
+        "textSuffix"?: string;
+        /**
+          * Type of form control.
+         */
+        "type"?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number';
+        /**
+          * The initial value of the control.
+         */
+        "value"?: string | number;
+    }
     interface CatMenu {
         /**
           * Emitted when the menu is closed.
@@ -422,6 +879,48 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface CatRadio {
+        /**
+          * Whether this radio is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Whether this radio is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * The label of the radio that is visible.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * The name of the radio component.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the radio loses focus.
+         */
+        "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the radio is changed.
+         */
+        "onCatChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the radio received focus.
+         */
+        "onCatFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Whether the radio is required.
+         */
+        "required"?: boolean;
+        /**
+          * The value of the radio component.
+         */
+        "value"?: string;
+    }
     interface CatScrollable {
         /**
           * Emitted when the content is fully scrolled to the bottom.
@@ -496,6 +995,110 @@ declare namespace LocalJSX {
          */
         "size"?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'inline';
     }
+    interface CatTextarea {
+        /**
+          * Whether the textarea is disabled.
+         */
+        "disabled"?: boolean;
+        /**
+          * Optional hint text to be displayed with the textarea.
+         */
+        "hint"?: string;
+        /**
+          * The label for the textarea.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * A maximum length (number of characters) for textual values.
+         */
+        "maxLength"?: number;
+        /**
+          * A minimum length (number of characters) for textual values.
+         */
+        "minLength"?: number;
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
+        /**
+          * Emitted when the textarea loses focus.
+         */
+        "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the value is changed.
+         */
+        "onCatChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the textarea received focus.
+         */
+        "onCatFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * The placeholder text to display within the input.
+         */
+        "placeholder"?: string;
+        /**
+          * The value is not editable.
+         */
+        "readonly"?: boolean;
+        /**
+          * A value is required or must be check for the form to be submittable.
+         */
+        "required"?: boolean;
+        /**
+          * Specifies the initial number of lines in the textarea.
+         */
+        "rows"?: number;
+        /**
+          * The initial value of the control.
+         */
+        "value"?: string | number;
+    }
+    interface CatToggle {
+        /**
+          * Checked state of the toggle.
+         */
+        "checked"?: boolean;
+        /**
+          * Disabled state of the toggle.
+         */
+        "disabled"?: boolean;
+        /**
+          * The label of the toggle that is visible.
+         */
+        "label"?: string;
+        /**
+          * Visually hide the label, but still show it to assistive technologies like screen readers.
+         */
+        "labelHidden"?: boolean;
+        /**
+          * The name of the input
+         */
+        "name"?: string;
+        /**
+          * Emitted when the toggle loses focus.
+         */
+        "onCatBlur"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Emitted when the checked status of the toggle is changed.
+         */
+        "onCatChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Emitted when the toggle received focus.
+         */
+        "onCatFocus"?: (event: CustomEvent<FocusEvent>) => void;
+        /**
+          * Required state of the toggle
+         */
+        "required"?: boolean;
+        /**
+          * The value of the toggle
+         */
+        "value"?: string;
+    }
     interface CatTooltip {
         /**
           * The content of the tooltip.
@@ -526,11 +1129,17 @@ declare namespace LocalJSX {
         "cat-alert": CatAlert;
         "cat-badge": CatBadge;
         "cat-button": CatButton;
+        "cat-card": CatCard;
+        "cat-checkbox": CatCheckbox;
         "cat-icon": CatIcon;
+        "cat-input": CatInput;
         "cat-menu": CatMenu;
+        "cat-radio": CatRadio;
         "cat-scrollable": CatScrollable;
         "cat-skeleton": CatSkeleton;
         "cat-spinner": CatSpinner;
+        "cat-textarea": CatTextarea;
+        "cat-toggle": CatToggle;
         "cat-tooltip": CatTooltip;
     }
 }
@@ -541,11 +1150,17 @@ declare module "@stencil/core" {
             "cat-alert": LocalJSX.CatAlert & JSXBase.HTMLAttributes<HTMLCatAlertElement>;
             "cat-badge": LocalJSX.CatBadge & JSXBase.HTMLAttributes<HTMLCatBadgeElement>;
             "cat-button": LocalJSX.CatButton & JSXBase.HTMLAttributes<HTMLCatButtonElement>;
+            "cat-card": LocalJSX.CatCard & JSXBase.HTMLAttributes<HTMLCatCardElement>;
+            "cat-checkbox": LocalJSX.CatCheckbox & JSXBase.HTMLAttributes<HTMLCatCheckboxElement>;
             "cat-icon": LocalJSX.CatIcon & JSXBase.HTMLAttributes<HTMLCatIconElement>;
+            "cat-input": LocalJSX.CatInput & JSXBase.HTMLAttributes<HTMLCatInputElement>;
             "cat-menu": LocalJSX.CatMenu & JSXBase.HTMLAttributes<HTMLCatMenuElement>;
+            "cat-radio": LocalJSX.CatRadio & JSXBase.HTMLAttributes<HTMLCatRadioElement>;
             "cat-scrollable": LocalJSX.CatScrollable & JSXBase.HTMLAttributes<HTMLCatScrollableElement>;
             "cat-skeleton": LocalJSX.CatSkeleton & JSXBase.HTMLAttributes<HTMLCatSkeletonElement>;
             "cat-spinner": LocalJSX.CatSpinner & JSXBase.HTMLAttributes<HTMLCatSpinnerElement>;
+            "cat-textarea": LocalJSX.CatTextarea & JSXBase.HTMLAttributes<HTMLCatTextareaElement>;
+            "cat-toggle": LocalJSX.CatToggle & JSXBase.HTMLAttributes<HTMLCatToggleElement>;
             "cat-tooltip": LocalJSX.CatTooltip & JSXBase.HTMLAttributes<HTMLCatTooltipElement>;
         }
     }