@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

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

@@ -1,11 +1,14 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
-import { InputChangeEventDetail } from './input-interface';
-import type { Color, ControlValidity, ControlValidityEventDetail, TextFieldTypes } from '../../types/shared';
+import type { InputChangeEventDetail } from './input-interface';
+import type { ControlValidity, ControlValidityEventDetail, TextFieldTypes } from '../../types/shared';
+import type { DateDisabledPredicate } from '../date-picker/date-picker-interface';
+import type { NanoDatePicker } from '../date-picker/date-picker';
 /**
- * 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).
+ * Inputs collect text data from the user.
+ *
+ * @status stable
+ * @version 1.0.0
  *
-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.
-The default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)
  * @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
@@ -23,6 +26,9 @@ export declare class Input implements ComponentInterface {
     private mo?;
     private charCount;
     private hasRendered;
+    private pickerDropdown?;
+    private picker?;
+    private pickerCloseBtn?;
     private _nativeInputWrap;
     private get nativeInputWrap();
     private set nativeInputWrap(value);
@@ -39,16 +45,12 @@ export declare class Input implements ComponentInterface {
      * 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. @readonly
      */
-    get invalid(): boolean;
-    _invalid: boolean;
+    get invalid(): any;
+    _invalid: any;
     /**
      * Current validation message - if any. @readonly
      */
     get validityMessage(): string;
-    /**
-     * The color to use from the application's color palette.
-     */
-    color?: Color;
     /**
      * If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers.
      */
@@ -72,7 +74,7 @@ export declare class Input implements ComponentInterface {
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput: boolean;
+    clearable: boolean;
     /**
      * If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types.
      */
@@ -81,6 +83,7 @@ export declare class Input implements ComponentInterface {
      * Set the amount of time, in milliseconds, to wait to trigger the `nanoChange` event after each keystroke.
      */
     debounce: number;
+    protected debounceChanged(): void;
     /**
      * If `true`, the user cannot interact with the input.
      */
@@ -99,10 +102,17 @@ export declare class Input implements ComponentInterface {
      * Whether to show validation errors underneath input
      */
     showInlineError: boolean;
+    private _label;
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
-    label: string;
+    get label(): string;
+    set label(value: string);
+    /**
+     * Sometimes it can be helpful to always show the placeholder, even when the input has a value.
+     * For example a postcode field could have a placeholder `e.g. LD1 1AA` which is helpful to show.
+     */
+    alwaysShowPlaceholder: boolean;
     /**
      * Visually hide the label - but make it accessible.
      */
@@ -149,6 +159,8 @@ export declare class Input implements ComponentInterface {
     readonly: boolean;
     /**
      * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
      */
     required: boolean;
     /**
@@ -177,23 +189,49 @@ export declare class Input implements ComponentInterface {
      */
     value?: string | null;
     /**
-     * relevant to type="textarea". Vertical resizing - enable / disable or make automatic.
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    /** Represents the value of the input or NaN if numeric conversion is impossible */
+    get valueAsNumber(): number;
+    /** Represents the current value of the input as a Date, or null if conversion is not possible */
+    get valueAsDate(): Date;
+    /**
+     * Whether to show a character count / remaining count when using the `maxlength` attribute.
+     */
+    showCharCount: boolean;
+    protected shouldValidate(): void;
+    /**
+     * relevant to `type="textarea"`. Vertical resizing - enable / disable or make automatic.
      */
     resize: 'true' | 'false' | 'auto';
     /**
-     * relevant to type="textarea". Default number of rows to show
+     * relevant to `type="textarea"`. Default number of rows to show
      */
     rows: number;
     /**
-     * relevant to type="textarea".
+     * relevant to `type="date"`. Whether to show a date picker.
+     * Date pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays
      */
-    showCharCount: boolean;
-    protected shouldValidate(): void;
+    showPicker: boolean;
+    /** relevant to `type="date"`. Controls which days are disabled and therefore disallowed.
+     * For example, this can be used to disallow selection of weekends.
+     * @returns `false` for not disabled and `true` for disabled */
+    isDateDisabled: DateDisabledPredicate;
     /**
-     * Update the native input element when the value changes
+     * relevant to `type="date"`. Initial picker date. Defaults to `value` if set and today's date if not.
+     * Must be in IS0-8601 format: YYYY-MM-DD.
      */
-    protected valueChanged(): void;
-    protected debounceChanged(): void;
+    initialPickerDate?: string;
+    /**
+     * relevant to `type="date"`. If `true`, the input will close after a date is picked.
+     */
+    closeAfterPicked: boolean;
+    /**
+     * relevant to `type="date"`. Other options to pass to the date picker.
+     * See the `nano-date-picker` docs for more information.
+     */
+    pickerOptions: Partial<NanoDatePicker>;
     /**
      * Emitted when a keyboard input occurred.
      */

package/dist/types/components/intersection-observe/intersection-observe.d.ts

@@ -1,6 +1,10 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 /**
- * A thin, declarative interface to the IntersectionObserver API.
+ * A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).
+ *
+ * @version 6.0.0
+ * @status stable
+ *
  * @slot - Main slot for any content.
  */
 export declare class IntersectionObserve implements ComponentInterface {
@@ -13,7 +17,7 @@ export declare class IntersectionObserve implements ComponentInterface {
     host: HTMLNanoIntersectionObserveElement;
     /** The element that is used as the viewport for checking visibility of the target. Must be an ancestor of the target.
      * Defaults to an automatic check for ancestors that `overflow: auto` or otherwise the `Document`. */
-    root: globalThis.Element | 'root' | 'auto';
+    root: globalThis.Element | 'root' | 'auto' | string;
     handleRootChange(): void;
     /**
      * Margin around the root. Can be similar to CSS margins property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).

package/dist/types/components/masked-overflow/masked-overflow.d.ts

@@ -0,0 +1,94 @@
+import { ComponentInterface } from '../../stencil-public-runtime';
+/**
+ * `masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,
+ * automatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.
+ *
+ * @slot - Default slot to place items.
+ *
+ * @part base - root, wrapper element
+ * @part scroller - the scrolling element
+ * @part items - the item wrapper element
+ * @part indicator - the animated, indicator element
+ * @part scroll-button - The buttons shown at either side of the scrolling area
+ * @part scroll-button-prev - The button shown at the start of the scrolling area
+ * @part scroll-button-next - The button shown at the end of the scrolling area
+ */
+export declare class MaskedOverflow implements ComponentInterface {
+    /** Used to appropriately label the scrolling element for screen-readers */
+    label: string;
+    /** Disables the scroll arrow buttons that appear when content overflows */
+    scrollControls: boolean;
+    /** The flex direction of the element */
+    orientation: 'horizontal' | 'vertical';
+    /** Shows a track and a highlight line that automatically moves the currently active item. */
+    showIndicator: boolean;
+    /** Show or hide the browser's default scrollbars. Defaults to `true` on vertical orientation and `false` on `horizontal` orientation */
+    hideScrollbars: any;
+    watchHideScrollbars(): void;
+    /**
+     * A function called when an item becomes 'active' (via click or keyboard)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    activeHandler: (item: HTMLElement, _index: number) => void;
+    /**
+     * A function called when an item becomes 'inactive'
+     * (because another item was made active)
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    inactiveHandler: (item: HTMLElement, _index: number) => void;
+    /**
+     * A function called to assess an initial, active item
+     * @param item - html element currently being assessed
+     * @param _index - the index of the html element currently being assessed
+     * @returns void */
+    isActiveHandler: (item: HTMLElement, _index: number) => boolean;
+    watchIsActiveHandler(): void;
+    /**
+     * Sync up the view to the active item.
+     * Use this when the active item changes outside of this component.
+     */
+    syncActiveItem(): Promise<void>;
+    constructor();
+    private ro?;
+    private nav?;
+    private itemContainer?;
+    private isRtl?;
+    private endBtn;
+    private startBtn;
+    private activeIndicator;
+    private mutationObservers;
+    get scrollProp(): "scrollWidth" | "scrollHeight";
+    get clientDimensionProp(): "clientWidth" | "clientHeight";
+    get scrollOffset(): "scrollLeft" | "scrollTop";
+    host: HTMLNanoMaskedOverflowElement;
+    instantReCalc: boolean;
+    hasScrollControls: boolean;
+    watchScrollControls(): void;
+    hideControlEnd: boolean;
+    hideEndBtn(): void;
+    hideControlStart: boolean;
+    hideStartBtn(): void;
+    private activateBtn;
+    get allActiveItems(): HTMLElement[];
+    get allItems(): HTMLElement[];
+    get activeItem(): HTMLElement;
+    set activeItem(item: HTMLElement);
+    private _activeItem;
+    get navDim(): number;
+    private scrollToActiveItem;
+    private syncActiveItemIndicator;
+    private updateScrollControls;
+    private handleScroll;
+    private handleBtnClick;
+    private slotChangeHandler;
+    private handleClick;
+    private handleKeyDown;
+    private recalculatePositions;
+    connectedCallback(): void;
+    componentWillLoad(): Promise<void> | void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    render(): any;
+}

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

@@ -1,9 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-type ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement;
+type ValidElement = HTMLNanoNavItemElement | HTMLNanoOptionElement | HTMLAnchorElement;
 /**
- * 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.
+ * Menus provide a list of options for the user to choose from.
+ *
+ * @slot - The menu's content; `nano-option`, `nano-nav-item`, `a`, `nano-content-links` elements as well as `hr` and more.
+ *
+ * @part base - The base element of the menu.
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export declare class Menu {
     private ignoreMouseEvents;
@@ -15,8 +20,10 @@ export declare class Menu {
     /** 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';
+    /** changes the role of the underlying control (required for accessibility semantics).
+     * By default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`) */
+    type: 'menu' | 'listbox' | 'nav';
+    _type: 'menu' | 'listbox' | 'nav';
     /** an accessible label */
     label: string;
     /** Emitted when the menu gains focus. */
@@ -42,7 +49,8 @@ export declare class Menu {
     private handleClick;
     private handleKeyDown;
     private handleMouseOver;
-    componentDidLoad(): void;
+    private handleSlotContent;
+    componentWillLoad(): void;
     render(): any;
 }
 export {};

package/dist/types/components/nav-item/nav-item.d.ts

@@ -1,123 +1,69 @@
 import { EventEmitter, ComponentInterface } from '../../stencil-public-runtime';
-import { NavItemEventDetail } from './nav-item-interface';
+import type { NavItemEventDetail } from './nav-item-interface';
 /**
- * Nav items to be used with the various nav items.
- * [Globla-Nav](/story/compounds-global-nav)
- * [Menu-Drawer](/story/components-menu-drawer)
- * [Dropdown](/story/components-dropdown)
+ * Nav items provide options or links for the user to pick from a menu or navigation bar.
  *
  * @slot icon-start - an icon at the start of the main control
  * @slot icon-end - an icon at the end of the main control
- * @slot secondary - a content panel in which you can place any html to display on control click
+ * @slot secondary - a content panel in which you can place any html to display on click
+ * @slot close-button - a button to close the secondary content panel
  * @slot - use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)
- * @part ctrl - the controlling `<a>` or `<button>` element
- * @part ctrl--button - the controlling `<button>` element
- * @part ctrl--anchor - the controlling <a> element
- * @part ctrl-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
+ *
+ * @part trigger - the controlling `<a>` or `<button>` element
+ * @part trigger--button - the controlling `<button>` element
+ * @part trigger--anchor - the controlling <a> element
+ * @part trigger-wrapper - the wrapping div around the control (shadow `<button>` / `<a>` or slotted `<a>`)
  * @part secondary-wrapper - the div surrounding slotted secondary content
  * @part secondary-mask - the div that is added when secondary content is shown
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export declare class NavItem implements ComponentInterface {
-    private hasSecondarySlot;
-    private btn;
-    private fromHover;
-    private animating;
-    private waitHide;
-    private waitShow;
-    private globalNavEle?;
     private secondaryDiv;
-    hasAnchorEle: boolean;
+    private slotCtrl;
+    private controlElement;
+    private host;
     didOpen: boolean;
-    isInGlobalNav: boolean;
     isInMenuDrawer: boolean;
-    isInMenu: boolean;
-    hasFocus: boolean;
-    private el;
-    /**
-     * Href to link to
-     */
+    /** Href to link to. Alternatively, slot an `<a>` element */
     href: string;
-    /**
-     * Target to use for links
-     */
+    /** Target to use for links */
     target: '_self' | '_blank' | '_parent' | '_top';
-    /**
-     * Disable the nav item
-     */
+    /** Disable the nav item */
     disabled: boolean;
-    /**
-     * Whether a secondary menu should be or is currently open
-     */
+    /** Whether a secondary menu should be or is currently open */
     open: boolean;
-    /**
-     * Whether this menu item is currently 'selected'
-     */
+    /** Whether this menu item is currently 'selected' */
     selected: boolean;
-    /**
-     * Screen pixel width to activate the secondary menu
-     */
-    secondaryActiveWidth: number;
-    /**
-     * Secondary fallback function for when the secondary menu is no longer active.
-     */
-    secondaryFallback: () => void;
-    /**
-     * Whether secondary menus should close on blur
-     */
+    /** Changes behaviour so automatically becomes `selected` onClick */
+    checkbox: boolean;
+    /** Whether secondary menus should close on blur */
     closeOnBlur: boolean;
-    /**
-     * Will show an indicator badge - only when placed in a nano-menu-draw
-     */
+    /** Will show an indicator badge - only when placed in a nano-menu-draw */
     notification: boolean;
-    /**
-     * Emitted when the nav item closes it's secondary navigation.
-     */
+    /** Emitted when the nav item closes it's secondary navigation. */
     nanoClose: EventEmitter<NavItemEventDetail>;
-    /**
-     * Emitted when the nav item opens it's secondary navigation.
-     */
+    /** Emitted when the nav item opens it's secondary navigation. */
     nanoOpen: EventEmitter<NavItemEventDetail>;
-    /**
-     * Emitted when the nav item is about to open it's secondary navigation.
-     */
+    /** Emitted when the nav item is about to open it's secondary navigation. */
     nanoOpening: EventEmitter<NavItemEventDetail>;
-    /**
-     * Emitted when the nav item is about to close it's secondary navigation.
-     */
+    /** Emitted when the nav item is about to close it's secondary navigation. */
     nanoClosing: EventEmitter<NavItemEventDetail>;
-    /**
-     * Emitted when the nav item loses focus.
-     */
-    nanoBlur: EventEmitter<void>;
-    /**
-     * Emitted when the nav item has focus.
-     */
-    nanoFocus: EventEmitter<void>;
     /**
      * Sets focus on the first button or anchor present. Use this method instead of the global
      * `element.focus()`.
      */
     setFocus(): Promise<void>;
-    /**
-     * Public open watcher
-     */
     openChange(): void;
-    /**
-     * Internal open watcher
-     */
     didOpenChange(): void;
-    handleClose(e: MouseEvent | KeyboardEvent): void;
+    handleClose(e: KeyboardEvent): void;
     private closeSecondary;
     private openSecondary;
     private toggleSecondary;
-    private handleFocus;
-    private handleHostBlur;
-    private handleHostClick;
-    private handleMouseEnter;
-    private handleMouseLeave;
     private handleClick;
+    private handleDefaultSlotChange;
     connectedCallback(): void;
     componentDidLoad(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

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

@@ -11,7 +11,6 @@ import type { OptionInterface } from './option-interface';
 export declare class Option implements OptionInterface {
     private optId;
     host: HTMLNanoOptionElement;
-    hasFocus: boolean;
     constructor();
     /**
      * Value of the option
@@ -35,6 +34,8 @@ export declare class Option implements OptionInterface {
      * search / filter via extra related terms. Another usecase is 'endonyms'
      */
     filterMeta: string;
+    /** Setting an href will render an `<a>` element */
+    href: string;
     /** Fired when an option is selected */
     nanoSelect: EventEmitter<HTMLNanoOptionElement>;
     handleKeyDown(e: KeyboardEvent): void;

package/dist/types/components/progress-bar/progress-bar.d.ts

@@ -1,5 +1,8 @@
 /**
- * Used to show the status of an ongoing operation.
+ * Shows the status of an ongoing operation.
+ *
+ * @version 3.0.0
+ * @status stable
  *
  * @slot - A label to show inside the indicator.
  *

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

@@ -2,11 +2,10 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { RangeChangeEventDetail, RangeValue } from './range-interface';
 import type { Color, StyleEventDetail } from '../../types/shared';
 /**
- * The Range slider lets users select from a range of values by moving
- * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.
+ * Ranges allow the user to select a value within a given range using a slider.
  *
- * Labels can be placed on either side of the range by adding the
- * `slot="start"` or `slot="end"` to the element.
+ * @version 1.0.0
+ * @status stable
  *
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.

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

@@ -79,6 +79,5 @@ export declare class Rating implements ComponentInterface {
     private clip;
     componentDidLoad(): void;
     connectedCallback(): void;
-    disconnectedCallback(): void;
     render(): any;
 }

package/dist/types/components/resize-observe/resize-observe.d.ts

@@ -1,10 +1,8 @@
 import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { ResizeStateChangeEventDetail } from './resize-observe-interface';
 /**
- * A Resize-Observer utility component.
- * Takes a string list of sizes and optional class-names.
- * Adds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.
- * Additionally, can fire events when content no-longer fits within the element.
+ * A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
+ *
  * @slot - Main slot for any content.
  * @slot content-fit-x - optional slot (when `notifyContentFit` is set). Shows when content fits / doesn't get cut off
  * @slot content-nofit-x - optional slot (when `notifyContentFit` is set). Shows when content doesn't get cut off

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

@@ -2,13 +2,13 @@ import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
 import { OptionInterface } from '../option/option-interface';
 import { InputChangeEventDetail } from '../input/input-interface';
 import { SelectChangeEventDetail } from './select-interface';
-import type { Color, ControlValidityEventDetail, ControlValidity } from '../../types/shared';
+import type { ControlValidityEventDetail, ControlValidity } from '../../types/shared';
 import type { Dropdown as DropdownInterface } from '../dropdown/dropdown';
 /**
- * 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.
+ * Selects allow users to choose items from a menu of options.
+ *
+ * @status stable
+ * @version 1.0.0
  *
  * @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
@@ -38,11 +38,11 @@ export declare class Select implements ComponentInterface {
     private _datalist;
     private get datalist();
     private set datalist(value);
-    constructor();
     currInsertIndex: number;
     showErrorMsg: boolean;
     errorMessage: string;
     hasFocus: boolean;
+    hasOpened: boolean;
     hasLabelSlot: boolean;
     hasHelperSlot: boolean;
     hasHelperEndSlot: boolean;
@@ -52,17 +52,12 @@ export declare class Select implements ComponentInterface {
      * 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.
      */
-    get invalid(): boolean;
-    _invalid: boolean;
+    get invalid(): any;
+    _invalid: any;
     /**
      * Current validation message - if any. @readonly
      */
     get validityMessage(): string;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     */
-    color?: Color;
     /**
      * This Boolean attribute lets you specify that a form control should have select focus when the page loads.
      */
@@ -80,10 +75,12 @@ export declare class Select implements ComponentInterface {
      * Whether to show validation errors underneath input
      */
     showInlineError: boolean;
+    private _label;
     /**
-     * String to place within a label element. Alternatively use the 'label' slot
+     * String to place within a label element. Alternatively you may use a label slot.
      */
-    label: string;
+    get label(): string;
+    set label(value: string);
     /**
      * Visually hide the label - but make it accessible.
      */
@@ -116,6 +113,8 @@ export declare class Select implements ComponentInterface {
     readonly: boolean;
     /**
      * If `true`, the user must fill in a value before submitting a form.
+     * By default, setting this will also add an asterisk to the label.
+     * You can disable this by using the `label` slot instead.
      */
     required: boolean;
     /**
@@ -144,6 +143,10 @@ export declare class Select implements ComponentInterface {
     get value(): string | string[];
     set value(val: string | string[]);
     private _value;
+    /**
+     * Update the native select element when the value changes
+     */
+    valueChanged(): void;
     /**
      * 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.
@@ -157,7 +160,7 @@ export declare class Select implements ComponentInterface {
     /**
      * If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.
      */
-    clearSelect: boolean;
+    clearable: boolean;
     /**
      * Hide the native select element and cover with a value 'mask'.
      * Enables a fluid nano-select width upon value change (if required). Doesn't work with multiple="true".
@@ -169,10 +172,6 @@ export declare class Select implements ComponentInterface {
     debounce: number;
     protected debounceChanged(): void;
     protected shouldValidate(): void;
-    /**
-     * Update the native select element when the value changes
-     */
-    valueChanged(): void;
     /** nano-dropdown config options you can pass to the nested dropdown component */
     dropDownConfig?: Partial<DropdownInterface>;
     setDataListOpts(): void;
@@ -246,7 +245,7 @@ export declare class Select implements ComponentInterface {
     private getOptionWithValue;
     private getLabel;
     onReset(e: any): void;
-    handleBlur(e: KeyboardEvent | MouseEvent): void;
+    handleBlur(): void;
     private setOptions;
     private handleDocumentKeyDown;
     private onBlur;

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

@@ -1,8 +1,9 @@
 import { ComponentInterface } from '../../stencil-public-runtime';
 /**
  * Skeletons are used to show where content will eventually be drawn.
- * Simple containers for scaffolding layouts that mimic what users will see when content has finished loading.
- * Prevents large areas of empty space during asynchronous operations.
+ *
+ * @version 1.0.0
+ * @status stable
  */
 export declare class Skeleton implements ComponentInterface {
     /** When `true`, the skeleton will animate. */