@ukic/web-components 2.26.0 → 3.0.0

package/dist/types/components/ic-menu/ic-menu.d.ts

@@ -72,10 +72,6 @@ export declare class Menu {
      * The size of the menu component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The possible menu selection options.
      */

package/dist/types/components/ic-page-header/ic-page-header.d.ts

@@ -35,10 +35,6 @@ export declare class PageHeader {
      * The size of the page header component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the page header will be sticky at all breakpoints.
      */

package/dist/types/components/ic-pagination/ic-pagination.d.ts

@@ -11,8 +11,8 @@ export declare class Pagination {
     /**
      * The number of pages displayed adjacent to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    adjacentCount: number;
-    watchAdjacentCountHandler(): void;
+    adjacentPageCount: number;
+    watchAdjacentPageCountHandler(): void;
     /**
      * The appearance of the pagination, e.g. dark, light or the default.
      */
@@ -20,8 +20,8 @@ export declare class Pagination {
     /**
      * The number of pages displayed as boundary items to the current page when using 'complex' type pagination. Accepted values are 0, 1 & 2.
      */
-    boundaryCount: number;
-    watchBoundaryCountHandler(): void;
+    boundaryPageCount: number;
+    watchBoundaryPageCountHandler(): void;
     /**
      * The default page to display.
      */

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

@@ -17,6 +17,7 @@ export declare class RadioGroup {
      * If `true`, the disabled state will be set.
      */
     disabled: boolean;
+    watchDisabledHandler(newValue: boolean): void;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
@@ -45,10 +46,6 @@ export declare class RadioGroup {
      * The size of the radio group component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */

package/dist/types/components/ic-radio-option/ic-radio-option.d.ts

@@ -25,26 +25,6 @@ export declare class RadioOption {
      * The <form> element to associate the radio with.
      */
     form?: string;
-    /**
-     * The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner.
-     */
-    formaction?: string;
-    /**
-     * The way the submitted form data is encoded.
-     */
-    formenctype?: string;
-    /**
-     * The HTTP method used to submit the form.
-     */
-    formmethod?: string;
-    /**
-     * If `true`, the form will not be validated when submitted.
-     */
-    formnovalidate?: boolean;
-    /**
-     * The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner.
-     */
-    formtarget?: string;
     /**
      * The group label for the radio option.
      */
@@ -71,10 +51,6 @@ export declare class RadioOption {
      * Emitted when the radio option is selected.
      */
     icCheck: EventEmitter<IcValueEventDetail>;
-    /**
-     * @deprecated This event should not be used anymore. Use icCheck instead.
-     */
-    radioOptionSelect: EventEmitter<IcValueEventDetail>;
     /**
      * Emitted when the radio option is selected or deselected.
      */

package/dist/types/components/ic-search-bar/ic-search-bar.d.ts

@@ -57,7 +57,7 @@ export declare class SearchBar {
      * Specify whether to disable the built in filtering. For example, if options will already be filtered from external source.
      * If `true`, all options provided will be displayed.
      */
-    disableFilter?: boolean;
+    disableAutoFiltering?: boolean;
     /**
      * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
      */
@@ -86,7 +86,7 @@ export declare class SearchBar {
     /**
      * The hint text for the hidden assistive description element.
      */
-    hintText?: string;
+    assistiveHintText?: string;
     /**
      * The label for the search bar.
      */
@@ -131,10 +131,6 @@ export declare class SearchBar {
      * The size of the search bar component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the value of the search will have its spelling and grammar checked.
      */
@@ -174,15 +170,7 @@ export declare class SearchBar {
      */
     icInput: EventEmitter<IcValueEventDetail>;
     private onInput;
-    /**
-     * @deprecated This event should not be used anymore. Use icSearchBarBlur instead.
-     */
-    icInputBlur: EventEmitter<IcSearchBarBlurEventDetail>;
     private onInputBlur;
-    /**
-     * @deprecated This event should not be used anymore. Use icSearchBarFocus instead.
-     */
-    icInputFocus: EventEmitter<IcValueEventDetail>;
     private onInputFocus;
     /**
      * Emitted when option is highlighted within the menu
@@ -217,7 +205,7 @@ export declare class SearchBar {
     /**
      * Emitted when focus is invoked from ic-search-bar
      */
-    icSearchBarFocus: EventEmitter<void>;
+    icSearchBarFocus: EventEmitter<IcValueEventDetail>;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -34,10 +34,6 @@ export declare class Select {
     open: boolean;
     pressedCharacters: string;
     searchableSelectInputValue: string;
-    /**
-     * @deprecated This prop should not be used anymore.
-     */
-    charactersUntilSuggestions?: number;
     /**
      * If `true`, the disabled state will be set.
      */
@@ -45,7 +41,7 @@ export declare class Select {
     /**
      * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
      */
-    disableFilter?: boolean;
+    disableAutoFiltering?: boolean;
     /**
      * The text displayed when there are no options in the option list.
      */
@@ -54,28 +50,6 @@ export declare class Select {
      * The <form> element to associate the select with.
      */
     form?: string;
-    /**
-     * The URL that processes the information submitted by the select. It overrides the action attribute of the select's form owner. Does nothing if there is no form owner.
-     * This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formaction?: string;
-    /**
-     * The way the submitted form data is encoded. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formenctype?: string;
-    /**
-     * The HTTP method used to submit the form. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formmethod?: string;
-    /**
-     * If `true`, the form will not be validated when submitted. This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formnovalidate?: boolean;
-    /**
-     * The place to display the response from submitting the form. It overrides the target attribute of the select's form owner.
-     * This prop should only be used with searchable select and will only be applied if searchable is true.
-     */
-    formtarget?: string;
     /**
      * If `true`, the select element will fill the width of the container. This prop should only be used with searchable select and will only be applied if searchable is true.
      */
@@ -144,10 +118,6 @@ export declare class Select {
      * The size of the select component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If using external filtering, set a timeout for when loading takes too long.
      */

package/dist/types/components/ic-side-navigation/ic-side-navigation.d.ts

@@ -69,7 +69,7 @@ export declare class SideNavigation {
     /**
      * Emitted when the side navigation is collapsed and expanded.
      */
-    sideNavExpanded: EventEmitter<IcExpandedDetail>;
+    icSideNavExpanded: EventEmitter<IcExpandedDetail>;
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;

package/dist/types/components/ic-skeleton/ic-skeleton.d.ts

@@ -5,10 +5,6 @@ export declare class Skeleton {
      * The appearance of the skeleton.
      */
     appearance?: "light" | "default";
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `appearance` to "light" instead.
-     */
-    light?: boolean;
     /**
      * The variant of the skeleton that will be displayed.
      */

package/dist/types/components/ic-status-tag/ic-status-tag.d.ts

@@ -1,4 +1,4 @@
-import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
+import { IcStatusTagStatuses } from "./ic-status-tag.types";
 import { IcEmphasisType, IcSizes } from "../../utils/types";
 export declare class StatusTag {
     /**
@@ -6,10 +6,6 @@ export declare class StatusTag {
      * Screen readers will announce changes to the `label`, but not the initial value.
      */
     announced?: boolean;
-    /**
-     * @deprecated This prop should not be used anymore. Use variant prop instead.
-     */
-    appearance?: IcStatusTagAppearance;
     /**
      * The content rendered within the status tag.
      */
@@ -18,10 +14,6 @@ export declare class StatusTag {
      * The size of the status tag component.
      */
     size?: IcSizes;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The colour of the status tag.
      */
@@ -30,7 +22,6 @@ export declare class StatusTag {
      * The emphasis of the status tag.
      */
     variant?: IcEmphasisType;
-    componentWillLoad(): void;
     componentDidLoad(): void;
     render(): any;
 }

package/dist/types/components/ic-status-tag/ic-status-tag.types.d.ts

@@ -1,2 +1 @@
 export type IcStatusTagStatuses = "neutral" | "success" | "warning" | "danger";
-export type IcStatusTagAppearance = "filled" | "outlined";

package/dist/types/components/ic-step/ic-step.d.ts

@@ -20,7 +20,7 @@ export declare class Step {
     /**
      * @internal The name of the next step. This is managed by ic-stepper.
      */
-    nextStepTitle?: string;
+    nextStepHeading?: string;
     /**
      * @internal The progress of the next step, calculated by dividing the current step number by the total number of steps. This is managed by ic-stepper.
      */
@@ -32,15 +32,15 @@ export declare class Step {
     /**
      * The status of the step. Use this prop to display a status message on the step if it is required or optional.
      */
-    stepStatus?: IcStepStatuses;
+    status?: IcStepStatuses;
     /**
      * Additional information about the step. Use this prop to override the default step status messaging displayed when selecting a step type or step status.
      */
-    stepSubtitle?: string;
+    subheading?: string;
     /**
      * The title of the step within the stepper.
      */
-    stepTitle?: string;
+    heading?: string;
     /**
      * @internal The variant of the step. This is managed by ic-stepper.
      */
@@ -48,7 +48,7 @@ export declare class Step {
     /**
      * The state of the step within the stepper.
      */
-    stepType?: IcStepTypes;
-    stepTypeChangeHandler(): void;
+    type?: IcStepTypes;
+    typeChangeHandler(): void;
     render(): any;
 }

package/dist/types/components/ic-stepper/test/basic/ic-stepper-test-examples.d.ts

@@ -1,4 +1,4 @@
-export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step step-title=\"First\"></ic-step>\n        <ic-step\n        step-title=\"Second With a Very Long Title\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"current\"\n        ></ic-step>\n        <ic-step step-title=\"Third\" step-type=\"disabled\"></ic-step>\n        <ic-step\n        step-title=\"Fourth\"\n        step-subtitle=\"Optional Subtitle\"\n        step-type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
-export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        step-title=\"First\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Second With a Very Long Title\"\n          step-subtitle=\"Optional subtitle that is long and should wrap\"\n          current\n          step-type=\"current\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Third\"\n          step-type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fourth title that is long and should wrap\"\n          step-subtitle=\"Optional Subtitle\"\n          step-type=\"completed\"\n        ></ic-step>\n        <ic-step\n          step-title=\"Fifth and final step\"\n          step-subtitle=\"Optional Subtitle\"\n          icon\n          step-status=\"optional\"\n          step-type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";
+export declare const defaultStepper = "\n    <ic-stepper>\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const customConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"150\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const invalidConnectorWidthStepper = "\n    <ic-stepper aligned=\"left\" connector-width=\"96\">\n        <ic-step heading=\"First\"></ic-step>\n        <ic-step\n        heading=\"Second With a Very Long Title\"\n        subheading=\"Optional Subtitle\"\n        type=\"current\"\n        ></ic-step>\n        <ic-step heading=\"Third\" type=\"disabled\"></ic-step>\n        <ic-step\n        heading=\"Fourth\"\n        subheading=\"Optional Subtitle\"\n        type=\"completed\"\n        ></ic-step>\n    </ic-stepper>";
+export declare const compactStepper = "\n    <ic-stepper variant=\"compact\" id=\"custom-compact-stepper\">\n        <ic-step \n        heading=\"First\"\n        ></ic-step>\n        <ic-step\n          heading=\"Second With a Very Long Title\"\n          subheading=\"Optional subtitle that is long and should wrap\"\n          current\n          type=\"current\"\n        ></ic-step>\n        <ic-step\n          heading=\"Third\"\n          type=\"disabled\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fourth title that is long and should wrap\"\n          subheading=\"Optional Subtitle\"\n          type=\"completed\"\n        ></ic-step>\n        <ic-step\n          heading=\"Fifth and final step\"\n          subheading=\"Optional Subtitle\"\n          icon\n          status=\"optional\"\n          type=\"completed\"\n        ></ic-step>\n      </ic-stepper>";

package/dist/types/components/ic-switch/ic-switch.d.ts

@@ -42,10 +42,6 @@ export declare class Switch {
      * The size of the switch component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * The value of the toggle does not mean if it's checked or not, use the `checked`
      * property for that.

package/dist/types/components/ic-tab-context/ic-tab-context.d.ts

@@ -34,10 +34,6 @@ export declare class TabContext {
      * Emitted when a user selects a tab.
      */
     icTabSelect: EventEmitter<IcTabSelectEventDetail>;
-    /**
-     * @deprecated This event should not be used anymore. Use icTabSelect instead.
-     */
-    tabSelect: EventEmitter<IcTabSelectEventDetail>;
     componentDidLoad(): void;
     componentWillUpdate(): void;
     disconnectedCallback(): void;

package/dist/types/components/ic-tab-group/ic-tab-group.d.ts

@@ -4,11 +4,6 @@ export declare class TabGroup {
      * @internal The appearance of the tab group, e.g dark, or light.
      */
     appearance?: IcThemeForegroundNoDefault;
-    /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
-     */
-    contextId?: string;
     /**
      * If `true`, the tabs and tab panels will be positioned separately.
      */

package/dist/types/components/ic-tab-panel/ic-tab-panel.d.ts

@@ -6,11 +6,6 @@ export declare class TabPanel {
      * @internal The appearance of the tabs, e.g dark, or light.
      */
     appearance?: IcThemeForegroundNoDefault;
-    /**
-     * @deprecated This is no longer required.
-     * The context id is passed down from `ic-tab-context`
-     */
-    contextId?: string;
     /**
      * @internal The shared ID that links the panel and tab.
      */
@@ -32,6 +27,5 @@ export declare class TabPanel {
      */
     tabPanelRemoved: EventEmitter<void>;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/ic-text-field/ic-text-field.d.ts

@@ -11,9 +11,8 @@ export declare class TextField {
     el: HTMLIcTextFieldElement;
     numChars: number;
     maxCharactersReached: boolean;
-    maxCharactersError: boolean;
+    maxCharactersWarning: boolean;
     minCharactersUnattained: boolean;
-    maxLengthExceeded: boolean;
     maxValueExceeded: boolean;
     minValueUnattained: boolean;
     /**
@@ -67,6 +66,10 @@ export declare class TextField {
      * The helper text that will be displayed for additional field guidance.
      */
     helperText: string;
+    /**
+     * If `true`, the character count which is displayed when `maxCharacters` is set will be visually hidden.
+     */
+    hideCharCount: boolean;
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
@@ -94,13 +97,9 @@ export declare class TextField {
      */
     max: string | number;
     /**
-     * The maximum number of characters that can be entered in the field. Will display an error if too many characters are entered.
+     * The count of characters in the field. Will display a warning if the bound is reached. (NOTE: If the value of the text field has been set using the `value` prop, it will be truncated to this number of characters)
      */
     maxCharacters: number;
-    /**
-     * The count of characters in the field. Will display a warning if the bound is reached.
-     */
-    maxLength: number;
     /**
      * The minimum number that can be accepted as a value, when `type` is `number` and `rows` is `1`. (NOTE: Ensure to include visual indication of min value in `helperText` or `label`)
      */
@@ -141,10 +140,6 @@ export declare class TextField {
      * The size of the text field component.
      */
     size?: IcSizesNoLarge;
-    /**
-     * @deprecated This prop should not be used anymore. Set prop `size` to "small" instead.
-     */
-    small?: boolean;
     /**
      * If `true`, the value of the text field will have its spelling and grammar checked.
      */
@@ -219,7 +214,7 @@ export declare class TextField {
      * Sets focus on the native `input`.
      */
     setFocus(): Promise<void>;
-    private getMaxLengthExceeded;
+    private getMaxValueExceeded;
     private getMaxCharactersReached;
     private onInput;
     private onBlur;

package/dist/types/components/ic-toast/ic-toast.d.ts

@@ -7,10 +7,12 @@ import { IcActivationTypes, IcStatusVariants } from "../../utils/types";
 export declare class Toast {
     private dismissTimeout;
     private interactiveElements;
-    private isManual;
     private neutralVariantLabel;
     private timerRefreshInterval;
+    private focusInteractiveElement;
+    private shiftKeyPressed;
     el: HTMLIcToastElement;
+    isManual: boolean;
     timerProgress: number;
     visible: boolean;
     /**
@@ -50,6 +52,8 @@ export declare class Toast {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    componentDidUpdate(): void;
+    watchVisibleHandler(): void;
     handleDismiss(): void;
     handleKeyboard(ev: KeyboardEvent): void;
     handleTimer(ev: MouseEvent): void;
@@ -62,6 +66,9 @@ export declare class Toast {
     private handleProgressChange;
     private handleLongText;
     private findNextInteractiveElement;
+    private resetAutoDismissTimer;
     private isActive;
+    private onFocus;
+    private onBlur;
     render(): any;
 }

package/dist/types/components/ic-toast-region/ic-toast-region.d.ts

@@ -9,10 +9,5 @@ export declare class ToastRegion {
     watchOpenToastHandler(newValue: HTMLIcToastElement): void;
     handleDismissedToast(): void;
     private showToast;
-    /**
-     * @deprecated Use openToast prop to display toast instead.
-     * @param {HTMLIcToastElement} toast The toast component to display
-     */
-    setVisible(toast: HTMLIcToastElement): Promise<void>;
     render(): any;
 }

package/dist/types/components/ic-toggle-button/ic-toggle-button.d.ts

@@ -42,7 +42,7 @@ export declare class ToggleButton {
     /**
      * If `true`, the toggle button will be in a checked state.
      */
-    toggleChecked: boolean;
+    checked: boolean;
     /**
      * The variant of the toggle button.
      */

package/dist/types/components/ic-toggle-button-group/ic-toggle-button-group.types.d.ts

@@ -1,5 +1,5 @@
 export interface IcChangeEventDetail {
-    toggleChecked: boolean[] | boolean;
+    checked: boolean[] | boolean;
     toggledOptions?: {
         toggleButton: HTMLIcToggleButtonElement;
     }[];

package/dist/types/components/ic-top-navigation/ic-top-navigation.d.ts

@@ -72,7 +72,7 @@ export declare class TopNavigation {
     /**
      * Emitted when the top navigation is resized.
      */
-    topNavResized: EventEmitter<{
+    icTopNavResized: EventEmitter<{
         size: number;
     }>;
     disconnectedCallback(): void;