@ukic/web-components 2.1.0-beta.0 → 2.1.0-beta.2

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

@@ -16,70 +16,70 @@ export declare class SearchBar {
   private assistiveHintEl;
   private preventSubmit;
   /**
-   * Provide a label for the input.
+   * The label for the search bar.
    */
   label: string;
   /**
-   * Specify if the input requires a value.
+   * If `true`, the search bar will require a value.
    */
   required?: boolean;
   /**
-   * Specify whether the input is disabled.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * Specify whether the input is read only.
+   * If `true`, the readonly state will be set.
    */
   readonly?: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The placeholder value to display.
    */
   placeholder?: string;
   /**
-   * Specify whether the component fills the full width of the container.
-   * If true, this overrides the --input-width css prop.
+   * Specify whether the search bar fills the full width of the container.
+   * If `true`, this overrides the --input-width CSS variable.
    */
   fullWidth?: boolean;
   /**
    * 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.
+   * If `true`, all options provided will be displayed.
    */
   disableFilter?: boolean;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the search bar.
    */
   small?: boolean;
   /**
-   * Value of Search input.
+   * The value of the search input.
    */
   value: string;
   /**
-   * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+   * The automatic capitalisation of the text value as it is entered/edited by the user.
    * Available options: "off", "none", "on", "sentences", "words", "characters".
    */
   autocapitalize: string;
   /**
-   * Indicates whether the value of the control can be automatically completed by the browser.
+   * The state of autocompletion the browser can apply on the text value.
    */
   autocomplete?: IcAutocompleteTypes;
   /**
-   * Whether auto correction should be enabled when the user is entering/editing the text value.
+   * The state of autocorrection the browser can apply when the user is entering/editing the text value.
    */
   autocorrect?: IcAutocorrectStates;
   /**
-   * This Boolean attribute lets you specify that a form control should have input focus when the page loads.
+   * If `true`, the form control will have input focus when the page loads.
    */
   autofocus: boolean;
   /**
-   * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
+   * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
   debounce?: number;
   private debounceChanged;
@@ -88,28 +88,28 @@ export declare class SearchBar {
    */
   name: string;
   /**
-   * If `true`, the element will have its spelling and grammar checked.
+   * If `true`, the value of the search will have its spelling and grammar checked.
    */
   spellcheck: boolean;
   /**
-   * Provide the suggested search options
+   * The suggested search options.
    */
   options?: IcMenuOption[];
   watchOptionsHandler(newOptions: IcMenuOption[]): void;
   /**
-   * Specify whether the input should be focussed when component loaded.
+   * If `true`, the search bar will be focused when component loaded.
    */
   focusOnLoad?: boolean;
   /**
-   * Provide hint text for hidden assistive description element.
+   * The hint text for the hidden assistive description element.
    */
   hintText?: string;
   /**
-   * Provide text for empty results list
+   * The text displayed when there are no options in the option list.
    */
   emptyOptionListText: string;
   /**
-   * Number of characters until suggestions appear
+   * The number of characters until suggestions appear.
    */
   charactersUntilSuggestion: number;
   watchValueHandler(newValue: string): void;
@@ -120,6 +120,7 @@ export declare class SearchBar {
   handleKeyDown(ev: CustomEvent): void;
   handleKeyUp(ev: KeyboardEvent): void;
   private handleSubmitSearch;
+  private handleSubmitSearchKeyDown;
   /**
    * Emitted when a keyboard input occurred.
    */
@@ -183,7 +184,9 @@ export declare class SearchBar {
   clearButtonFocused: boolean;
   searchSubmitFocused: boolean;
   prevNoOption: boolean;
+  highlightedValue: string;
   private handleOptionSelect;
+  private handleMenuOptionHighlight;
   private handleMenuChange;
   private setMenuChange;
   private handleHostFocus;

package/dist/types/components/ic-section-container/ic-section-container.d.ts

@@ -1,11 +1,11 @@
 import { IcAlignment } from "../../utils/types";
 export declare class SectionContainer {
   /**
-   * How the container should be aligned.
+   * The alignment of the container.
    */
   aligned?: IcAlignment;
   /**
-   * Removes the standard vertical padding from the container.
+   * If `true`, the standard vertical padding from the container will be removed.
    */
   fullHeight?: boolean;
   render(): any;

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

@@ -13,51 +13,51 @@ export declare class Select {
   private inheritedAttributes;
   private debounce;
   /**
-   * Provide a label for the input.
+   * The label for the select.
    */
   label: string;
   /**
-   * Provide the possible selection options.
+   * The possible selection options.
    */
   options?: IcMenuOption[];
   /**
-   * Specify if the input requires a value.
+   * If `true`, the select will require a value.
    */
   required?: boolean;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * Specify whether the input is disabled.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
-   * Specify whether the input is read only.
+   * If `true`, the readonly state will be set.
    */
   readonly?: boolean;
   /**
-   * Provide a placeholder value to display.
+   * The placeholder value to be displayed.
    */
   placeholder?: string;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * Specify whether small styling is to be applied to the element.
+   * If `true`, the small styling will be applied to the select.
    */
   small?: boolean;
   /**
-   * If true, then fill width of container.
+   * If `true`, the select element will fill the width of the container.
    */
   fullWidth: boolean;
   /**
-   * Provide a validation status.
+   * The validation status - e.g. 'error' | 'warning' | 'success'.
    */
   validationStatus?: IcInformationStatusOrEmpty;
   /**
-   * Provide the text to display as the validation message.
+   * The text to display as the validation message.
    */
   validationText?: string;
   /**
@@ -69,19 +69,19 @@ export declare class Select {
    */
   name?: string;
   /**
-   * Display a button which clears the input when clicked. The button will always appear on the searchable select.
+   * If `true`, a button which clears the select input when clicked will be displayed. The button will always appear on the searchable select.
    */
   showClearButton?: boolean;
   /**
-   * If true, the select can be typed in to filter options.
+   * If `true`, a searchable variant of the select will be displayed which can be typed in to filter options.
    */
   searchable?: boolean;
   /**
-   * If true, descriptions of options are included when filtering options in a searchable select.
+   * If `true`, descriptions of options will be included when filtering options in a searchable select.
    */
   includeDescriptionsInSearch?: boolean;
   /**
-   * If true, group titles of grouped options are included when filtering options in a searchable select.
+   * If `true`, group titles of grouped options will be included when filtering options in a searchable select.
    */
   includeGroupTitlesInSearch?: boolean;
   /**
@@ -89,11 +89,11 @@ export declare class Select {
    */
   searchMatchPosition?: IcSearchMatchPositions;
   /**
-   * Number of characters until suggestions appear for a searchable select.
+   * The number of characters until suggestions appear for a searchable select.
    */
   charactersUntilSuggestions?: number;
   /**
-   * Provide text for empty results list
+   * The text displayed when there are no options in the option list.
    */
   emptyOptionListText: string;
   open: boolean;

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

@@ -1,45 +1,45 @@
 import { IcThemeForeground } from "../../utils/types";
 /**
- * @slot app-icon - Content will be rendered adjacent to the application title at the very top of the side navigation
- * @slot primary-navigation - Content will be rendered at the top of the side navigation
- * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation
+ * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
+ * @slot primary-navigation - Content will be rendered at the top of the side navigation.
+ * @slot secondary-navigation - Content will be rendered at the bottom of the side navigation.
  */
 export declare class SideNavigation {
   el: HTMLIcSideNavigationElement;
   /**
-   * Title to display.
+   * The title of the app to be displayed.
    */
   appTitle: string;
   /**
-   * Status of application
+   * The status of the app to be displayed.
    */
   status: string;
   /**
-   * Version of application
+   * The version of the app to be displayed.
    */
   version: string;
   /**
-   * If true, the ic-side-navigation will load in an expanded state
+   * If `true`, the side navigation will load in an expanded state.
    */
   expanded: boolean;
   /**
-   * Set application title link
+   * The URL that the app title link points to.
    */
   href: string;
   /**
-   * If true, the menu expand button is removed (PLEASE NOTE: This takes effect on screen sizes 992px and above)
+   * If `true`, the menu expand button will be removed (PLEASE NOTE: This takes effect on screen sizes 992px and above).
    */
   static: boolean;
   /**
-   * If true, the icon and label will appear when side navigation is collapsed
+   * If `true`, the icon and label will appear when side navigation is collapsed.
    */
   collapsedIconLabels: boolean;
   /**
-   * If true, side navigation will be contained by parent element
+   * If `true`, side navigation will be contained by its parent element.
    */
   inline: boolean;
   /**
-   * If true, disable automatic parent wrapper styling
+   * If `true`, automatic parent wrapper styling will be disabled.
    */
   disableAutoParentStyling: boolean;
   foregroundColor: IcThemeForeground;

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

@@ -2,11 +2,11 @@ import { IcSkeletonVariants } from "./ic-skeleton.types";
 export declare class Skeleton {
   el: HTMLIcSkeletonElement;
   /**
-   * The variant of the skeleton that will be displayed
+   * The variant of the skeleton that will be displayed.
    */
   variant?: IcSkeletonVariants;
   /**
-   * Set the skeleton to the light variant
+   * If `true`, the skeleton will be set to the light variant.
    */
   light?: boolean;
   hasChild: boolean;

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

@@ -13,7 +13,7 @@ export declare class StatusTag {
    */
   appearance?: IcStatusTagAppearance;
   /**
-   * The size of the status tag.
+   * If `true`, the small styling will be applied to the status tag.
    */
   small?: boolean;
   componentDidLoad(): void;

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

@@ -2,25 +2,24 @@ import { IcStepTypes } from "./ic-step.types";
 export declare class Step {
   el: HTMLIcStepElement;
   /**
-   * State of step
+   * The state of the step within the stepper.
    */
   stepType?: IcStepTypes;
   /**
-   * Name of step
+   * The name of the step within the stepper.
    */
   stepTitle?: string;
   /**
-   * Additional information about step
+   * The additional information about the step.
    */
   stepSubtitle?: string;
   /**
-   * @internal The step number, managed by ic-stepper
+   * @internal The step number, managed by ic-stepper.
    */
-  stepNum: number;
+  stepNum?: number;
   /**
-   * @internal Final step in series flag, managed by ic-stepper
+   * @internal If `true`, the step will be marked as being the last one in the series. This is managed by ic-stepper.
    */
-  lastStep: boolean;
-  componentDidLoad(): void;
+  lastStep?: boolean;
   render(): any;
 }

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

@@ -2,7 +2,7 @@ import { IcStepperAlignment } from "./ic-stepper.types";
 export declare class IcStepper {
   el: HTMLIcStepperElement;
   /**
-   * How the stepper should be aligned in its container.
+   * The alignment of the stepper within its container.
    */
   aligned?: IcStepperAlignment;
   /**

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

@@ -7,27 +7,27 @@ export declare class Switch {
   private inputId;
   el: HTMLIcSwitchElement;
   /**
-   * Applies an aria-label to the component, for when no visual 'name' is provided.
+   * The aria-label applied to the switch when no visual 'name' is provided.
    */
   label: string;
   /**
-   * Hides the label and applies the required label value as an aria-label.
+   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
    */
   hideLabel?: boolean;
   /**
-   * Provide helper text to display additional field guidance.
+   * The helper text that will be displayed for additional field guidance.
    */
   helperText?: string;
   /**
-   * If true, the component is checked.
+   * If `true`, the switch will display as checked.
    */
   checked?: boolean;
   /**
-   * If true, the component reduces in size to the small state.
+   * If `true`, the small styling will be applied to the switch.
    */
   small?: boolean;
   /**
-   * If true, the component is not interactive.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
   /**
@@ -35,7 +35,7 @@ export declare class Switch {
    */
   name?: string;
   /**
-   * If true, the component will render the On/Off state text.
+   * If `true`, the switch will render the On/Off state text.
    */
   showState?: boolean;
   /**

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

@@ -6,26 +6,26 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
  */
 export declare class Tab {
   host: HTMLIcTabElement;
-  /** @internal Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
+  /** @internal The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel. */
   contextId?: string;
   /**
-   * Disables the tab.
+   * If `true`, the disabled state will be set.
    */
   disabled?: boolean;
-  /** @internal Will display a selected indicator and set tabIndex. */
+  /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */
   selected?: boolean;
   /** @internal The shared ID between panel and tab. */
   tabId?: string;
   /** @internal The position of the tab inside the tabs array in context. */
-  tabPosition: number;
+  tabPosition?: number;
   /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
   appearance?: IcThemeForegroundNoDefault;
   /**
-   * Called when a tab is selected.
+   * Emitted when a tab is selected.
    */
   tabClick: EventEmitter<IcTabClickEventDetail>;
   /**
-   * @internal Called when a tab is focussed.
+   * @internal Emitted when a tab is focussed.
    */
   tabFocus: EventEmitter<IcTabClickEventDetail>;
   private isInitialRender;
@@ -34,6 +34,5 @@ export declare class Tab {
   private handleFocus;
   private handleMouseDown;
   componentDidUpdate(): void;
-  componentDidLoad(): void;
   render(): any;
 }

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

@@ -4,7 +4,7 @@ import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.
 export declare class TabContext {
   host: HTMLIcTabContextElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
   contextId?: string;
   /**
@@ -12,11 +12,11 @@ export declare class TabContext {
    */
   activationType?: IcActivationTypes;
   /**
-   * Allows the user to control the selected tab. Must be used alongside the tabSelect event to manage tab selection.
+   * The selected tab to be controlled by the user. Must be used alongside the tabSelect event to manage tab selection.
    */
   selectedTabIndex?: number;
   /**
-   * Determines whether the light or dark variant of the tabs should be displayed.
+   * The appearance of the tab context, e.g dark, or light.
    */
   appearance?: IcThemeForegroundNoDefault;
   selectedTab: number | null;

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

@@ -3,18 +3,18 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabGroup {
   host: HTMLIcTabGroupElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another set of tabs inside a tab panel.
    */
   contextId?: string;
   /**
-   * Use when tabs and tab panels are to be positioned separately.
+   * If `true`, the tabs and tab panels will be positioned separately.
    */
   inline?: boolean;
   /**
-   * Provide a label to describe the purpose of the set of tabs to screen reader users.
+   * The label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  /** @internal The appearance of the tab group, e.g dark, or light. */
   appearance?: IcThemeForegroundNoDefault;
   firstTabVisible: boolean;
   lastTabVisible: boolean;

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

@@ -2,17 +2,16 @@ import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class TabPanel {
   host: HTMLIcTabPanelElement;
   /**
-   * Provide a unique context if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
+   * The unique context needed if using multiple tabs inside one another i.e. rendering another tabs inside a tab panel.
    */
   contextId?: string;
   /** @internal The position of the tab panel inside the tabs array in context. */
-  tabPosition: number;
+  tabPosition?: number;
   /** @internal The shared ID that links the panel and tab. */
   panelId?: string;
   /** @internal The shared ID of the currently selected tab. */
   selectedTab?: string;
-  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  /** @internal The appearance of the tabs, e.g dark, or light. */
   appearance?: IcThemeForegroundNoDefault;
-  componentDidLoad(): void;
   render(): any;
 }