diff --git a/src/CodeSnippet/CodeSnippetSkeleton.svelte b/src/CodeSnippet/CodeSnippetSkeleton.svelte
index 5e10dbb1..70d550bb 100644
--- a/src/CodeSnippet/CodeSnippetSkeleton.svelte
+++ b/src/CodeSnippet/CodeSnippetSkeleton.svelte
@@ -1,14 +1,14 @@
{
@@ -116,7 +114,10 @@
diff --git a/src/ComposedModal/ModalHeader.svelte b/src/ComposedModal/ModalHeader.svelte
index b83df927..432685e0 100644
--- a/src/ComposedModal/ModalHeader.svelte
+++ b/src/ComposedModal/ModalHeader.svelte
@@ -21,7 +21,7 @@
export let iconDescription = "Close";
import { getContext } from "svelte";
- import Close20 from "carbon-icons-svelte/lib/Close20";
+ import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
const { closeModal } = getContext("ComposedModal");
diff --git a/src/ContentSwitcher/ContentSwitcher.svelte b/src/ContentSwitcher/ContentSwitcher.svelte
index ed13d4e2..cb85c7fa 100644
--- a/src/ContentSwitcher/ContentSwitcher.svelte
+++ b/src/ContentSwitcher/ContentSwitcher.svelte
@@ -64,8 +64,9 @@
role="tablist"
class:bx--content-switcher="{true}"
class:bx--content-switcher--light="{light}"
+ class:bx--content-switcher--sm="{size === 'sm'}"
+ class:bx--content-switcher--xl="{size === 'xl'}"
{...$$restProps}
- class="{size && `bx--content-switcher--${size}`} {$$restProps.class}"
on:click
on:mouseover
on:mouseenter
diff --git a/src/ContentSwitcher/Switch.svelte b/src/ContentSwitcher/Switch.svelte
index e695b7c6..d3d75396 100644
--- a/src/ContentSwitcher/Switch.svelte
+++ b/src/ContentSwitcher/Switch.svelte
@@ -1,7 +1,7 @@
-
diff --git a/src/InlineLoading/InlineLoading.svelte b/src/InlineLoading/InlineLoading.svelte
index 081d05e8..d3a64489 100644
--- a/src/InlineLoading/InlineLoading.svelte
+++ b/src/InlineLoading/InlineLoading.svelte
@@ -21,9 +21,9 @@
export let successDelay = 1500;
import { createEventDispatcher, afterUpdate, onMount } from "svelte";
- import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16";
- import Error20 from "carbon-icons-svelte/lib/Error20";
- import { Loading } from "../Loading";
+ import CheckmarkFilled16 from "carbon-icons-svelte/lib/CheckmarkFilled16/CheckmarkFilled16.svelte";
+ import Error20 from "carbon-icons-svelte/lib/Error20/Error20.svelte";
+ import Loading from "../Loading/Loading.svelte";
const dispatch = createEventDispatcher();
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 305fdb4d..3bc66644 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -69,8 +69,8 @@
export let ref = null;
import { createEventDispatcher, onMount, afterUpdate } from "svelte";
- import Close20 from "carbon-icons-svelte/lib/Close20";
- import { Button } from "../Button";
+ import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+ import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
@@ -160,7 +160,9 @@
aria-modal="true"
aria-label="{ariaLabel}"
class:bx--modal-container="{true}"
- class="{size && `bx--modal-container--${size}`}"
+ class:bx--modal-container--xs="{size === 'xs'}"
+ class:bx--modal-container--sm="{size === 'sm'}"
+ class:bx--modal-container--lg="{size === 'lg'}"
on:click="{() => {
didClickInnerModal = true;
}}"
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 46df8b86..73e516a9 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,6 +1,7 @@
+ /**
+ * @event {{ page: number; }} change
+ * @event {{ page: number; }} click:button--previous
+ * @event {{ page: number; }} click:button--next
+ */
+
/** Specify the current page index */
export let page = 0;
@@ -18,11 +24,11 @@
export let backwardText = "Previous page";
import { afterUpdate, createEventDispatcher } from "svelte";
- import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16";
- import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16";
+ import CaretLeft16 from "carbon-icons-svelte/lib/CaretLeft16/CaretLeft16.svelte";
+ import CaretRight16 from "carbon-icons-svelte/lib/CaretRight16/CaretRight16.svelte";
import PaginationItem from "./PaginationItem.svelte";
import PaginationOverflow from "./PaginationOverflow.svelte";
- import { Button } from "../Button";
+ import Button from "../Button/Button.svelte";
const dispatch = createEventDispatcher();
const MIN = 4;
diff --git a/src/PaginationNav/PaginationOverflow.svelte b/src/PaginationNav/PaginationOverflow.svelte
index e142866e..7f4ccb5c 100644
--- a/src/PaginationNav/PaginationOverflow.svelte
+++ b/src/PaginationNav/PaginationOverflow.svelte
@@ -1,4 +1,8 @@
@@ -44,8 +42,17 @@
class:bx--tag="{true}"
class:bx--tag--disabled="{disabled}"
class:bx--tag--filter="{filter}"
- {...$$restProps}
- class="{type && `bx--tag--${type}`} {$$restProps.class}"
+ class:bx--tag--red="{type === 'red'}"
+ class:bx--tag--magenta="{type === 'magenta'}"
+ class:bx--tag--purple="{type === 'purple'}"
+ class:bx--tag--blue="{type === 'blue'}"
+ class:bx--tag--cyan="{type === 'cyan'}"
+ class:bx--tag--teal="{type === 'teal'}"
+ class:bx--tag--green="{type === 'green'}"
+ class:bx--tag--gray="{type === 'gray'}"
+ class:bx--tag--cool-gray="{type === 'cool-gray'}"
+ class:bx--tag--warm-gray="{type === 'warm-gray'}"
+ class:bx--tag--high-contrast="{type === 'high-contrast'}"
>
{type}
@@ -67,8 +74,17 @@
-
+
-
+
-
+
diff --git a/tests/PaginationNav.test.svelte b/tests/PaginationNav.test.svelte
index a67c8552..d7e65fdb 100644
--- a/tests/PaginationNav.test.svelte
+++ b/tests/PaginationNav.test.svelte
@@ -4,4 +4,16 @@
-
+
diff --git a/types/Accordion/AccordionItem.d.ts b/types/Accordion/AccordionItem.d.ts
index db8b3311..89597c94 100644
--- a/types/Accordion/AccordionItem.d.ts
+++ b/types/Accordion/AccordionItem.d.ts
@@ -3,7 +3,7 @@
export interface AccordionItemProps extends svelte.JSX.HTMLAttributes {
/**
* Specify the title of the accordion item heading
- * Alternatively, use the named slot "title" (e.g., ...
)
+ * Alternatively, use the "title" slot (e.g., ...
)
* @default "title"
*/
title?: string;
diff --git a/types/Breadcrumb/BreadcrumbItem.d.ts b/types/Breadcrumb/BreadcrumbItem.d.ts
index 6e0914e9..7574d6c8 100644
--- a/types/Breadcrumb/BreadcrumbItem.d.ts
+++ b/types/Breadcrumb/BreadcrumbItem.d.ts
@@ -16,7 +16,7 @@ export interface BreadcrumbItemProps extends svelte.JSX.HTMLAttributes void): () => void;
diff --git a/types/Button/ButtonSkeleton.d.ts b/types/Button/ButtonSkeleton.d.ts
index 57ca1bd3..450edfb5 100644
--- a/types/Button/ButtonSkeleton.d.ts
+++ b/types/Button/ButtonSkeleton.d.ts
@@ -13,7 +13,6 @@ export interface ButtonSkeletonProps extends svelte.JSX.HTMLAttributes {
/**
* Specify the switch text
- * Alternatively, use the named slot "text" (e.g., ...)
+ * Alternatively, use the "text" slot (e.g., ...)
* @default "Provide text"
*/
text?: string;
diff --git a/types/NumberInput/NumberInput.d.ts b/types/NumberInput/NumberInput.d.ts
index 5b0c5c91..715560b9 100644
--- a/types/NumberInput/NumberInput.d.ts
+++ b/types/NumberInput/NumberInput.d.ts
@@ -133,11 +133,11 @@ export default class NumberInput {
label: {};
};
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "input", cb: (event: WindowEventMap["input"]) => void): () => void;
- $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}
diff --git a/types/OverflowMenu/OverflowMenu.d.ts b/types/OverflowMenu/OverflowMenu.d.ts
index 6c6fa72f..9a75274a 100644
--- a/types/OverflowMenu/OverflowMenu.d.ts
+++ b/types/OverflowMenu/OverflowMenu.d.ts
@@ -77,11 +77,11 @@ export default class OverflowMenu {
menu: {};
};
+ $on(eventname: "close", cb: (event: CustomEvent<{ index: number; text: string }>) => void): () => void;
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
$on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
$on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
$on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
$on(eventname: "keydown", cb: (event: WindowEventMap["keydown"]) => void): () => void;
- $on(eventname: "close", cb: (event: CustomEvent) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}
diff --git a/types/Pagination/Pagination.d.ts b/types/Pagination/Pagination.d.ts
index e0356a35..d255a3dc 100644
--- a/types/Pagination/Pagination.d.ts
+++ b/types/Pagination/Pagination.d.ts
@@ -102,6 +102,6 @@ export default class Pagination {
$$prop_def: PaginationProps;
$$slot_def: {};
- $on(eventname: "update", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "update", cb: (event: CustomEvent<{ pageSize: number; page: number }>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}
diff --git a/types/PaginationNav/PaginationNav.d.ts b/types/PaginationNav/PaginationNav.d.ts
index faaa7180..be771e8f 100644
--- a/types/PaginationNav/PaginationNav.d.ts
+++ b/types/PaginationNav/PaginationNav.d.ts
@@ -42,8 +42,8 @@ export default class PaginationNav {
$$prop_def: PaginationNavProps;
$$slot_def: {};
- $on(eventname: "click:button--previous", cb: (event: CustomEvent) => void): () => void;
- $on(eventname: "click:button--next", cb: (event: CustomEvent) => void): () => void;
- $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
+ $on(eventname: "change", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
+ $on(eventname: "click:button--previous", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
+ $on(eventname: "click:button--next", cb: (event: CustomEvent<{ page: number }>) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}
diff --git a/types/Select/Select.d.ts b/types/Select/Select.d.ts
index c484d7bc..3af69bac 100644
--- a/types/Select/Select.d.ts
+++ b/types/Select/Select.d.ts
@@ -89,7 +89,7 @@ export default class Select {
default: {};
};
+ $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
$on(eventname: "blur", cb: (event: WindowEventMap["blur"]) => void): () => void;
- $on(eventname: "change", cb: (event: CustomEvent) => void): () => void;
$on(eventname: string, cb: (event: Event) => void): () => void;
}
diff --git a/types/Select/SelectItem.d.ts b/types/Select/SelectItem.d.ts
index b08ba976..59fe939b 100644
--- a/types/Select/SelectItem.d.ts
+++ b/types/Select/SelectItem.d.ts
@@ -1,6 +1,6 @@
///
-export interface SelectItemProps {
+export interface SelectItemProps extends svelte.JSX.HTMLAttributes {
/**
* Specify the option value
* @default ""
diff --git a/types/index.d.ts b/types/index.d.ts
index c1862c40..087e3347 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -86,9 +86,7 @@ export { default as NumberInput } from "./NumberInput/NumberInput";
export { default as NumberInputSkeleton } from "./NumberInput/NumberInputSkeleton";
export { default as OrderedList } from "./OrderedList/OrderedList";
export { default as Select } from "./Select/Select";
-export { default as SelectSkeleton } from "./Select/SelectSkeleton";
export { default as SelectItem } from "./Select/SelectItem";
-export { default as SelectItemGroup } from "./Select/SelectItemGroup";
export { default as Pagination } from "./Pagination/Pagination";
export { default as PaginationSkeleton } from "./Pagination/PaginationSkeleton";
export { default as PaginationNav } from "./PaginationNav/PaginationNav";
@@ -96,6 +94,8 @@ export { default as ProgressIndicator } from "./ProgressIndicator/ProgressIndica
export { default as ProgressIndicatorSkeleton } from "./ProgressIndicator/ProgressIndicatorSkeleton";
export { default as ProgressStep } from "./ProgressIndicator/ProgressStep";
export { default as RadioButtonGroup } from "./RadioButtonGroup/RadioButtonGroup";
+export { default as SelectSkeleton } from "./Select/SelectSkeleton";
+export { default as SelectItemGroup } from "./Select/SelectItemGroup";
export { default as SkeletonPlaceholder } from "./SkeletonPlaceholder/SkeletonPlaceholder";
export { default as Slider } from "./Slider/Slider";
export { default as SliderSkeleton } from "./Slider/SliderSkeleton";