@ukic/web-components 2.0.0-alpha.124 → 2.0.0

package/dist/esm/types-dd515332.js

@@ -0,0 +1,16 @@
+var IcInformationStatus;
+(function (IcInformationStatus) {
+  IcInformationStatus["Warning"] = "warning";
+  IcInformationStatus["Error"] = "error";
+  IcInformationStatus["Success"] = "success";
+})(IcInformationStatus || (IcInformationStatus = {}));
+var IcThemeForegroundEnum;
+(function (IcThemeForegroundEnum) {
+  IcThemeForegroundEnum["Default"] = "default";
+  IcThemeForegroundEnum["Dark"] = "dark";
+  IcThemeForegroundEnum["Light"] = "light";
+})(IcThemeForegroundEnum || (IcThemeForegroundEnum = {}));
+
+export { IcThemeForegroundEnum as I, IcInformationStatus as a };
+
+//# sourceMappingURL=types-dd515332.js.map

package/dist/esm/types-dd515332.js.map

@@ -0,0 +1 @@
+{"file":"types-dd515332.js","mappings":"IAAY;AAAZ,WAAY,mBAAmB;EAC7B,0CAAmB,CAAA;EACnB,sCAAe,CAAA;EACf,0CAAmB,CAAA;AACrB,CAAC,EAJW,mBAAmB,KAAnB,mBAAmB,QAI9B;IAkEW;AAAZ,WAAY,qBAAqB;EAC/B,4CAAmB,CAAA;EACnB,sCAAa,CAAA;EACb,wCAAe,CAAA;AACjB,CAAC,EAJW,qBAAqB,KAArB,qBAAqB;;;;","names":[],"sources":["./src/utils/types.ts"],"sourcesContent":["export enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport interface IcValueEventDetail {\n  value: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"],"version":3}

package/dist/types/components/ic-breadcrumb-group/ic-breadcrumb-group-test-examples.d.ts

@@ -0,0 +1,2 @@
+export declare const icBreadcrumbGroupCollapsed = "\n  <ic-breadcrumb-group collapsed=\"true\">\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 1\"\n    href=\"/breadcrumb-1\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 2\"\n    href=\"/breadcrumb-2\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    current=\"page\"\n    page-title=\"Breadcrumb 3\"\n    href=\"/breadcrumb-3\"\n  ></ic-breadcrumb>\n  </ic-breadcrumb-group>\n";
+export declare const icBreadcrumbGroupBack = "\n  <ic-breadcrumb-group back-breadcrumb-only=\"true\">\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 1\"\n    href=\"/breadcrumb-1\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    page-title=\"Breadcrumb 2\"\n    href=\"/breadcrumb-2\"\n  ></ic-breadcrumb>\n  <ic-breadcrumb\n    current=\"page\"\n    page-title=\"Breadcrumb 3\"\n    href=\"/breadcrumb-3\"\n  ></ic-breadcrumb>\n  </ic-breadcrumb-group>\n";

package/dist/types/components/{ic-breadcrumbs/ic-breadcrumbs.d.ts → ic-breadcrumb-group/ic-breadcrumb-group.d.ts}

@@ -1,5 +1,5 @@
-export declare class Breadcrumbs {
-  el: HTMLIcBreadcrumbsElement;
+export declare class BreadcrumbGroup {
+  el: HTMLIcBreadcrumbGroupElement;
   /**
    * If true, display the parent page and back icon as breadcrumb
    */

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

@@ -14,10 +14,6 @@ export declare class Button {
    * Determines whether the button should be in loading state.
    */
   loading?: boolean;
-  /**
-   * Determines whether the icon should appear on the right hand side of the button.
-   */
-  iconRight?: boolean;
   /**
    * The type of the button.
    */
@@ -59,17 +55,17 @@ export declare class Button {
    */
   fullWidth?: boolean;
   /**
-   * Show an ic-tooltip displaying title or aria-label. Will always be shown for icon variant, so title or aria-label must be set.
+   * Disable ic-tooltip which is shown for icon variant. Title or aria-label must be set if this prop is not applied.
    */
-  withIcTooltip?: boolean;
+  disableTooltip?: boolean;
   /**
    * The position of the tooltip in relation to the button.
    */
-  IcTooltipPlacement?: IcButtonTooltipPlacement;
+  tooltipPlacement?: IcButtonTooltipPlacement;
   /**
-   * Determines the style of button to be displayed.
+   * Determines the whether the appearance of the button is dark, light, or the default.
    */
-  buttonStyle?: IcThemeForeground;
+  appearance?: IcThemeForeground;
   /**
    * Emitted when button has focus
    */
@@ -78,7 +74,6 @@ export declare class Button {
    * Emitted when button has blur
    */
   icBlur: EventEmitter<void>;
-  iconRightState: boolean;
   private calculatedWidth;
   private inheritedAttributes;
   private buttonEl;
@@ -86,7 +81,6 @@ export declare class Button {
   private buttonIdNum;
   private tooltipEl;
   private id;
-  setIconRightState(): void;
   calculateWidth(): void;
   handleHostClick(event: Event): void;
   themeChangeHandler(ev: CustomEvent): void;

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

@@ -1,5 +1,4 @@
 export declare type IcButtonTypes = "reset" | "submit" | "button";
 export declare type IcButtonVariants = "primary" | "secondary" | "tertiary" | "icon" | "destructive";
-export declare type IcButtonSizes = "default" | "emphasis" | "dense";
-export declare type IcButtonStyles = "default" | "dark" | "light";
+export declare type IcButtonSizes = "default" | "large" | "small";
 export declare type IcButtonTooltipPlacement = "top" | "right" | "bottom" | "left";

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

@@ -28,9 +28,9 @@ export declare class CheckboxGroup {
    */
   helperText: string;
   /**
-   * Specify whether dense styling to be applied to element.
+   * Specify whether small styling to be applied to element.
    */
-  dense: boolean;
+  small: boolean;
   /**
    * Provide validation status - 'error'
    */

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

@@ -5,8 +5,8 @@ export declare class DataEntity {
    */
   heading: string;
   /**
-   * Set the data heading and all child data rows to dense styling
+   * Set the data heading and all child data rows to small styling
    */
-  dense: boolean;
+  small: boolean;
   render(): any;
 }

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

@@ -14,9 +14,9 @@ export declare class DataRow {
    */
   value: string;
   /**
-   * Set the row to dense styling, this is automatically applied if dense is set on the parent data heading
+   * Set the row to small styling, this is automatically applied if small is set on the parent data heading
    */
-  dense: boolean;
+  small: boolean;
   deviceSize: number;
   entitySize: "xl" | "m" | "xs";
   private resizeObserver;

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

@@ -22,7 +22,7 @@ export declare class Footer {
    */
   aligned?: IcAlignment;
   /**
-   * Sets the screen size breakpoint at which to switch to the dense layout
+   * Sets the screen size breakpoint at which to switch to the small layout
    */
   breakpoint?: IcFooterBreakpoints;
   /**
@@ -39,7 +39,7 @@ export declare class Footer {
   copyright: boolean;
   deviceSize: number;
   foregroundColor: IcThemeForeground;
-  private isDense;
+  private isSmall;
   themeChangeHandler(ev: CustomEvent): void;
   private resizeObserver;
   private footerEl;

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

@@ -1 +1 @@
-export declare type IcFooterBreakpoints = "XS" | "S" | "M" | "L" | "XL";
+export declare type IcFooterBreakpoints = "extra small" | "small" | "medium" | "large" | "extra large";

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

@@ -1,6 +1,6 @@
 import { IcThemeForeground } from "../../utils/types";
 declare type FooterConfig = {
-  dense: boolean;
+  small: boolean;
   grouped: boolean;
 };
 export declare class FooterLink {

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

@@ -4,11 +4,11 @@ export declare class FooterLinkGroup {
    * Sets the title of the link group for display
    */
   groupTitle: string;
-  dense: boolean;
+  small: boolean;
   expanded: boolean;
   dropdownIconStyle: import("../../utils/types").IcThemeForeground;
   deviceSize: number;
-  private isDense;
+  private isSmall;
   private handleKeydown;
   private toggleExpanded;
   footerResizeHandler(): void;

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

@@ -4,7 +4,7 @@ import { IcHeroContentAlignments } from "./ic-hero.types";
  * @slot heading - Content will be rendered in the title area, in place of the heading.
  * @slot subheading - Content will be rendered in the title area, in place of the subheading.
  * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.
- * @slot right-content - Content will be rendered in the right content area.
+ * @slot secondary - Content will be rendered in the secondary content area.
  */
 export declare class Hero {
   el: HTMLIcHeroElement;
@@ -41,9 +41,9 @@ export declare class Hero {
    */
   contentAligned: IcHeroContentAlignments;
   /**
-   * Alter styling for use with dense content/pages
+   * Alter styling for use with small content/pages
    */
-  dense: boolean;
+  small: boolean;
   rightContent: boolean;
   scrollFactor: string;
   leftContentFullWidth: boolean;

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

@@ -16,9 +16,9 @@ export declare class InputComponentContainer {
    */
   validationStatus: IcInformationStatusOrEmpty;
   /**
-   * dense
+   * small
    */
-  dense: boolean;
+  small: boolean;
   /**
    * multiLine
    */

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

@@ -32,9 +32,9 @@ export declare class Link {
    */
   showIcon?: boolean;
   /**
-   * Determines which colour variant is to be applied, to have appropriate colour contrast.
+   * Determines the whether the appearance is dark, light, or the default.
    */
-  variant?: IcThemeForeground;
+  appearance?: IcThemeForeground;
   themeChangeHandler(ev: CustomEvent): void;
   private updateTheme;
   componentWillLoad(): void;

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.d.ts

@@ -1,4 +1,5 @@
-import { IcLoadingSizes, IcLoadingTypes, IcLoadingVariants } from "./ic-loading-indicator.types";
+import { IcLoadingSizes, IcLoadingTypes } from "./ic-loading-indicator.types";
+import { IcThemeForegroundNoDefault } from "../../utils/types";
 export declare class LoadingIndicator {
   host: HTMLIcLoadingIndicatorElement;
   /**
@@ -38,13 +39,13 @@ export declare class LoadingIndicator {
    */
   type?: IcLoadingTypes;
   /**
-   * The variant of indicator, either default or full-width.
+   * When linear, determines whether the full-width version (i.e. without a border radius) should be displayed.
    */
-  variant?: IcLoadingVariants;
+  fullWidth?: boolean;
   /**
-   * Determines whether the dark variant of the loading indicator should be displayed.
+   * Determines whether the dark or light loading indicator should be displayed.
    */
-  dark?: boolean;
+  appearance?: IcThemeForegroundNoDefault;
   indicatorLabel: string;
   indeterminate: boolean;
   showSecond: boolean;

package/dist/types/components/ic-loading-indicator/ic-loading-indicator.types.d.ts

@@ -1,3 +1,2 @@
 export declare type IcLoadingSizes = "default" | "small" | "large" | "icon";
 export declare type IcLoadingTypes = "circular" | "linear";
-export declare type IcLoadingVariants = "default" | "full-width";

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

@@ -12,9 +12,9 @@ export declare class Menu {
    */
   options: IcMenuOption[];
   /**
-   * Specify whether dense styling is to be applied to the element.
+   * Specify whether small styling is to be applied to the element.
    */
-  dense?: boolean;
+  small?: boolean;
   /**
    * Id of the menu.
    */
@@ -56,6 +56,7 @@ export declare class Menu {
   focusFromSearchKeypress: boolean;
   initialOptionsListRender: boolean;
   preventIncorrectTabOrder: boolean;
+  watchOptionsHandler(): void;
   /**
    * Emitted when an option is selected.
    */
@@ -106,6 +107,7 @@ export declare class Menu {
   private getSortedOptions;
   private isManualMode;
   private scrollToSelected;
+  private loadUngroupedOptions;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;

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

@@ -1,6 +1,7 @@
 export interface IcOptionSelectEventDetail {
   value: string;
   label?: string;
+  optionId?: string;
 }
 export interface IcMenuChangeEventDetail {
   open: boolean;

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

@@ -37,7 +37,7 @@ export declare class NavigationButton {
    *  display mode
    */
   mode: IcNavButtonModes;
-  initialButtonStyle: IcThemeForeground;
+  initialAppearance: IcThemeForeground;
   private buttonEl;
   private inheritedAttributes;
   navBarMenuOpenHandler(): void;

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

@@ -24,9 +24,9 @@ export declare class PageHeader {
    */
   aligned?: IcAlignment;
   /**
-   * Whether the component uses dense styling.
+   * Whether the component uses small styling.
    */
-  dense?: boolean;
+  small?: boolean;
   /**
    * Set whether the bottom border is used
    */

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

@@ -29,9 +29,9 @@ export declare class RadioGroup {
    */
   helperText: string;
   /**
-   * Specify whether dense styling is to be applied to the element.
+   * Specify whether small styling is to be applied to the element.
    */
-  dense: boolean;
+  small: boolean;
   /**
    * Provide validation status - 'error'
    */

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

@@ -54,9 +54,9 @@ export declare class SearchBar {
    */
   helperText?: string;
   /**
-   * Specify whether dense styling is to be applied to the element.
+   * Specify whether small styling is to be applied to the element.
    */
-  dense?: boolean;
+  small?: boolean;
   /**
    * Value of Search input.
    */
@@ -100,10 +100,6 @@ export declare class SearchBar {
    * Specify whether the input should be focussed when component loaded.
    */
   focusOnLoad?: boolean;
-  /**
-   * Determines whether the dark variant of the search bar should be displayed.
-   */
-  dark?: boolean;
   /**
    * Provide hint text for hidden assistive description element.
    */

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

@@ -1,14 +1,17 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcInformationStatusOrEmpty, IcMenuOption } from "../../utils/types";
+import { IcInformationStatusOrEmpty, IcMenuOption, IcSearchMatchPositions } from "../../utils/types";
 import { IcValueEventDetail } from "../../interface";
 export declare class Select {
   private nativeSelectElement;
   private customSelectElement;
+  private searchableSelectElement;
   private menu;
   private anchorEl;
+  private clearButton;
   private inputId;
   private menuId;
   private inheritedAttributes;
+  private debounce;
   /**
    * Provide a label for the input.
    */
@@ -42,9 +45,9 @@ export declare class Select {
    */
   helperText?: string;
   /**
-   * Specify whether dense styling is to be applied to the element.
+   * Specify whether small styling is to be applied to the element.
    */
-  dense?: boolean;
+  small?: boolean;
   /**
    * If true, then fill width of container.
    */
@@ -66,11 +69,40 @@ export declare class Select {
    */
   name?: string;
   /**
-   * Display a button which clears the input when clicked.
+   * Display a button which clears the input when clicked. The button will always appear on the searchable select.
    */
   showClearButton?: boolean;
+  /**
+   * If true, the select can be typed in to filter options.
+   */
+  searchable?: boolean;
+  /**
+   * If true, descriptions of options are 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.
+   */
+  includeGroupTitlesInSearch?: boolean;
+  /**
+   * Whether the search string of the searchable select should match the start of or anywhere in the options.
+   */
+  searchMatchPosition?: IcSearchMatchPositions;
+  /**
+   * Number of characters until suggestions appear for a searchable select.
+   */
+  charactersUntilSuggestions?: number;
+  /**
+   * Provide text for empty results list
+   */
+  emptyOptionListText: string;
   open: boolean;
   clearButtonFocused: boolean;
+  searchableSelectInputValue: string;
+  filteredOptions: IcMenuOption[];
+  ariaActiveDescendant: string;
+  noOptions: IcMenuOption[];
+  watchOptionsHandler(): void;
   /**
    * Emitted when a value is selected.
    */
@@ -88,17 +120,27 @@ export declare class Select {
    * Sets focus on the input box.
    */
   setFocus(): Promise<void>;
+  private isMenuEnabled;
+  private setOptionsValuesFromLabels;
   private setTextColor;
+  private setMenuChange;
   private getLabelFromValue;
+  private getValueFromLabel;
+  private getFilteredChildMenuOptions;
   private handleNativeSelectChange;
   private handleCustomSelectChange;
   private handleMenuChange;
+  private handleFocusIndicatorDisplay;
   private handleMouseDown;
   private handleClick;
+  private handleExpandIconMouseDown;
   private handleClear;
   private handleKeyDown;
   private handleClearButtonFocus;
   private handleClearButtonBlur;
+  private handleSearchableSelectInput;
+  private updateSearchableSelectResultAriaLive;
+  private debounceAriaLiveUpdate;
   private onFocus;
   private onBlur;
   componentWillLoad(): void;

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

@@ -6,9 +6,9 @@ export declare class Skeleton {
    */
   variant?: IcSkeletonVariants;
   /**
-   * Set the skeleton to the dark variant
+   * Set the skeleton to the light variant
    */
-  dark?: boolean;
+  light?: boolean;
   hasChild: boolean;
   default: boolean;
   heightOnly: boolean;

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

@@ -1 +1 @@
-export declare type IcSkeletonVariants = "rectangular" | "text" | "circular";
+export declare type IcSkeletonVariants = "rectangle" | "text" | "circle";

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

@@ -1,4 +1,4 @@
-import { IcStatusTagStatuses, IcStatusTagVariants } from "./ic-status-tag.types";
+import { IcStatusTagStatuses, IcStatusTagAppearance } from "./ic-status-tag.types";
 export declare class StatusTag {
   /**
    * The content rendered within the status tag.
@@ -11,11 +11,11 @@ export declare class StatusTag {
   /**
    * The emphasis of the status tag.
    */
-  variant?: IcStatusTagVariants;
+  appearance?: IcStatusTagAppearance;
   /**
    * The size of the status tag.
    */
-  dense?: boolean;
+  small?: boolean;
   componentDidLoad(): void;
   render(): any;
 }

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

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

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

@@ -23,9 +23,9 @@ export declare class Switch {
    */
   checked?: boolean | null;
   /**
-   * If true, the component reduces in size to the dense state.
+   * If true, the component reduces in size to the small state.
    */
-  dense?: boolean;
+  small?: boolean;
   /**
    * If true, the component is not interactive.
    */

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from "../../stencil-public-runtime";
 import { IcTabClickEventDetail } from "./ic-tab.types";
+import { IcThemeForegroundNoDefault } from "../../utils/types";
 /**
  * @slot icon - Content will be rendered next to the tab label.
  */
@@ -17,8 +18,8 @@ export declare class Tab {
   tabId?: string;
   /** @internal The position of the tab inside the tabs array in context. */
   tabPosition: number;
-  /** @internal Determines whether the dark variant of the tabs should be displayed. */
-  dark?: boolean;
+  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  appearance?: IcThemeForegroundNoDefault;
   /**
    * Called when a tab is selected.
    */

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from "../../stencil-public-runtime";
-import { IcActivationTypes } from "../../utils/types";
+import { IcActivationTypes, IcThemeForegroundNoDefault } from "../../utils/types";
 import { IcTabClickEventDetail, IcTabSelectEventDetail } from "../ic-tab/ic-tab.types";
 export declare class TabContext {
   host: HTMLIcTabContextElement;
@@ -16,9 +16,9 @@ export declare class TabContext {
    */
   selectedTabIndex?: number;
   /**
-   * Determines whether the dark variant of the tabs should be displayed.
+   * Determines whether the light or dark variant of the tabs should be displayed.
    */
-  dark?: boolean;
+  appearance?: IcThemeForegroundNoDefault;
   selectedTab: number | null;
   updateSelectedTab(newValue: number): void;
   /**
@@ -30,7 +30,7 @@ export declare class TabContext {
   private tabs;
   private enabledTabs;
   private tabPanels;
-  private tabList;
+  private tabGroup;
   private focusedTabIndex;
   private linkTabs;
   private getChildren;

package/dist/types/components/{ic-tab-list/ic-tab-list.d.ts → ic-tab-group/ic-tab-group.d.ts}

@@ -1,6 +1,7 @@
 import { IcTabClickEventDetail } from "../ic-tab/ic-tab.types";
-export declare class TabList {
-  host: HTMLIcTabListElement;
+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.
    */
@@ -13,14 +14,14 @@ export declare class TabList {
    * Provide a label to describe the purpose of the set of tabs to screen reader users.
    */
   label: string;
-  /** @internal Determines whether the dark variant of the tabs should be displayed. */
-  dark?: boolean;
+  /** @internal Determines whether the light or dark variant of the tabs should be displayed. */
+  appearance?: IcThemeForegroundNoDefault;
   firstTabVisible: boolean;
   lastTabVisible: boolean;
   tabOverflow: boolean;
   private tabs;
   private tabOffsets;
-  private tabListEl;
+  private tabGroupEl;
   private splitterEl;
   private resizeObserver;
   private isScrolling;

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

@@ -59,9 +59,9 @@ export declare class TextField {
    */
   resize: boolean;
   /**
-   * Specify whether dense styling is to be applied to the element.
+   * Specify whether small styling is to be applied to the element.
    */
-  dense: boolean;
+  small: boolean;
   /**
    * Value of TextField.
    */
@@ -103,10 +103,6 @@ export declare class TextField {
    * Set the amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
    */
   debounce: number;
-  /**
-   * Determines whether the dark variant of the text field should be displayed.
-   */
-  dark?: boolean;
   private showLeftIcon;
   private debounceChanged;
   /**

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

@@ -2,9 +2,9 @@ import { IcTooltipPlacements } from "./ic-tooltip.types";
 export declare class Tooltip {
   el: HTMLIcTooltipElement;
   /**
-   * The id of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
+   * The ID of the element the tooltip is describing - for when aria-labelledby or aria-describedby is used.
    */
-  elementId?: string;
+  target?: string;
   /**
    * The position of the tool-tip in relation to the parent element.
    */

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

@@ -6,8 +6,8 @@ export declare class Typography {
    */
   variant?: IcTypographyVariants;
   /**
-   * Adds margin to the bottom of the typography relative to the font-size.
+   * Adds appropriate margins to the top and bottom of the typography.
    */
-  spacing?: boolean;
+  applyVerticalMargins?: boolean;
   render(): any;
 }