@six-group/ui-library 0.0.0-insider.a358260 → 0.0.0-insider.cd0cd0d

package/dist/types/components/six-file-list-item/six-file-list-item.d.ts

@@ -20,7 +20,7 @@ export declare class SixFileListItem {
   /** The date when the file was uploaded */
   date: string;
   /** The file size. This number will be divided by 1024 to show the filesize in KB */
-  size: number;
+  size?: number;
   /** Set to true if you don't want to allow to download this file */
   nodownload: boolean;
   /** Set to true if you don't want to allow to delete this file */
@@ -29,7 +29,7 @@ export declare class SixFileListItem {
   downloadEvent: EventEmitter<SixFileListDownloadPayload>;
   /** Triggered on file remove. */
   removeEvent: EventEmitter<SixFileListRemovePayload>;
-  downloadFile: () => void;
-  removeFile: () => void;
+  private downloadFile;
+  private removeFile;
   render(): any;
 }

package/dist/types/components/six-file-upload/six-file-upload.d.ts

@@ -16,33 +16,33 @@ export interface SixFileUploadFailurePayload {
  */
 export declare class SixFileUpload {
   readonly host: HTMLSixFileUploadElement;
-  fileInput: HTMLInputElement;
+  private fileInput?;
   isOver: boolean;
   /** Set to true if file control should be small. */
   readonly compact: boolean;
   /** Label of the drop area. */
-  readonly label: string;
+  readonly label?: string;
   /** Set when button is disabled. */
-  readonly disabled: boolean;
+  readonly disabled = false;
   /** Accepted MIME-Types. */
-  readonly accept: string;
+  readonly accept?: string;
   /** More than one file allowed. */
-  readonly multiple: boolean;
+  readonly multiple = false;
   /** Allowed max file size in bytes. */
-  readonly maxFileSize: number | undefined;
+  readonly maxFileSize?: number;
   /** Triggers when a file is added. */
-  readonly fileUploadSuccessEvent: EventEmitter<SixFileUploadSuccessPayload>;
+  success: EventEmitter<SixFileUploadSuccessPayload>;
   /** Triggers when an uploaded file doesn't match MIME type or max file size. */
-  readonly fileUploadFailureEvent: EventEmitter<SixFileUploadFailurePayload>;
+  failure: EventEmitter<SixFileUploadFailurePayload>;
   dragenterHandler(): void;
   dragoverHandler(): void;
   dragleaveHandler(): void;
   dropHandler({ dataTransfer }: DragEvent): void;
-  handleFiles: (files: FileList) => CustomEvent<SixFileUploadFailurePayload>;
+  private handleFiles;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  preventDefaults(e: Event): void;
-  onChange: () => void;
+  private preventDefaults;
+  private onChange;
   private renderLabel;
   render(): any;
 }

package/dist/types/components/six-group-label/six-group-label.d.ts

@@ -12,9 +12,9 @@
  * @part help-text - The help text of the wrapped component.
  */
 export declare class SixGroupLabel {
-  wrapperLabelId: string;
-  labelId: string;
-  helpTextId: string;
+  private wrapperLabelId;
+  private labelId;
+  private helpTextId;
   host: HTMLSixGroupLabelElement;
   hasHelpTextSlot: boolean;
   hasLabelSlot: boolean;
@@ -26,12 +26,12 @@ export declare class SixGroupLabel {
   helpText: string;
   /** Set to true to disable the label. */
   disabled: boolean;
-  /** The label's required attribute. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   handleLabelChange(): void;
   connectedCallback(): void;
   componentWillLoad(): void;
   disconnectedCallback(): void;
-  handleSlotChange(): void;
+  private handleSlotChange;
   render(): any;
 }

package/dist/types/components/six-header/six-header.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 import { EmptyPayload } from '../../utils/types';
 export interface SixHeaderAppSwitcherSelectPayload {
   selectedLabel: string;
@@ -17,16 +16,8 @@ export interface SixHeaderSearchFieldToggle {
 declare enum Section {
   None = 0,
   Search = 1,
-  Notifications = 2,
-  AppSwitcher = 3,
-  Profile = 4
-}
-declare enum Slot {
-  Search = "search-field",
-  Notifications = "notifications",
-  AppSwitcher = "app-switcher-menu",
-  Profile = "profile-menu",
-  Logo = "logo"
+  AppSwitcher = 2,
+  Profile = 3
 }
 /**
  * @since 1.0
@@ -66,22 +57,20 @@ export declare class SixHeader {
   /** Emitted when search field is toggled. */
   sixSearchFieldToggle: EventEmitter<SixHeaderSearchFieldToggle>;
   host: HTMLSixHeaderElement;
-  readonly eventListeners: EventListeners;
-  slots: {
-    readonly [K: string]: boolean;
-  };
-  selectedApp: string;
-  selectedSection: Section;
-  has: (slot: Slot) => boolean;
-  selected: (value: Section) => boolean;
-  select: (value: Section) => () => void;
-  toggleSearch: (value: Section) => () => void;
-  setupMenu: (el: HTMLSixIconButtonElement) => void;
-  setupLogo: (el: HTMLSixIconButtonElement) => void;
-  setupProfile: (el: HTMLSixDropdownElement) => void;
-  setupAppSwitcher: (el: HTMLSixDropdownElement) => void;
-  appNameClicked: () => CustomEvent<undefined>;
-  computeSearchOpenState: () => void;
+  private eventListeners;
+  private slots?;
+  selectedApp?: string;
+  selectedSection?: Section;
+  private hasSlot;
+  private isSectionSelected;
+  private selectSection;
+  private toggleSearch;
+  private setupMenu;
+  private setupLogo;
+  private setupProfile;
+  private setupAppSwitcher;
+  private appNameClicked;
+  private computeSearchOpenState;
   componentWillLoad(): void;
   private getSelectedApp;
   disconnectedCallback(): void;

package/dist/types/components/six-icon-button/six-icon-button.d.ts

@@ -7,20 +7,20 @@
  * @part base - The component's base wrapper.
  */
 export declare class SixIconButton {
-  button: HTMLButtonElement;
+  private button?;
   /** The name of the icon to draw. */
-  name: string;
+  name?: string;
   /** The icon's size. */
   size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
   /**
    * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should
    * always include a label that describes what the icon button does.
    */
-  label: string;
+  label?: string;
   /** Set to true to disable the button. */
   disabled: boolean;
   /** HTML symbol code or entity. */
-  html: string;
+  html?: string;
   componentDidLoad(): void;
   disconnectedCallback(): void;
   render(): any;

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

@@ -13,7 +13,6 @@ import { EmptyPayload } from '../../utils/types';
  * @slot show-password-icon - An icon to use in lieu of the default show password icon.
  * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
  * @slot help-text - Help text that describes how to use the input. Alternatively, you can use the help-text prop.
- * @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.
  *
  * @part base - The component's base wrapper.
  * @part form-control - The form control that wraps the label, input, and help-text.
@@ -31,13 +30,10 @@ export declare class SixInput {
   private helpTextId;
   private errorTextId;
   private nativeInput?;
-  private customErrorText;
-  private customValidation;
   private eventListeners;
   host: HTMLSixInputElement;
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasLabelSlot: boolean;
   isPasswordVisible: boolean;
   /** The input's type. */
@@ -50,12 +46,8 @@ export declare class SixInput {
   value: string;
   /** Set to true to draw a pill-style input with rounded edges. */
   pill: boolean;
-  /** The input's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The input's help text. Alternatively, you can use the help-text slot. */
   helpText: string;
-  /** The input's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
   /** The input's placeholder text. */
   placeholder?: string;
   /** Set to true to disable the input. */
@@ -74,7 +66,7 @@ export declare class SixInput {
   step?: number;
   /** A pattern to validate input against. */
   pattern?: string;
-  /** Set to true to make the input a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
   /** The input's autocaptialize attribute. */
   autocapitalize: string;
@@ -86,10 +78,11 @@ export declare class SixInput {
   autofocus: boolean;
   /** Enables spell checking on the input. */
   spellcheck: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
-   * `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** Set to true to add a clear button when the input is populated. */
   clearable: boolean;
@@ -99,8 +92,6 @@ export declare class SixInput {
   inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
   /** Set to render as line */
   line: boolean;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   handleLabelChange(): void;
   handleValueChange(): void;
   /** Emitted when the control's value changes. Access the new value via event.target.value. */
@@ -113,44 +104,27 @@ export declare class SixInput {
   sixFocus: EventEmitter<EmptyPayload>;
   /** Emitted when the control loses focus. Access the new value via event.target.value. */
   sixBlur: EventEmitter<EmptyPayload>;
-  /** defaultValue which the input will be reverted to when executing reset */
-  private defaultValue;
   connectedCallback(): void;
   componentWillLoad(): void;
-  componentDidLoad(): void;
   disconnectedCallback(): void;
   /** Sets focus on the input. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the input. */
   removeFocus(): Promise<void>;
   /** Selects all the text in the input. */
-  select(): Promise<void>;
+  select(): Promise<void | undefined>;
   /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void>;
+  setSelectionRange(selectionStart: number, selectionEnd: number, selectionDirection?: 'forward' | 'backward' | 'none'): Promise<void | undefined>;
   /** Replaces a range of text with a new string. */
   setRangeText(replacement: string, start: number, end: number, selectMode?: 'select' | 'start' | 'end' | 'preserve'): Promise<void>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Returns the native input's validity */
-  getValidity(): Promise<ValidityState | undefined>;
-  /** Returns the native input's validity */
-  isValid(): Promise<boolean>;
-  /** Returns the native input's validationMessage */
-  getValidationMessage(): Promise<string>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
   private handleChange;
   private handleInput;
   private handleBlur;
   private handleFocus;
   private handleClearClick;
+  private handleKeyDown;
   private handlePasswordToggle;
   private handleSlotChange;
-  private displayError;
   private getValue;
   render(): any;
 }

package/dist/types/components/six-item-picker/six-item-picker.d.ts

@@ -1,9 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ItemPickerPaddingDirection, ItemPickerType } from './types';
-type StringItemIndex = {
-  [key: string]: number;
-};
-export type SixItemPickerChangePayload = number | string;
+import { TimePeriod } from '../../utils/time.util';
+export type SixItemPickerChangePayload = number | string | boolean | TimePeriod;
 /**
  * @since 2.0.0
  * @status experimental
@@ -21,22 +19,22 @@ export declare class SixItemPicker {
   /** The type of items you want to rotate through. */
   type: ItemPickerType;
   /** The minimum value allowed to pick. */
-  min: number | string;
+  min?: number | string;
   /** The maximum value allowed to pick. */
-  max: number | string;
+  max?: number | string;
   /** Define whether the picker should to a roundtrip i.e. start at max when reaching min and vice versa. */
   roundtrip: boolean;
   /** Defines how many steps should be taken when navigating */
   step: number;
   /** Defines a custom list of items you can iterate through */
-  items: string[];
+  items?: string[];
   /** Defines whether the items should be padded */
   padded: boolean;
   /** Defines the length of the padded area */
   paddingLength: number;
   /** Defines the character used for padding */
   paddingChar: string;
-  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default
+  /** Defines whether the padding should be before or after the value. You can either use 'before' or 'after'. By default,
    * before is selected */
   paddingDirection: ItemPickerPaddingDirection;
   /**
@@ -66,20 +64,20 @@ export declare class SixItemPicker {
   protected debounceChanged(): void;
   handleSetChange(): void;
   _items: string[];
-  _itemIndexes: StringItemIndex;
-  _timeoutNext: ReturnType<typeof setTimeout>;
-  _intervalNext: ReturnType<typeof setInterval>;
-  _timeoutPrev: ReturnType<typeof setTimeout>;
-  _intervalPrev: ReturnType<typeof setInterval>;
+  _itemIndexes: Record<string, number>;
+  private _timeoutNext;
+  private _intervalNext;
+  private _timeoutPrev;
+  private _intervalPrev;
   componentWillLoad(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;
-  handleSixItemPickerChangeDebounced: () => void;
+  private handleSixItemPickerChangeDebounced;
   private setup;
   private setupNumberItems;
   private setUpStringItems;
   private getLastStringItem;
-  private getItems;
+  private getStringItems;
   private getItemIndexes;
   private previousItem;
   private previousNumber;
@@ -103,4 +101,3 @@ export declare class SixItemPicker {
   private getFormattedValue;
   render(): any;
 }
-export {};

package/dist/types/components/six-layout-grid/six-layout-grid.d.ts

@@ -7,7 +7,7 @@
 export declare class SixLayoutGrid {
   host: HTMLSixLayoutGridElement;
   /** Set the number of grid columns */
-  columns: any;
+  columns?: number;
   handleColumnsChange(): void;
   componentWillLoad(): void;
   render(): any;

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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SixMenuItemData {
   label: string;
@@ -20,10 +19,10 @@ export interface SixMenuItemSelectedPayload {
  */
 export declare class SixMenu {
   private readonly eventListeners;
-  menu: HTMLElement;
-  menuWrapper: HTMLElement;
-  typeToSelectString: string;
-  typeToSelectTimeout: NodeJS.Timeout;
+  private menu?;
+  private menuWrapper?;
+  private typeToSelectString;
+  private typeToSelectTimeout?;
   host: HTMLSixMenuElement;
   /** Emitted when a menu item is selected. */
   sixMenuItemSelected: EventEmitter<SixMenuItemSelectedPayload>;
@@ -31,7 +30,7 @@ export declare class SixMenu {
   removeBoxShadow: boolean;
   /** Set the options to be shown in the dropdown */
   items: SixMenuItemData[] | null;
-  /** Defines how many items should be shown. If the number of items is larger than this properties a scrollbar will be shown */
+  /** Defines how many items should be shown. If the number of items is larger than this property a scrollbar will be shown */
   itemsShown?: number;
   /** Defines whether the menu list will be rendered virtually i.e. only the elements actually shown (and a couple around)
    *  are actually rendered in the DOM. If you use virtual scrolling pass the elements via prop instead of via slot. */
@@ -66,13 +65,13 @@ export declare class SixMenu {
   typeToSelect(key: string): Promise<void>;
   private getItemsShown;
   private setupForVirtualScrollingAfterRendering;
-  getItems(): any[];
+  private getItems;
   private getActiveItemIndex;
-  getActiveItem(): any;
+  private getActiveItem;
   private extractItemsFromDOM;
-  setActiveItem(item: HTMLSixMenuItemElement): void;
-  handleClick(event: MouseEvent): void;
-  handleKeyDown(event: KeyboardEvent): void;
+  private setActiveItem;
+  private handleClick;
+  private handleKeyDown;
   private getMenuWrapperStyle;
   private getMenuContainerStyle;
   private getScrollbarGhostStyle;

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

@@ -15,8 +15,8 @@
  * @part suffix - The suffix container.
  */
 export declare class SixMenuItem {
-  menuItem: HTMLElement;
-  defaultSlot: HTMLSlotElement;
+  private menuItem?;
+  private defaultSlot?;
   hasFocus: boolean;
   /** Set to true to draw the item in a checked state. */
   checked: boolean;
@@ -31,9 +31,9 @@ export declare class SixMenuItem {
   removeFocus(): Promise<void>;
   /** Returns a text label based on the contents of the menu item's default slot. */
   getTextLabel(): Promise<string>;
-  handleBlur(): void;
-  handleFocus(): void;
-  handleMouseEnter(): void;
-  handleMouseLeave(): void;
+  private handleBlur;
+  private handleFocus;
+  private handleMouseEnter;
+  private handleMouseLeave;
   render(): any;
 }

package/dist/types/components/six-progress-ring/six-progress-ring.d.ts

@@ -10,7 +10,7 @@
  * @part label - The progress ring label.
  */
 export declare class SixProgressRing {
-  indicator: SVGCircleElement;
+  private indicator?;
   /** The size of the progress ring in pixels. */
   size: number;
   /** The stroke width of the progress ring in pixels. */
@@ -19,6 +19,6 @@ export declare class SixProgressRing {
   percentage: number;
   handlePercentageChange(): void;
   componentDidLoad(): void;
-  updateProgress(): void;
+  private updateProgress;
   render(): any;
 }

package/dist/types/components/six-radio/six-radio.d.ts

@@ -17,6 +17,7 @@ export declare class SixRadio {
   private inputId;
   private labelId;
   private nativeInput?;
+  private eventListeners;
   host: HTMLSixRadioElement;
   hasFocus: boolean;
   /** The radio's name attribute. */
@@ -27,12 +28,10 @@ export declare class SixRadio {
   disabled: boolean;
   /** Set to true to draw the radio in a checked state. */
   checked: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   handleCheckedChange(): void;
+  handleNameChange(name: string): void;
   /** Emitted when the control loses focus. */
   sixBlur: EventEmitter<EmptyPayload>;
   /** Emitted when the control's checked state changes. */
@@ -41,17 +40,13 @@ export declare class SixRadio {
   sixFocus: EventEmitter<EmptyPayload>;
   /** default state whether the radio button should be checked or not when resetting */
   private defaultState;
+  connectedCallback(): void;
   componentWillLoad(): void;
+  disconnectedCallback(): void;
   /** Sets focus on the radio. */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the radio. */
   removeFocus(): Promise<void>;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity(): Promise<boolean>;
-  /** Checks for validity. */
-  checkValidity(): Promise<boolean>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
   /** Resets the formcontrol */
   reset(): Promise<void>;
   private getAllRadios;

package/dist/types/components/six-range/six-range.d.ts

@@ -18,8 +18,6 @@ export declare class SixRange {
   private inputId;
   private labelId;
   private helpTextId;
-  private customErrorText;
-  private customValidation;
   private errorTextId;
   private eventListeners;
   private resizeObserver?;
@@ -29,26 +27,22 @@ export declare class SixRange {
   hasFocus: boolean;
   hasHelpTextSlot: boolean;
   hasLabelSlot: boolean;
-  hasErrorTextSlot: boolean;
   hasTooltip: boolean;
   /** The input's name attribute. */
   name: string;
   /** The input's value attribute. */
   value: number;
-  /** Set to true to make the input a required field. */
+  /** Set to true to show an asterisk beneath the label. */
   required: boolean;
-  /** The range's label. Alternatively, you can use the label slot. */
-  label: string;
   /** The range's help text. Alternatively, you can use the help-text slot. */
   helpText: string;
-  /** The input's error text. Alternatively, you can use the error-text slot. */
-  errorText: string;
   /** Set to true to disable the input. */
   disabled: boolean;
-  /**
-   * This will be true when the control is in an invalid state. Validity in range inputs is determined by the message
-   * provided by the `setCustomValidity` method.
-   */
+  /** The label text. */
+  label: string;
+  /** The error message shown, if `invalid` is set to true.  */
+  errorText: string;
+  /** If this property is set to true and an error message is provided by `errorText`, the error message is displayed.  */
   invalid: boolean;
   /** The input's min attribute. */
   min: number;
@@ -60,16 +54,12 @@ export declare class SixRange {
   tooltip: 'top' | 'bottom' | 'none';
   /** A function used to format the tooltip's value. */
   tooltipFormatter: (value: number) => string;
-  /** Set to display the error text on blur and not when typing */
-  errorOnBlur: boolean;
   /** Emitted when the control's value changes. */
   sixChange: EventEmitter<EmptyPayload>;
   /** Emitted when the control loses focus. */
   sixBlur: EventEmitter<EmptyPayload>;
   /** Emitted when the control gains focus. */
   sixFocus: EventEmitter<EmptyPayload>;
-  /** default value the slider will be reverted to when reset is executed */
-  private defaultValue;
   handleLabelChange(): void;
   handleValueChange(): void;
   connectedCallback(): void;
@@ -80,16 +70,11 @@ export declare class SixRange {
   setFocus(options?: FocusOptions): Promise<void>;
   /** Removes focus from the input. */
   removeFocus(): Promise<void>;
-  /** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
-  setCustomValidity(message: string): Promise<void>;
-  /** Resets the formcontrol */
-  reset(): Promise<void>;
   private handleInput;
   private handleBlur;
   private handleFocus;
   private handleSlotChange;
   private handleTouchStart;
-  private displayError;
   private syncTooltip;
   private isFirefox;
   private update;

package/dist/types/components/six-root/six-root.d.ts

@@ -9,8 +9,8 @@ export interface SixRootCollapsedPayload {
  *
  * @slot header - Used to define the header component.
  * @slot main - Used to define the components in the main area.
- * @slot left-sidebar - Used to define the side bar on the left side.
- * @slot right-sidebar - Used to define the side bar on the right side.
+ * @slot left-sidebar - Used to define the sidebar on the left side.
+ * @slot right-sidebar - Used to define the sidebar on the right side.
  * @slot footer - Used to define the footer component.
  */
 export declare class SixRoot {
@@ -26,7 +26,7 @@ export declare class SixRoot {
   /** Emitted when display size is updated. */
   collapsedEvent: EventEmitter<SixRootCollapsedPayload>;
   collapse: boolean;
-  resizeObserver: ResizeObserver;
+  private resizeObserver;
   handleCollapsed(collapsed: boolean): void;
   componentWillLoad(): void;
   disconnectedCallback(): void;

package/dist/types/components/six-search-field/six-search-field.d.ts

@@ -1,5 +1,4 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { EventListeners } from '../../utils/event-listeners';
 export interface SixSearchFieldChangePayload {
   value: string;
 }
@@ -11,7 +10,7 @@ export interface SixSearchFieldChangePayload {
  */
 export declare class SixSearchField {
   /** The input's placeholder text. */
-  placeholder: string;
+  placeholder?: string;
   /** Debounce time in milliseconds, default is 300 ms */
   debounce: number;
   /** Set to true to disable the input. */
@@ -22,9 +21,9 @@ export declare class SixSearchField {
   clearable: boolean;
   /** Emitted when a search is triggered */
   searchFieldChange: EventEmitter<SixSearchFieldChangePayload>;
-  inputElement: HTMLSixInputElement;
-  readonly eventListeners: EventListeners;
-  handleInputChange: () => void;
+  private inputElement?;
+  private eventListeners;
+  private handleInputChange;
   handleValueChange(): void;
   componentDidLoad(): void;
   disconnectedCallback(): void;