@ukic/web-components 3.0.0-alpha.5 → 3.0.0-alpha.6

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

@@ -14,6 +14,7 @@ export declare class Accordion {
      * If `true`, the accordion will be disabled.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the accordion appears expanded.
      */
@@ -45,6 +46,7 @@ export declare class Accordion {
      * Sets focus on accordion heading.
      */
     setFocus(): Promise<void>;
+    componentWillLoad(): void;
     disconnectedCallback(): void;
     componentDidLoad(): void;
     private toggleExpanded;

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

@@ -1,6 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcButtonTypes, IcButtonVariants, IcButtonTooltipPlacement } from "./ic-button.types";
-import { IcSizes, IcTheme, IcThemeMode } from "../../utils/types";
+import { IcSizes, IcBrand, IcThemeMode } from "../../utils/types";
 /**
  * @slot left-icon - Content will be placed to the left of the button label.
  * @slot right-icon - Content will be placed to the right of the button label.
@@ -170,7 +170,7 @@ export declare class Button {
     componentDidLoad(): void;
     componentWillRender(): void;
     handleHostClick(event: Event): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the native `button`.
      */

package/dist/types/components/ic-card-vertical/ic-card-vertical.d.ts

@@ -1,4 +1,4 @@
-import { IcTheme, IcThemeMode } from "../../utils/types";
+import { IcBrand, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the card to the right of the icon.
  * @slot message - Content will be placed in the main body of the card.
@@ -28,6 +28,7 @@ export declare class CardVertical {
      * If `true`, the card will be disabled if it is clickable.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      *  If `true`, the card will have an expandable area and expansion toggle button.
      */
@@ -76,7 +77,7 @@ export declare class CardVertical {
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(event: Event): void;
-    themeChangeHandler(ev: CustomEvent<IcTheme>): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the card.
      */

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

@@ -19,6 +19,7 @@ export declare class Checkbox {
      * If `true`, the checkbox will be set to the disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The text to be displayed when dynamic.
      */

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

@@ -8,6 +8,7 @@ export declare class CheckboxGroup {
      * If `true`, the checkbox group will be set to the disabled state.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * The helper text that will be displayed for additional field guidance.
      */

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

@@ -20,6 +20,7 @@ export declare class Chip {
      * If `true`, the chip will appear disabled.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the chip will have a close button at the end to dismiss it.
      */
@@ -45,6 +46,10 @@ export declare class Chip {
      * The emphasis of the chip.
      */
     variant?: IcEmphasisType;
+    /**
+     * The text in the dismiss button tooltip and aria label.
+     */
+    dismissLabel?: string;
     /**
      * Is emitted when the user dismisses the chip.
      */

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

@@ -1,8 +1,8 @@
-import { IcOrientation, IcThemeForeground, IcThemeMode } from "../../utils/types";
+import { IcBrand, IcOrientation, IcBrandForeground, IcThemeMode } from "../../utils/types";
 import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./ic-divider.types";
 export declare class Divider {
     el: HTMLIcDividerElement;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * The line style of the divider.
      */
@@ -24,12 +24,12 @@ export declare class Divider {
     /**
      * Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.
      */
-    theme?: IcThemeMode | IcThemeForeground;
+    theme?: IcThemeMode | IcBrandForeground;
     /**
      * The thickness of the divider.
      */
     weight: IcDividerWeights;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private updateMonochromeState;
     componentWillRender(): void;
     render(): any;

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground } from "../../utils/types";
+import { IcAlignment, IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcFooterBreakpoints } from "./ic-footer.types";
 /**
  * @slot description - Content will be rendered at the top of the footer.
@@ -12,7 +12,7 @@ export declare class Footer {
     private resizeObserver;
     el: HTMLIcFooterElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * The alignment of the section containers used within the footer.
      */
@@ -44,7 +44,7 @@ export declare class Footer {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private isSmall;
     private resizeObserverCallback;
     private runResizeObserver;

package/dist/types/components/ic-footer-link/ic-footer-link.d.ts

@@ -1,4 +1,4 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcBrandForeground } from "../../utils/types";
 type FooterConfig = {
     small: boolean;
     grouped: boolean;
@@ -7,7 +7,7 @@ export declare class FooterLink {
     el: HTMLIcFooterLinkElement;
     deviceSize: number;
     footerConfig: FooterConfig;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * If `true`, the user can save the linked URL instead of navigating to it.
      */
@@ -34,7 +34,7 @@ export declare class FooterLink {
     target?: string;
     componentWillLoad(): void;
     footerResizeHandler(): void;
-    footerThemeChangeHandler(ev: CustomEvent): void;
+    footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private inferConfig;
     render(): any;
 }

package/dist/types/components/ic-footer-link-group/ic-footer-link-group.d.ts

@@ -1,9 +1,9 @@
-import { IcThemeForeground, IcThemeForegroundNoDefault } from "../../utils/types";
+import { IcBrand, IcBrandForeground, IcBrandForegroundNoDefault } from "../../utils/types";
 export declare class FooterLinkGroup {
     el: HTMLIcFooterLinkGroupElement;
     expanded: boolean;
     deviceSize: number;
-    dropdownIconStyle: IcThemeForegroundNoDefault | IcThemeForeground;
+    dropdownIconStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     small: boolean;
     /**
      * The title of the link group to be displayed.
@@ -12,7 +12,7 @@ export declare class FooterLinkGroup {
     componentWillLoad(): void;
     componentDidLoad(): void;
     footerResizeHandler(): void;
-    footerThemeChangeHandler(ev: CustomEvent): void;
+    footerBrandChangeHandler(ev: CustomEvent<IcBrand>): void;
     private isSmall;
     private handleKeydown;
     private toggleExpanded;

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

@@ -1,4 +1,4 @@
-import { IcAlignment, IcSizesNoLarge, IcThemeForeground } from "../../utils/types";
+import { IcAlignment, IcSizesNoLarge, IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcHeroContentAlignments } from "./ic-hero.types";
 /**
  * @slot heading - Content will be rendered in the title area, in place of the heading.
@@ -9,7 +9,7 @@ import { IcHeroContentAlignments } from "./ic-hero.types";
 export declare class Hero {
     private hostMutationObserver;
     el: HTMLIcHeroElement;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     rightContent: boolean;
     leftContentFullWidth: boolean;
     scrollFactor: string;
@@ -53,7 +53,7 @@ export declare class Hero {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentWillRender(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     doScroll(): void;
     private hostMutationCallback;
     render(): any;

package/dist/types/components/ic-horizontal-scroll/ic-horizontal-scroll.d.ts

@@ -1,4 +1,4 @@
-import { IcThemeForeground, IcThemeMode } from "../../utils/types";
+import { IcBrandForeground, IcThemeMode } from "../../utils/types";
 export declare class HorizontalScroll {
     private buttonStateSet;
     private isScrolling;
@@ -14,7 +14,7 @@ export declare class HorizontalScroll {
     /**
      * The appearance of the horizontal scroll, e.g. dark, light or the default.
      */
-    appearance?: IcThemeForeground;
+    appearance?: IcBrandForeground;
     /** @internal Determines whether black variant of the tabs should be displayed. */
     monochrome?: boolean;
     /**

package/dist/types/components/ic-input-component-container/ic-input-component-container.d.ts

@@ -9,6 +9,7 @@ export declare class InputComponentContainer {
      *  If `true`, the disabled state will be set.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      *  If `true`, the input component container will fill the width of the container it is in.
      */
@@ -33,6 +34,7 @@ export declare class InputComponentContainer {
      * The validation status of the input component container - e.g. 'error' | 'warning' | 'success'.
      */
     validationStatus: IcInformationStatusOrEmpty;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     private hostMutationCallback;
     render(): any;

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

@@ -1,4 +1,4 @@
-import { IcTheme, IcThemeMode } from "../../utils/types";
+import { IcBrand, IcThemeMode } from "../../utils/types";
 /**
  * @slot router-item - Handle routing by nesting your routes in this slot.
  */
@@ -42,7 +42,7 @@ export declare class Link {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the link.
      */

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

@@ -40,7 +40,7 @@ export declare class Menu {
     /**
      * @internal If `true`, autofocus will be applied on selected item when menu is open.
      */
-    autoFocusOnSelected: boolean;
+    autofocusOnSelected: boolean;
     /**
      *  If `true`, the menu will close when an option is selected.
      */

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

@@ -17,6 +17,7 @@ export declare class MenuItem {
      * If `true`, the menu item will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The URL that the link points to. This will render the menu item as an "a" tag.
      */

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
+import { IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcThemeMode } from "../../utils/types";
 import { IcNavButtonModes } from "./ic-navigation-button.types";
 /**
  * @slot icon - Content will be placed to the left of the button label.
@@ -9,7 +9,7 @@ export declare class NavigationButton {
     private inheritedAttributes;
     private hostMutationObserver;
     el: HTMLIcNavigationButtonElement;
-    initialAppearance: IcThemeForegroundNoDefault | IcThemeForeground;
+    initialAppearance: IcBrandForegroundNoDefault | IcBrandForeground;
     /**
      * The display mode.
      */
@@ -52,7 +52,7 @@ export declare class NavigationButton {
     disconnectedCallback(): void;
     navBarMenuOpenHandler(): void;
     navBarMenuCloseHandler(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the native `button`.
      */

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

@@ -1,4 +1,4 @@
-import { IcNavType, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
+import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcThemeMode } from "../../utils/types";
 export declare class NavigationGroup {
     private allGroupedNavigationItems;
     private collapsedNavItemsHeight;
@@ -15,7 +15,7 @@ export declare class NavigationGroup {
     deviceSize: number;
     dropdownOpen: boolean;
     expanded: boolean;
-    focusStyle: IcThemeForegroundNoDefault | IcThemeForeground;
+    focusStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     inTopNavSideMenu: boolean;
     navigationType: IcNavType | "";
     parentEl: HTMLElement;
@@ -36,7 +36,7 @@ export declare class NavigationGroup {
     componentDidLoad(): void;
     childBlurHandler(): void;
     navItemClickHandler(): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the nav item.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcNavType, IcTheme, IcThemeForeground, IcThemeForegroundNoDefault, IcThemeMode } from "../../utils/types";
+import { IcNavType, IcBrand, IcBrandForeground, IcBrandForegroundNoDefault, IcThemeMode } from "../../utils/types";
 /**
  * @part link - The `<a>` within ic-navigation-item
  * @slot badge - Badge component overlaying the top right of the icon.
@@ -14,7 +14,7 @@ export declare class NavigationItem {
     private ARIA_LABEL_STRING;
     el: HTMLIcNavigationItemElement;
     deviceSize: number;
-    focusStyle: IcThemeForegroundNoDefault | IcThemeForeground;
+    focusStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     inTopNavSideMenu: boolean;
     isSideNavMobile: boolean;
     isTopNavChild: boolean;
@@ -82,7 +82,7 @@ export declare class NavigationItem {
     componentWillLoad(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the nav item.
      */

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

@@ -26,6 +26,7 @@ export declare class Pagination {
      * If `true`, the pagination will not allow interaction.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the current page of the simple pagination will not be displayed.
      */

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

@@ -8,6 +8,7 @@ export declare class PaginationItem {
      * If `true`, the pagination item will be disabled.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * The label for the pagination item (applicable when simple pagination is being used).
      */

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

@@ -17,6 +17,7 @@ export declare class RadioOption {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The text to be displayed when dynamic.
      */

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

@@ -53,6 +53,7 @@ export declare class SearchBar {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * 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.

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

@@ -38,6 +38,7 @@ export declare class Select {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the built in filtering will be disabled for a searchable variant. For example, if options will already be filtered from external source.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcBrandForeground } from "../../utils/types";
 import { IcExpandedDetail } from "./ic-side-navigation.types";
 /**
  * @slot app-icon - Content will be rendered adjacent to the app title at the very top of the side navigation.
@@ -17,7 +17,7 @@ export declare class SideNavigation {
     el: HTMLIcSideNavigationElement;
     deviceSize: number;
     deviceSizeAppTitle: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     hasSecondaryNavigation: boolean;
     menuExpanded: boolean;
     menuOpen: boolean;
@@ -73,7 +73,7 @@ export declare class SideNavigation {
     componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
-    themeChangeHandler({ detail }: CustomEvent): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     private emitSideNavigationExpanded;
     private toggleMenu;
     private setToggleMenuFlyoutMenuVisibility;

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

@@ -1,7 +1,7 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrandForeground } from "../../utils/types";
 export interface IcTopBar {
     isSDevice: boolean;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     menuOpen: boolean;
     href: string;
     isAppNameSubtitleVariant: boolean;

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

@@ -18,6 +18,7 @@ export declare class Switch {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The helper text that will be displayed for additional field guidance.
      */

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

@@ -16,6 +16,7 @@ export declare class Tab {
      * If `true`, the disabled state will be set.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /** @internal Determines whether black variant of the tabs should be displayed. */
     monochrome?: boolean;
     /** @internal If `true`, the tab will display with a selected indicator and tabIndex will be set. */

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

@@ -8,6 +8,7 @@ export declare class TextField {
     private inheritedAttributes;
     private inputEl;
     private hostMutationObserver;
+    private interval;
     el: HTMLIcTextFieldElement;
     numChars: number;
     maxCharactersReached: boolean;
@@ -52,11 +53,12 @@ export declare class TextField {
     /**
      * If `true`, the form control will have input focus when the page loads.
      */
-    autoFocus: boolean;
+    autofocus: boolean;
     /**
      * If `true`, the disabled state will be set.
      */
     disabled: boolean;
+    watchDisabledHandler(): void;
     /**
      * Specify whether the text field fills the full width of the container.
      * If `true`, this overrides the --input-width CSS variable.
@@ -213,11 +215,12 @@ export declare class TextField {
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    private checkChildHydration;
     handleKeyDown(ev: KeyboardEvent): void;
     /**
      * Sets focus on the native `input`.
      */
-    setFocus(): Promise<void>;
+    setFocus(): void;
     private getMaxValueExceeded;
     private getMaxCharactersReached;
     private onInput;

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

@@ -1,24 +1,24 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcColor, IcTheme } from "../../utils/types";
+import { IcColor, IcBrand } from "../../utils/types";
 export declare class Theme {
     themeClass: string;
     /**
-     * The theme colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
+     * The brand colour. Can be a hex value e.g. "#ff0000", RGB e.g. "rgb(255, 0, 0)", or RGBA e.g. "rgba(255, 0, 0, 1)".
      */
-    color?: IcColor;
-    watchColorPropHandler(): void;
+    brandColor?: IcColor;
+    watchBrandColorPropHandler(): void;
     /**
      * The theme mode. Can be "dark", "light", or "system". "system" will use the device or browser settings.
      */
     theme: "dark" | "light" | "system";
     watchThemePropHandler(): void;
     /**
-     * @internal Emitted when the theme is changed.
+     * @internal Emitted when the brand color is changed.
      */
-    themeChange: EventEmitter<IcTheme>;
+    brandChange: EventEmitter<IcBrand>;
     componentWillLoad(): void;
     private darkModeChangeHandler;
-    private checkThemeColorContrast;
-    private setThemeColor;
+    private checkBrandColorContrast;
+    private setBrandColor;
     render(): any;
 }

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

@@ -19,6 +19,7 @@ export declare class ToggleButton {
      * If `true`, the toggle button will be in disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * If `true`, the toggle button will fill the width of the container.
      */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAlignment, IcThemeForeground, IcTheme, IcDeviceSizes, IcValueEventDetail, IcThemeMode } from "../../utils/types";
+import { IcAlignment, IcBrandForeground, IcBrand, IcDeviceSizes, IcValueEventDetail, IcThemeMode } from "../../utils/types";
 import { IcSearchBarBlurEventDetail } from "../ic-search-bar/ic-search-bar.types";
 /**
  * @slot app-icon - Content will be rendered to left of app title. Anything that is slotted here will be hidden from screen readers.
@@ -20,7 +20,7 @@ export declare class TopNavigation {
     private searchBar;
     el: HTMLIcTopNavigationElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     hasFullWidthSearchBar: boolean;
     mobileSearchBarVisible: boolean;
     mobileSearchHiddenOnBlur: boolean;
@@ -86,7 +86,7 @@ export declare class TopNavigation {
     navBarMenuCloseHandler(): void;
     searchInputBlurHandler({ detail, }: CustomEvent<IcSearchBarBlurEventDetail>): void;
     searchValueChangeHandler({ detail }: CustomEvent<IcValueEventDetail>): void;
-    themeChangeHandler({ detail }: CustomEvent<IcTheme>): void;
+    brandChangeHandler({ detail }: CustomEvent<IcBrand>): void;
     private checkSlots;
     private initialiseSearchBar;
     private toggleSearchBar;