Alignment with Carbon version 10.30 (#559)

* feat(toolbar): forward "clear" event in ToolbarSearch

* docs(search): add on:clear example

* fix(ui-shell): set aria-hidden in SideNav

Ref c2b4f1f00

* chore(deps-dev): upgrade carbon-components to v10.30.0

* fix(text-input): use bx--text-input class for TextInputSkeleton

* fix(radio-button): only render span if labelText is truthy

* docs(password-input): add custom tooltip example

* feat(button): add isSelected prop for icon-only, ghost buttons

* feat(radio-button): add legendText prop to RadioButtonGroup

* docs(tag): add filterable (disabled) variant

* feat(tag): add interactive prop

* chore(number-input): deprecate the mobile variant

Mobile variant styles will no longer work.

* feat(button): set aria-pressed attribute if icon-only, ghost button is selected

* fix(multi-select): type dispatched select event

* fix(button): remove redundant "button" role

* feat(icon): deprecate Icon, IconSkeleton

* feat(ui-shell): make SideNavMenuItem text slottable

* fix(list-box): update styles for ListBoxSelection

* fix(list-box): temporarily apply override styles to ListBoxMenuIcon for chevron

* fix(tag): set disabled prop on interactive tag

* docs(button): extract selected, icon-only button example

* feat(tooltip): elevate z-index of tooltip when open

* feat: forward restProps to input element

* fix(types): fix TimePicker test to pass svelte-check

* feat: add ImageLoader component

* test: add ImageLoader

* feat: add LocalStorage component

* test(local-storage): fix invalid file

* chore(docs): use green tag type

types/Button/Button.d.ts

@@ -26,6 +26,12 @@ export interface ButtonProps
    */
   size?: "default" | "field" | "small";
 
+  /**
+   * Set to `true` to enable the selected state for an icon-only, ghost button
+   * @default false
+   */
+  isSelected?: boolean;
+
   /**
    * Set to `true` for the icon-only variant
    * @default false

types/ComboBox/ComboBox.d.ts

@@ -7,7 +7,7 @@ export interface ComboBoxItem {
 }
 
 export interface ComboBoxProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the combobox items
    * @default []

types/DataTable/ToolbarSearch.d.ts

@@ -42,6 +42,7 @@ export interface ToolbarSearchProps {
 export default class ToolbarSearch extends SvelteComponentTyped<
   ToolbarSearchProps,
   {
+    clear: WindowEventMap["clear"];
     change: WindowEventMap["change"];
     input: WindowEventMap["input"];
     focus: WindowEventMap["focus"];

types/DatePicker/DatePickerInput.d.ts

@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface DatePickerInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */

types/ImageLoader/ImageLoader.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface ImageLoaderProps
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["img"]> {
+  /**
+   * Specify the image source
+   * @default ""
+   */
+  src?: string;
+
+  /**
+   * Specify the image alt text
+   * @default ""
+   */
+  alt?: string;
+
+  /**
+   * Specify the aspect ratio for the image wrapper
+   */
+  ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2";
+
+  /**
+   * Set to `true` when `loaded` is `true` and `error` is false
+   * @default false
+   */
+  loading?: boolean;
+
+  /**
+   * Set to `true` when the image is loaded
+   * @default false
+   */
+  loaded?: boolean;
+
+  /**
+   * Set to `true` if an error occurs when loading the image
+   * @default false
+   */
+  error?: boolean;
+
+  /**
+   * Set to `true` to fade in the image on load
+   * The duration uses the `fast-02` value following Carbon guidelines on motion
+   * @default false
+   */
+  fadeIn?: boolean;
+
+  /**
+   * Method invoked to load the image provided a `src` value
+   * @constant
+   * @default (url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }
+   */
+  loadImage?: (url?: string) => void;
+}
+
+export default class ImageLoader extends SvelteComponentTyped<
+  ImageLoaderProps,
+  { load: CustomEvent<any>; error: CustomEvent<any> },
+  { error: {}; loading: {} }
+> {}

types/ListBox/ListBoxSelection.d.ts

@@ -8,7 +8,7 @@ export interface ListBoxSelectionProps
   /**
    * Specify the number of selected items
    */
-  selectionCount?: any;
+  selectionCount?: number;
 
   /**
    * Set to `true` to disable the list box selection

types/LocalStorage/LocalStorage.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="svelte" />
+import { SvelteComponentTyped } from "svelte";
+
+export interface LocalStorageProps {
+  /**
+   * Specify the local storage key
+   * @default "local-storage-key"
+   */
+  key?: string;
+
+  /**
+   * Provide a value to persist
+   * @default ""
+   */
+  value?: any;
+}
+
+export default class LocalStorage extends SvelteComponentTyped<
+  LocalStorageProps,
+  {
+    save: CustomEvent<any>;
+    update: CustomEvent<{ prevValue: any; value: any }>;
+  },
+  {}
+> {}

types/MultiSelect/MultiSelect.d.ts

@@ -11,7 +11,7 @@ export interface MultiSelectItem {
 }
 
 export interface MultiSelectProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the multiselect items
    * @default []
@@ -179,11 +179,15 @@ export interface MultiSelectProps
 export default class MultiSelect extends SvelteComponentTyped<
   MultiSelectProps,
   {
+    select: CustomEvent<{
+      selectedIds: string[];
+      selected: MultiSelectItem[];
+      unselected: MultiSelectItem[];
+    }>;
     clear: WindowEventMap["clear"];
     keydown: WindowEventMap["keydown"];
     focus: WindowEventMap["focus"];
     blur: WindowEventMap["blur"];
-    select: CustomEvent<any>;
   },
   {}
 > {}

types/NumberInput/NumberInput.d.ts

@@ -4,7 +4,7 @@ import { SvelteComponentTyped } from "svelte";
 export type NumberInputTranslationId = "increment" | "decrement";
 
 export interface NumberInputProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Set the size of the input
    */

types/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -14,6 +14,12 @@ export interface RadioButtonGroupProps
    */
   disabled?: boolean;
 
+  /**
+   * Specify the legend text
+   * @default ""
+   */
+  legendText?: string;
+
   /**
    * Specify the label position
    * @default "right"
@@ -41,5 +47,5 @@ export default class RadioButtonGroup extends SvelteComponentTyped<
     mouseleave: WindowEventMap["mouseleave"];
     change: CustomEvent<any>;
   },
-  { default: {} }
+  { default: {}; legendText: {} }
 > {}

types/Tag/Tag.d.ts

@@ -37,6 +37,12 @@ export interface TagProps
    */
   disabled?: boolean;
 
+  /**
+   * Set to `true` to render a `button` element instead of a `div`
+   * @default false
+   */
+  interactive?: boolean;
+
   /**
    * Set to `true` to display the skeleton state
    * @default false

types/TimePicker/TimePicker.d.ts

@@ -2,7 +2,7 @@
 import { SvelteComponentTyped } from "svelte";
 
 export interface TimePickerProps
-  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["div"]> {
+  extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["input"]> {
   /**
    * Specify the size of the input
    */

types/UIShell/SideNav/SideNavMenuItem.d.ts

@@ -28,5 +28,5 @@ export interface SideNavMenuItemProps
 export default class SideNavMenuItem extends SvelteComponentTyped<
   SideNavMenuItemProps,
   { click: WindowEventMap["click"] },
-  {}
+  { default: {} }
 > {}

types/index.d.ts

@@ -57,6 +57,7 @@ export { default as Row } from "./Grid/Row";
 export { default as Column } from "./Grid/Column";
 export { default as Icon } from "./Icon/Icon";
 export { default as IconSkeleton } from "./Icon/IconSkeleton";
+export { default as ImageLoader } from "./ImageLoader/ImageLoader";
 export { default as InlineLoading } from "./InlineLoading/InlineLoading";
 export { default as Link } from "./Link/Link";
 export { default as OutboundLink } from "./Link/OutboundLink";
@@ -68,6 +69,7 @@ export { default as ListBoxMenuItem } from "./ListBox/ListBoxMenuItem";
 export { default as ListBoxSelection } from "./ListBox/ListBoxSelection";
 export { default as ListItem } from "./ListItem/ListItem";
 export { default as Loading } from "./Loading/Loading";
+export { default as LocalStorage } from "./LocalStorage/LocalStorage";
 export { default as MultiSelect } from "./MultiSelect/MultiSelect";
 export { default as Modal } from "./Modal/Modal";
 export { default as ToastNotification } from "./Notification/ToastNotification";