@ukic/web-components 3.0.0 → 3.2.0

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, IcThemeForeground } from "../../utils/types";
+import { IcButtonTypes, IcButtonVariants } from "./ic-button.types";
+import { IcSizes, IcBrand, IcThemeMode, IcButtonTooltipPlacement } 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.
@@ -9,7 +9,7 @@ import { IcSizes, IcTheme, IcThemeForeground } from "../../utils/types";
  * @slot router-item - Handle routing by nesting your routes in this slot. Setting loading to true will have no impact on this slot.
  */
 export declare class Button {
-    private buttonEl;
+    private buttonEl?;
     private buttonIdNum;
     private hasTooltip;
     private id;
@@ -21,24 +21,20 @@ export declare class Button {
     private routerSlot;
     el: HTMLIcButtonElement;
     ariaLabel: string;
-    describedByContent: string;
+    describedByContent: string | undefined;
     title: string;
     /**
      * If `fileUpload` is set to `true`, this is the accepted list of file types.
      */
     accept?: string;
-    /**
-     * The appearance of the button, e.g. dark, light, or the default.
-     */
-    appearance?: IcThemeForeground;
     /**
      * @internal Used to identify any related child component
      */
-    ariaControlsId: string | boolean;
+    ariaControlsId?: string | boolean;
     /**
      * @internal Used to identify any related child component
      */
-    ariaOwnsId: string | boolean;
+    ariaOwnsId?: string | boolean;
     /**
      * If `true`, the button will be in disabled state.
      */
@@ -67,7 +63,7 @@ export declare class Button {
     /**
      * The name of the control for the file input, which is submitted with the form data.
      */
-    fileInputName: string;
+    fileInputName?: string;
     /**
      * The <form> element to associate the button with.
      */
@@ -108,6 +104,10 @@ export declare class Button {
      * If `true`, the button will be in loading state.
      */
     loading?: boolean;
+    /**
+     * If `true`, the button will display as monochromatic in either `light` or `dark` theme.
+     */
+    monochrome?: boolean;
     /**
      * If `fileUpload` is set to `true`, this boolean determines whether multiple files are accepted.
      */
@@ -123,7 +123,7 @@ export declare class Button {
     /**
      * The list of the files that have been selected by a user.
      */
-    selectedFiles: FileList;
+    selectedFiles?: FileList;
     /**
      * The size of the button to be displayed.
      */
@@ -132,6 +132,10 @@ export declare class Button {
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: string;
+    /**
+     * 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;
     /**
      * The position of the tooltip in relation to the button.
      */
@@ -166,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`.
      */
@@ -182,5 +186,7 @@ export declare class Button {
     private mutationCallback;
     private hostMutationCallback;
     private setHasTooltip;
+    private isIconVariant;
+    private arrangeRouterItem;
     render(): any;
 }

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

@@ -1,3 +1,2 @@
 export type IcButtonTypes = "reset" | "submit" | "button";
 export type IcButtonVariants = "primary" | "secondary" | "tertiary" | "destructive" | "icon" | "icon-primary" | "icon-secondary" | "icon-tertiary" | "icon-destructive";
-export type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";

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

@@ -1,4 +1,4 @@
-import { IcThemeForeground } 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.
@@ -15,9 +15,9 @@ import { IcThemeForeground } from "../../utils/types";
 export declare class CardVertical {
     private hostMutationObserver;
     el: HTMLIcCardVerticalElement;
-    appearance?: IcThemeForeground;
     areaExpanded: boolean;
     isFocussed: boolean;
+    monochrome: boolean;
     parentEl: HTMLElement | null;
     parentIsAnchorTag: boolean;
     /**
@@ -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.
      */
@@ -43,7 +44,7 @@ export declare class CardVertical {
     /**
      * The URL that the clickable card link points to. If set, the clickable card will render as an "a" tag, otherwise it will render as a button.
      */
-    href?: string | undefined;
+    href?: string;
     /**
      * The human language of the linked URL.
      */
@@ -68,11 +69,15 @@ export declare class CardVertical {
      * The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).
      */
     target?: string;
+    /**
+     * 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;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
     handleHostClick(event: Event): void;
-    themeChangeHandler(ev: CustomEvent): void;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
     /**
      * Sets focus on the card.
      */
@@ -81,6 +86,5 @@ export declare class CardVertical {
     private parentBlurred;
     private updateTheme;
     private toggleExpanded;
-    private hostMutationCallback;
     render(): any;
 }

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

@@ -1,28 +1,29 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcAdditionalFieldTypes, IcSizes } from "../../utils/types";
+import { IcAdditionalFieldTypes, IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot additional-field - Content to be displayed alongside a checkbox.
  */
 export declare class Checkbox {
-    private additionalFieldContainer;
+    private additionalFieldContainer?;
     el: HTMLIcCheckboxElement;
     /**
      * The style of additionalField that will be displayed if used.
      */
-    additionalFieldDisplay: IcAdditionalFieldTypes;
+    additionalFieldDisplay?: IcAdditionalFieldTypes;
     /**
-     * If `true`, the checkbox will be set to the checked state.
+     * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.
      */
     checked?: boolean;
-    initiallyChecked: boolean;
+    initiallyChecked: boolean | undefined;
     /**
      * If `true`, the checkbox will be set to the disabled state.
      */
     disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The text to be displayed when dynamic.
      */
-    dynamicText: string;
+    dynamicText?: string;
     /**
      * The <form> element to associate the checkbox with.
      */
@@ -30,12 +31,12 @@ export declare class Checkbox {
     /**
      * The group label for the checkbox.
      */
-    groupLabel: string;
+    groupLabel?: string;
     /**
      * If `true`, the indeterminate state will be displayed when checked.
      */
-    indeterminate: boolean;
-    displayIndeterminate: boolean;
+    indeterminate?: boolean;
+    displayIndeterminate: boolean | undefined;
     watchIndeterminateHandler(): void;
     /**
      * The label for the checkbox.
@@ -44,15 +45,19 @@ export declare class Checkbox {
     /**
      * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.
      */
-    name: string;
+    name?: string;
     /**
      * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.
      */
-    nativeIndeterminateBehaviour: boolean;
+    nativeIndeterminateBehaviour?: boolean;
     /**
      * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.
      */
     size?: IcSizes;
+    /**
+     * 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;
     /**
      * The value for the checkbox.
      */
@@ -60,7 +65,7 @@ export declare class Checkbox {
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
-    hideLabel: boolean;
+    hideLabel?: boolean;
     /**
      * Emitted when a checkbox has been checked.
      */

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

@@ -1,20 +1,22 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcSizes } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcSizes, IcThemeMode } from "../../utils/types";
 import { IcChangeEventDetail } from "./ic-checkbox-group.types";
 export declare class CheckboxGroup {
+    private checkboxSelector;
     el: HTMLIcCheckboxGroupElement;
     /**
      * If `true`, the checkbox group will be set to the disabled state.
      */
-    disabled: boolean;
+    disabled?: boolean;
+    watchDisabledHandler(): void;
     /**
      * The helper text that will be displayed for additional field guidance.
      */
-    helperText: string;
+    helperText?: string;
     /**
      * If `true`, the label will be hidden and the required label value will be applied as an aria-label.
      */
-    hideLabel: boolean;
+    hideLabel?: boolean;
     /**
      * The label for the checkbox group to be displayed.
      */
@@ -27,19 +29,24 @@ export declare class CheckboxGroup {
     /**
      * If `true`, the checkbox group will require a value.
      */
-    required: boolean;
+    required?: boolean;
     /**
      * The size of the checkboxes to be displayed. This does not affect the font size of the label.
      */
     size?: IcSizes;
+    /**
+     * 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;
+    watchThemeHandler(newValue: IcThemeMode): void;
     /**
      * The validation status - e.g. 'error' | 'warning' | 'success'.
      */
-    validationStatus: IcInformationStatusOrEmpty;
+    validationStatus?: IcInformationStatusOrEmpty;
     /**
-     * The validation text - e.g. 'error' | 'warning' | 'success'.
+     * The text to display as the validation message.
      */
-    validationText: string;
+    validationText?: string;
     /**
      * Emitted when a checkbox is checked.
      */

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

@@ -7,10 +7,11 @@ import { IcColor, IcEmphasisType, IcSizes } from "../../utils/types";
 export declare class Chip {
     private inAGGrid;
     el: HTMLIcChipElement;
+    customColorClass: string;
     hovered: boolean;
     visible: boolean;
     /**
-     * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.
+     * The custom chip colour. This will override 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)".
      */
     customColor?: IcColor;
@@ -19,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.
      */
@@ -32,13 +34,22 @@ export declare class Chip {
      */
     size?: IcSizes;
     /**
-     * If `true`, the outlined variant of chip will have a transparent background rather than white.
+     * Sets the chip to the dark or light theme colors. "inherit" will set the color based on the system settings or ic-theme component.
+     * Setting the "customColor" prop will override this.
+     */
+    theme?: "dark" | "light" | "inherit";
+    /**
+     * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.
      */
     transparentBackground?: boolean;
     /**
      * 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-data-list/ic-data-list.d.ts

@@ -1,4 +1,4 @@
-import { IcSizesNoLarge } from "../../utils/types";
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot heading - Content will be placed at the top of the data list.
  */
@@ -7,10 +7,14 @@ export declare class DataList {
     /**
      * The title for the data list.
      */
-    heading: string;
+    heading?: string;
     /**
      * The size of the data list component.
      */
     size?: IcSizesNoLarge;
+    /**
+     * 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;
     render(): any;
 }

package/dist/types/components/ic-data-row/ic-data-row.d.ts

@@ -1,4 +1,4 @@
-import { IcSizesNoLarge } from "../../utils/types";
+import { IcSizesNoLarge, IcThemeMode } from "../../utils/types";
 /**
  * @slot label - Content will be rendered in the leftmost cell.
  * @slot value - Content will be rendered to the right of the label.
@@ -13,15 +13,19 @@ export declare class DataRow {
     /**
      * The label in the leftmost cell of the row.
      */
-    label: string;
+    label?: string;
     /**
      * The size of the data row component.
      */
     size?: IcSizesNoLarge;
+    /**
+     * 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;
     /**
      * The value of the middle (right if no end-component supplied) cell of the row.
      */
-    value: string;
+    value?: string;
     disconnectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
+import { IcThemeMode } from "../../utils/types";
 /**
  * @slot dialog-controls - Content will be place at the bottom of the dialog.
  * @slot heading - Content will be placed at the top of the dialog.
@@ -6,17 +7,19 @@ import { EventEmitter } from "../../stencil-public-runtime";
  * @slot alert - Content will be placed at the top of the content area of the dialog.
  */
 export declare class Dialog {
-    private backdropEl;
+    private backdropEl?;
     private contentArea;
+    private contentAreaMutationObserver;
     private DATA_GETS_FOCUS;
-    private DATA_GETS_FOCUS_SELECTOR;
     private DIALOG_CONTROLS;
-    private dialogEl;
+    private dialogEl?;
     private dialogHeight;
     private focusedElementIndex;
     private IC_TEXT_FIELD;
     private IC_ACCORDION;
     private IC_ACCORDION_GROUP;
+    private IC_CHECKBOX;
+    private IC_SEARCH_BAR;
     private interactiveElementList;
     private resizeObserver;
     private resizeTimeout;
@@ -25,15 +28,11 @@ export declare class Dialog {
     dialogRendered: boolean;
     fadeIn: boolean;
     /**
-     * If set to `false`, default buttons or slotted dialog controls will not be displayed.
-     */
-    buttons?: boolean;
-    /**
-     * If set to `true`, the dialog will not close when the backdrop is clicked.
+     * If set to `false`, the dialog will not close when the backdrop is clicked.
      */
     closeOnBackdropClick?: boolean;
     /**
-     * If default buttons are displayed, sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
+     * If 'true', sets the 'primary' or rightmost button to the destructive variant. Stops initial focus being set on the 'primary' or rightmost default or slotted button.
      */
     destructive?: boolean;
     /**
@@ -53,10 +52,14 @@ export declare class Dialog {
      * If `true`, the close button will not be displayed.
      */
     hideCloseButton?: boolean;
+    /**
+     * If set to `true`, default button controls will not be shown, but slotted dialog controls will still be displayed.
+     */
+    hideDefaultControls: boolean;
     /**
      * Sets the heading for the dialog.
      */
-    heading: string;
+    heading?: string;
     /**
      * Sets the optional label for the dialog which appears above the heading.
      */
@@ -64,12 +67,16 @@ export declare class Dialog {
     /**
      * If `true`, the dialog will be displayed.
      */
-    open: boolean;
+    open?: boolean;
     watchOpenHandler(): void;
     /**
      * Sets the maximum and minimum height and width for the dialog.
      */
     size?: "small" | "medium" | "large";
+    /**
+     * 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;
     /**
      * Cancelation event emitted when default 'Cancel' button clicked or 'cancelDialog' method is called.
      */
@@ -109,7 +116,9 @@ export declare class Dialog {
     private closeIconClick;
     private getInteractiveElements;
     private getNextFocusEl;
-    private focusNextInteractiveElement;
+    private onTabKeyPress;
+    private shouldSkipElement;
+    private focusElement;
     private loopNextFocusIndexIfLastElement;
     private setFocusIndexBasedOnShiftKey;
     private renderDialog;

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

@@ -1,6 +1,36 @@
-import { IcThemeForeground } from "../../utils/types";
+import { IcBrand, IcOrientation, IcBrandForeground, IcThemeMode } from "../../utils/types";
+import { IcDividerLabelPlacement, IcDividerStyles, IcDividerWeights } from "./ic-divider.types";
 export declare class Divider {
-    foregroundColor: IcThemeForeground;
-    themeChangeHandler(ev: CustomEvent): void;
+    el: HTMLIcDividerElement;
+    foregroundColor: IcBrandForeground;
+    /**
+     * The line style of the divider.
+     */
+    borderStyle?: IcDividerStyles;
+    /**
+     * The label for the divider. The label placement will need to be set for the label to be displayed correctly.
+     */
+    label?: string;
+    /**
+     * The position the label is placed on the divider. `Left` and `right` placement is only applicable when orientation is set to `horizontal`. `Top` and `bottom` placement is only applicable when orientation is set to `vertical`. `Center` placement is applicable for both orientations.
+     */
+    labelPlacement?: IcDividerLabelPlacement;
+    /** If `true`, the divider will be displayed in a grey colour. */
+    monochrome?: boolean;
+    /**
+     * The orientation of the divider.
+     */
+    orientation?: IcOrientation;
+    /**
+     * 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 | IcBrandForeground;
+    /**
+     * The thickness of the divider.
+     */
+    weight?: IcDividerWeights;
+    brandChangeHandler(ev: CustomEvent<IcBrand>): void;
+    private updateMonochromeState;
+    componentWillRender(): void;
     render(): any;
 }

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

@@ -0,0 +1,3 @@
+export type IcDividerStyles = "solid" | "dashed";
+export type IcDividerWeights = "thin" | "medium" | "thick" | "very-thick";
+export type IcDividerLabelPlacement = "left" | "center" | "right" | "top" | "bottom";

package/dist/types/components/ic-empty-state/ic-empty-state.d.ts

@@ -1,5 +1,5 @@
 import { IcEmptyStateAlignment } from "./ic-empty-state.types";
-import { IcSizes } from "../../utils/types";
+import { IcSizes, IcThemeMode } from "../../utils/types";
 /**
  * @slot image - Content is placed at the top above all other content.
  * @slot actions - Content is placed at the bottom below all other content.
@@ -34,8 +34,11 @@ export declare class EmptyState {
      * The subtitle rendered in the empty state container.
      */
     subheading?: string;
+    /**
+     * 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;
     disconnectedCallback(): void;
     componentDidLoad(): void;
-    private hostMutationCallback;
     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.
@@ -8,11 +8,12 @@ import { IcFooterBreakpoints } from "./ic-footer.types";
  * @slot caption - Content will be rendered above Crown Copyright.
  */
 export declare class Footer {
-    private footerEl;
+    private footerEl?;
     private resizeObserver;
+    private hostMutationObserver;
     el: HTMLIcFooterElement;
     deviceSize: number;
-    foregroundColor: IcThemeForeground;
+    foregroundColor: IcBrandForeground;
     /**
      * The alignment of the section containers used within the footer.
      */
@@ -24,15 +25,15 @@ export declare class Footer {
     /**
      * The caption displayed at the bottom of the footer.
      */
-    caption: string;
+    caption?: string;
     /**
      * If `true`, the footer will display the crown copyright at the bottom.
      */
-    copyright: boolean;
+    copyright?: boolean;
     /**
      * The description displayed at the top of the footer.
      */
-    description: string;
+    description?: string;
     /**
      * If `true`, the footer will be set up to handle link groups instead of standalone links.
      */
@@ -44,7 +45,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,8 +1,9 @@
+import { IcBrand, IcBrandForeground, IcBrandForegroundNoDefault } from "../../utils/types";
 export declare class FooterLinkGroup {
     el: HTMLIcFooterLinkGroupElement;
     expanded: boolean;
     deviceSize: number;
-    dropdownIconStyle: import("../../utils/types").IcThemeForeground;
+    dropdownIconStyle: IcBrandForegroundNoDefault | IcBrandForeground;
     small: boolean;
     /**
      * The title of the link group to be displayed.
@@ -11,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;