@nanoporetech-digital/components 1.15.6 → 2.0.0

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

@@ -76,5 +76,6 @@ export declare class CheckboxGroup implements ComponentInterface {
   componentWillLoad(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
+  componentDidLoad(): void;
   render(): any;
 }

package/dist/types/components/datalist/datalist.d.ts

@@ -0,0 +1,98 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+import type { Dropdown } from '../dropdown/dropdown';
+import type { OptionInterface } from '../../interface';
+/**
+ * `nano-datalist` a visually consistent and more flexible replacement for a native
+ * [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`
+ * or linked to any input control via the `input` prop. Is used internally within `nano-select`.
+ * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop
+ *
+ * @slot - use `<nano-option>` elements for more complex html. Alternatively use the `options` prop
+ * @slot list-top - shows at the top of the list when there are options present
+ * @slot list-bottom - shows at the bottom of the list when there are options present
+ * @slot no-result - shown when there are no results otherwise nothing will be shown
+ */
+export declare class DataList implements ComponentInterface {
+  private isNanoInput;
+  private typeToSelect;
+  private typeToSelectTimeout;
+  private optionEles;
+  private nanoDropdown;
+  private listBox;
+  private mo?;
+  private listId;
+  private isFiltered;
+  private get allOptEles();
+  private set allOptEles(value);
+  private _allOptEles;
+  host: HTMLNanoDatalistElement;
+  actvOptEles: HTMLNanoOptionElement[];
+  connectedInput: HTMLInputElement | HTMLTextAreaElement;
+  inputLabel: HTMLLabelElement;
+  hasNoResult: boolean;
+  shouldOpen: boolean;
+  canOpen: boolean;
+  optionIds: string[];
+  constructor();
+  /** By default, items in the list will appear 'selected' when the value in the linked input control matches.
+   * However you can add other selected options via the the selected prop. */
+  selected: string[];
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  get dropDownConfig(): Partial<Dropdown>;
+  set dropDownConfig(ddc: Partial<Dropdown>);
+  private _dropDownConfig;
+  /** Provide an option list.
+   * Options can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop */
+  options?: OptionInterface[];
+  /** A selector to a HTMLInputElement */
+  input?: string | HTMLInputElement;
+  /** Tweaks the datalist behaviour and linked control semantics and behaviour.
+   * e.g. 'select' will make the linked input control readonly.
+   */
+  type: 'select' | 'selctMulti' | 'input';
+  /** return all the active options currently within the datalist. Can be useful for validation */
+  get activeOptions(): HTMLNanoOptionElement[];
+  /** Force datalist open */
+  open: boolean;
+  openWatcher(): void;
+  /** Use this option to disable to default filtering. This is useful if filtering happens
+   * externally via another method (e.g. via ajax)
+   */
+  disableFilter: boolean;
+  /** Activate / deactivate the datalist control */
+  disabled: boolean;
+  watchInputChange(): Promise<void>;
+  manageSlotChangeListener(): void;
+  watchTypeChange(): void;
+  manageInputEvents(newInput?: HTMLInputElement, oldInput?: HTMLInputElement): void;
+  watchActvOptChange(): void;
+  manageCanOpen(): void;
+  /**
+   * Opens the dropdown if it can, it should and there are items to display.
+   */
+  manageDropdownDisplay(): void;
+  fireActiveOptsEvent(): void;
+  /** Fired when an item is selected. */
+  nanoSelect: EventEmitter<HTMLNanoOptionElement>;
+  /** Fired when a currently selected item is reselected. */
+  nanoDeselect: EventEmitter<HTMLNanoOptionElement>;
+  /** Fired when active options change */
+  nanoOptionsUpdated: EventEmitter<HTMLNanoOptionElement[]>;
+  private isSelected;
+  private get dropwdownOpen();
+  private get exactMatch();
+  /** reflect value back to the connected input unless the event is cancelled */
+  private changeInputValue;
+  private optSelected;
+  private setOptStartsWith;
+  private processSlottedContent;
+  private handleShow;
+  private inputChange;
+  private inputClick;
+  private inputKeydown;
+  private optionKeyDown;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/date-input/date-input.d.ts

@@ -6,6 +6,8 @@ import { DateInputChangeEventDetail, Color, LocalDateOpts, DuetLocalizedText, Co
  *
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
+ * @slot start - input start slot
+ * @slot end - input end slot
  */
 export declare class DateInput implements ComponentInterface {
   private pickerEle;

package/dist/types/components/dialog/dialog.helpers.d.ts

@@ -11,9 +11,9 @@ interface ImperativeDialogOptions {
  * @param dialogOptions - { noUserDismiss: boolean, noHeader?: boolean, noFooter?: boolean, label: string }
  * @returns `Promise<void>`
  */
-export declare function nanoCreateDialog(body: string, buttons: {
+export declare function nanoCreateDialog(body: string, buttons?: {
   classes: string;
   content: string;
   handler: () => {};
-}[], dialogOptions: ImperativeDialogOptions): HTMLNanoDialogElement;
+}[], dialogOptions?: ImperativeDialogOptions): HTMLNanoDialogElement;
 export {};

package/dist/types/components/dropdown/dropdown.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
 /**
  * Dropdowns show additional content in a panel.
- * Designed to work well with nano-menu components to provide a list of options (works well with nano-nav-items).
+ * Designed to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).
  * @slot trigger - The dropdown's trigger.
  * @slot - The dropdown's content.
  */
@@ -13,7 +13,9 @@ export declare class Dropdown implements ComponentInterface {
   private popover;
   private trigger;
   private positioner;
-  private menuFocused;
+  private accessibleTrigger;
+  private didLoad;
+  private get menu();
   host: HTMLNanoDropdownElement;
   /** Determines if the dropdown should open automatically when the trigger is clicked */
   autoOpen: boolean;
@@ -73,7 +75,6 @@ export declare class Dropdown implements ComponentInterface {
    * Emitted after the dropdown closes and all transitions are complete.
    */
   nanoAfterHide: EventEmitter;
-  menuFocus(ev: CustomEvent): void;
   secondaryOpen(ev: CustomEvent): void;
   secondaryClose(ev: CustomEvent): void;
   handlePanelSelect(event: CustomEvent): void;
@@ -81,7 +82,10 @@ export declare class Dropdown implements ComponentInterface {
   show(): Promise<void>;
   /** Hides the dropdown panel */
   hide(): Promise<void>;
-  private getMenu;
+  /** Decides if the current active element or element
+   * connected to the current event is connected to the Dropdown
+   */
+  private focusEleInDropDwn;
   private togglePanel;
   private updateAccessibleTrigger;
   private handleDocumentKeyDown;

package/dist/types/components/form-control/form-control.d.ts

@@ -0,0 +1,35 @@
+import { FunctionalComponent, VNode } from '../../stencil-public-runtime';
+import { TextFieldTypes } from '../../interface';
+interface FormControlWrapProps {
+  rtl: boolean;
+  floatLabel: boolean;
+  labelId: string;
+  label: string;
+  moreId: string;
+  type?: TextFieldTypes;
+  showInlineError: boolean;
+  hasHelperSlot: boolean;
+  errorMessage: string;
+  controlId: string;
+  hasLabelSlot: boolean;
+  hideLabel: boolean;
+  placeholder: string;
+  hasValue: boolean;
+  showCharCount?: boolean;
+  maxlength?: number;
+  charCount?: number;
+}
+interface FormControlProps {
+  clearControl: boolean;
+  onClearText?: () => void;
+  readonly: boolean;
+  disabled: boolean;
+  control: HTMLNanoInputElement | HTMLNanoSelectElement;
+  ref?: (elm?: HTMLElement) => void;
+  endSlot?: VNode;
+  endValueSlot?: VNode;
+  startSlot?: VNode;
+}
+export declare const FormControlWrap: FunctionalComponent<FormControlWrapProps>;
+export declare const FormControl: FunctionalComponent<FormControlProps>;
+export {};

package/dist/types/components/global-search-results/global-search-results.d.ts

@@ -35,6 +35,7 @@ export declare class GlobalSearchResults implements ComponentInterface {
   attachResultListeners(e?: CustomEvent & {
     target: HTMLElement;
   }): void;
+  private tagClick;
   private changeOrder;
   private goback;
   private removeFilter;

package/dist/types/components/grid/grid.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * A context-aware CSS grid implementation.
  * Uses it's own width to choose column number - not screen width.
@@ -9,6 +10,7 @@ export declare class Grid {
   private gridClass;
   private isSizes;
   private currentWidth;
+  constructor();
   ready: boolean;
   isSmall: boolean;
   isMedium: boolean;
@@ -63,10 +65,14 @@ export declare class Grid {
    * Helper to make grid items expand to full height in IE11
    */
   fullHeight: boolean;
+  /**
+   * Emitted when the `nano-grid` changes breakpoint
+   */
+  nanoBpChange: EventEmitter<string[]>;
   propChanged(): void;
   private applySizeClasses;
+  stateChange(): void;
   private applyChildrenClasses;
-  connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;

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

@@ -17,6 +17,7 @@ export declare class Hero implements ComponentInterface {
   private mo?;
   private isLegacy;
   host: HTMLNanoHeroElement;
+  gridSizes: string[];
   hasIconBox: boolean;
   hasScrim: boolean;
   hasSecondaryContent: boolean;
@@ -41,6 +42,7 @@ export declare class Hero implements ComponentInterface {
   level: 'top' | 'sub';
   private slotChangeObserver;
   private processSlottedContent;
+  private handleGridChange;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;

package/dist/types/components/input/input.d.ts

@@ -4,25 +4,31 @@ import { Color, ControlValidity, ControlValidityEventDetail, InputChangeEventDet
  * The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input), but works great on desktop devices and integrates with the keyboard on mobile devices.
 
 It is meant for text type inputs only, such as "text", "password", "email", "number", "search", "tel", and "url". It supports all standard text input events including keyup, keydown, keypress, and more.
- * @slot inline-button - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot start - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot end - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
+ * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
  * @slot helper - helper text to accompany the form field underneath.
- * @slot legacy - you can use this slot to wrap any old inputs / labels. This will set appropriate defaults for the nano-input
+ * @slot - can be used with a `nano-datalist`. See the `nano-datalist` docs for more information
  */
 export declare class Input implements ComponentInterface {
   private nativeInput?;
   private inputId;
   private didBlurAfterEdit;
-  private errorContainer?;
   private rtl;
   private mo?;
   private charCount;
   private hasRendered;
+  private _nativeInputWrap;
+  private get nativeInputWrap();
+  private set nativeInputWrap(value);
   hasFocus: boolean;
-  isLegacy: boolean;
   hasLabelSlot: boolean;
-  hasButtonSlot: boolean;
   hasHelperSlot: boolean;
+  errorMessage: string;
+  datalist: HTMLNanoDatalistElement;
+  setDataListOpts(): void;
   el: HTMLNanoInputElement;
   /**
    * This will be true when the control is in an invalid state.
@@ -182,7 +188,7 @@ export declare class Input implements ComponentInterface {
   /**
    * Emitted when a keyboard input occurred.
    */
-  nanoInput: EventEmitter<KeyboardEvent>;
+  nanoInput: EventEmitter<InputEvent>;
   /**
    * Emitted when the value has changed.
    */
@@ -230,12 +236,11 @@ export declare class Input implements ComponentInterface {
    */
   showError(message: string): Promise<void>;
   onReset(e: any): void;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
   private shouldClearOnEdit;
   private getValue;
   private validate;
   private onInput;
-  private handleDocumentMouseDown;
-  private handleDocumentKeyDown;
   private onBlur;
   private onFocus;
   private onKeydown;
@@ -248,6 +253,5 @@ export declare class Input implements ComponentInterface {
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  private renderLabel;
   render(): any;
 }

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

@@ -1,6 +1,9 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+declare type ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;
 /**
- * @slot - The menu's content, including menu items, menu dividers, and menu labels.
+ * Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.
+ * Manages focus state / active.
+ * @slot - The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more.
  */
 export declare class Menu {
   private ignoreMouseEvents;
@@ -9,25 +12,36 @@ export declare class Menu {
   private typeToSelect;
   private typeToSelectTimeout;
   private el;
+  /** get the focus state of the menu @readonly */
+  get hasFocus(): boolean;
+  private _hasFocus;
+  /** changes the role of the underlying control - sometimes required for semantics */
+  type: 'menu' | 'listbox';
+  /** an accessible label */
+  label: string;
   /** Emitted when the menu gains focus. */
   nanoFocus: EventEmitter;
   /** Emitted when the menu loses focus. */
   nanoBlur: EventEmitter;
   /** Emitted when a menu item is selected. */
-  nanoSelect: EventEmitter;
-  connectedCallback(): void;
+  nanoSelect: EventEmitter<HTMLNanoOptionElement | HTMLNanoNavItemElement>;
   /** Sets focus on the menu. */
   setFocus(): Promise<void>;
   /** Removes focus from the menu. */
   removeFocus(): Promise<void>;
-  private getItems;
-  private getActiveItem;
-  private setActiveItem;
-  private scrollItemIntoView;
+  /** Sets the current active item */
+  showActiveElement(): Promise<void>;
+  /** Removes any active item's state */
+  resetActiveItem(): Promise<void>;
+  get getItems(): ValidElement[];
+  get activeItem(): ValidElement;
+  get selectedItem(): ValidElement;
+  private setActiveFocusItem;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
   private handleFocus;
-  private handleBlur;
   private handleClick;
   private handleKeyDown;
   private handleMouseOver;
   render(): any;
 }
+export {};

package/dist/types/components/option/option-interface.d.ts

@@ -0,0 +1,7 @@
+export interface OptionInterface {
+  label?: string;
+  value?: string;
+  selected?: boolean;
+  disabled?: boolean;
+  filterMeta?: string;
+}

package/dist/types/components/option/option.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { OptionInterface } from '../../interface';
+/**
+ * Select options to be used with [nano-select](/story/nano-components-select) or [nano-datalist](/story/nano-components-select)
+ *
+ * @slot - main label. Defaults to `label` or `value` prop
+ * @slot checked-icon - icon to indicated checked / selected state. Defaults to fontawesome light/check
+ * @slot start - suitable for an icon or content displayed at the start of the main label
+ * @slot end - suitable for an icon or content displayed at the end of the main label
+ */
+export declare class Option implements OptionInterface {
+  private optId;
+  host: HTMLNanoOptionElement;
+  hasFocus: boolean;
+  constructor();
+  /**
+   * Value of the option
+   */
+  value: string;
+  valueChanged(): void;
+  /**
+   * Label of the option
+   */
+  label: string;
+  labelChanged(): void;
+  /**
+   * Whether this option is selected
+   */
+  selected: boolean;
+  /**
+   * Whether this option should be disabled
+   */
+  disabled: boolean;
+  /** You can add extra meta for this option. When displayed in a list, users
+   * search / filter via extra related terms. Another usecase is 'endonyms'
+   */
+  filterMeta: string;
+  /** Fired when an option is selected */
+  nanoSelect: EventEmitter<HTMLNanoOptionElement>;
+  handleKeyDown(e: KeyboardEvent): void;
+  private handleClick;
+  private get labelContent();
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -1,46 +1,52 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { Color, SelectChangeEventDetail, InputChangeEventDetail, ControlValidityEventDetail, ControlValidity } from '../../interface';
+import type { Dropdown } from '../dropdown/dropdown';
+import { OptionInterface } from '../option/option-interface';
 /**
  * The select component is a wrapper to the HTML select element with custom styling and additional functionality.
  * It accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).
  * It's multi selection functionality is vastly improved from the native solution. It allows for the control of
  * value order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.
  *
+ * @slot start - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot end - suitable for inline action buttons or icons that may add extra contextual information
+ * @slot value-start - similar to 'start', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
+ * @slot value-end - similar to 'end', however clicking elements using this slot will activate the input control. This would be suitable to show a secodary 'value' for context or to show a dropdown arrow if using a datalist
  * @slot label - if you do not set a label attribute, you can use this slot for more complex markup
- * @slot legacy - you can use this slot to wrap any old select / labels / options. This will set appropriate defaults for the nano-select
+ * @slot helper - helper text to accompany the form field underneath.
+ * @slot down-arrow - use this to replace the default down arrow
+ * @slot - default slot; nest `nano-option` elements
  */
 export declare class Select implements ComponentInterface {
   private nativeSelect?;
-  private multiInput?;
-  private multiList?;
-  private selectWrap?;
-  private listItems;
+  private inputCtrl?;
   private valueItems;
   private dragVal;
   private mo?;
-  private popover;
   private selectId;
   private rtl;
-  private currLiIndex;
-  private inputSearchVal;
-  private watchValue;
   private onInit;
+  private isLegacy;
+  private _selectWrap;
+  private get selectWrap();
+  private set selectWrap(value);
+  private _datalist;
+  private get datalist();
+  private set datalist(value);
   currInsertIndex: number;
-  availOpts: any[];
   showErrorMsg: boolean;
   errorMessage: string;
   hasFocus: boolean;
-  listOpen: boolean;
-  isLegacy: boolean;
   hasLabelSlot: boolean;
   hasHelperSlot: boolean;
-  hasIconSlot: boolean;
+  inputSearchVal: string;
   el: HTMLNanoSelectElement;
   /**
    * This will be true when the control is in an invalid state.
    * Validity is determined by the `required` prop. Or if custom validity message is set.
    */
-  invalid: boolean;
+  get invalid(): boolean;
+  private _invalid;
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@@ -63,7 +69,7 @@ export declare class Select implements ComponentInterface {
    */
   showInlineError: boolean;
   /**
-   * String to place within a label element.
+   * String to place within a label element. Alternatively use the 'label' slot
    */
   label: string;
   /**
@@ -117,14 +123,19 @@ export declare class Select implements ComponentInterface {
   /**
    * The value of the select.
    */
-  value?: string | Array<string | null>;
+  get value(): string | string[];
+  set value(val: string | string[]);
+  private _value;
   /**
-   * You can set options via js. domElement.options = ['option 1', 'option 2'] or [{label: 'option 1', value: 'opt-1'}]
+   * You can set options via js as an array of strings: `domElement.options = ['option 1', 'option 2']` or
+   * objects `domElement.options = [{label: 'option 1', value: 'opt-1'}]`. See `nano-option` docs for all available properties.
+   * Alternatively, you can nest `<nano-option>` elements within a `<nano-select>`
+   * Regardless - reading `options` will return the current component options - slotted or otherwise
    */
-  options: Array<string | {
-    label: string;
-    value?: string;
-  }>;
+  get options(): Array<OptionInterface | string>;
+  set options(opts: Array<OptionInterface | string>);
+  private _options;
+  _eOptions: OptionInterface[];
   /**
    * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
    */
@@ -138,23 +149,15 @@ export declare class Select implements ComponentInterface {
    * Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.
    */
   debounce: number;
-  /**
-   * Whether to use native <select> elements. Setting to false will use a similar UI as multiple="true"
-   */
-  native: boolean;
   protected debounceChanged(): void;
   protected shouldValidate(): void;
   /**
    * Update the native select element when the value changes
    */
-  protected valueChanged(): void;
-  protected optionsChanged(): void;
-  /**
-   * Setup or rip down custom combobox when select is switched from mutliple
-   */
-  protected multiChange(): void;
-  private setupMulti;
-  listOpenChange(): void;
+  valueChanged(): void;
+  /** nano-dropdown config options you can pass to the nested dropdown component */
+  dropDownConfig?: Partial<Dropdown>;
+  setDataListOpts(): void;
   /**
    * Emitted when the value has changed.
    */
@@ -206,40 +209,31 @@ export declare class Select implements ComponentInterface {
    * To clear the error you will need to re-call this method with an empty string.
    */
   showError(message: string): Promise<void>;
-  private setAvailOpts;
-  private getNativeValue;
-  private setNativeValue;
+  private get valArray();
   private isValidValues;
   private customValidate;
   private showInlineValidation;
   private handleInvalid;
-  private openList;
-  private addValue;
+  private setValue;
   private removeValue;
-  private switchValue;
-  private isSelected;
-  private getLabel;
   private slotChangeObserver;
   private processSlottedContent;
-  private onChange;
+  private getLabel;
+  handleBlur(e: KeyboardEvent | MouseEvent): void;
+  private setOptions;
+  private handleDocumentKeyDown;
   private onBlur;
   private onFocus;
   private clearSelectValue;
   private onClick;
-  private onMultiInputBlur;
   private onDragStart;
   private onDragEnd;
   private onDragLeave;
   private onMultiInput;
-  private getActiveOpt;
-  private onOptFocus;
-  private onHostClick;
-  private handleDocumentMouseDown;
-  private handleDocumentKeyDown;
   connectedCallback(): void;
   disconnectedCallback(): void;
   componentDidLoad(): void;
   componentWillLoad(): void;
-  private renderLabel;
   render(): any;
+  private multipleValues;
 }

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

@@ -9,7 +9,7 @@ import { StorageMethods } from '../../utils/store/component-store';
  * Tab-content can also be swiped to change tabs.
  *
  * @slot tabs - Add `nano-tab` elements to add clickable tabs.
- * @slot tab-content-header = a header bar displayed above tab content.
+ * @slot tab-content-header - a header bar displayed above tab content.
  * @slot - Add `nano-tab-content` elements to add tabbable content.
  */
 export declare class TabGroup implements ComponentInterface {
@@ -54,6 +54,10 @@ export declare class TabGroup implements ComponentInterface {
    * Either session storage, url hash (after the '#') or url query (after the '?').
    */
   storeMethod: StorageMethods;
+  /**
+   * Disable 'swipe to change tab' on devices with touch
+   */
+  disableSwipe: boolean;
   handleTabNameChange(): void;
   handlePlacementChange(): void;
   handleNoScrollControlsChange(): void;
@@ -61,19 +65,35 @@ export declare class TabGroup implements ComponentInterface {
   hideLeftBtn(): void;
   watchScrollControls(): void;
   /** Emitted when a tab is shown. */
-  nanoTabShow: EventEmitter;
+  nanoTabShow: EventEmitter<{
+    name: string;
+  }>;
   /** Emitted when a tab is hidden. */
-  nanoTabHide: EventEmitter;
+  nanoTabHide: EventEmitter<{
+    name: string;
+  }>;
+  /** Emitted when the tab is closable and the close button is activated. */
+  nanoTabWillClose: EventEmitter<{
+    name: string;
+  }>;
+  /** Emitted when a closable tab is removed. */
+  nanoTabClose: EventEmitter<{
+    name: string;
+  }>;
   /** Shows the specified tab panel. */
   show(panel: string): Promise<void>;
-  private getAllTabs;
-  private getAllPanels;
-  private getActiveTab;
+  get getAllActiveTabs(): HTMLNanoTabElement[];
+  get getAllTabs(): HTMLNanoTabElement[];
+  get getAllPanels(): HTMLNanoTabContentElement[];
+  get getActiveTab(): HTMLNanoTabElement;
   private updateScrollControls;
   private setActiveTab;
   private setAriaLabels;
   private syncActiveTabIndicator;
   private getNavWidth;
+  handleTabClose(ev: CustomEvent & {
+    target: HTMLNanoTabElement;
+  }): void;
   private handleClick;
   private handleKeyDown;
   private handleTabScroll;