+
-
Below the fold content here
+
Below the fold content here
diff --git a/docs/src/pages/components/PaginationNav.svx b/docs/src/pages/components/PaginationNav.svx
index 690921fc..e279d4d1 100644
--- a/docs/src/pages/components/PaginationNav.svx
+++ b/docs/src/pages/components/PaginationNav.svx
@@ -42,4 +42,10 @@ Use the `forwardText` and `backwardText` props to customize the button text.
\ No newline at end of file
+/>
+
+## Tooltip Position
+
+Use the `tooltipPosition` prop to change the alignment of the tooltip.
+
+
\ No newline at end of file
diff --git a/docs/src/pages/components/PasswordInput.svx b/docs/src/pages/components/PasswordInput.svx
index 6f503974..a67c2099 100644
--- a/docs/src/pages/components/PasswordInput.svx
+++ b/docs/src/pages/components/PasswordInput.svx
@@ -50,3 +50,7 @@ Set prop `type` to `"text"` to toggle password visibility.
## Disabled state
+
+## With helper text
+
+
diff --git a/docs/src/pages/components/ProgressBar.svx b/docs/src/pages/components/ProgressBar.svx
index d296ae47..cd5e4c85 100644
--- a/docs/src/pages/components/ProgressBar.svx
+++ b/docs/src/pages/components/ProgressBar.svx
@@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
+## Finished status
+
+Specify `status="finished"` for the progress bar.
+
+
+
+## Error status
+
+Specify `status="error"` for the progress bar.
+
+
+
## Custom max value
The default `max` value is `100`.
@@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
+## Indented status variant
+
+
+
## UX example
This example shows how to animate the progress bar from 0 to 100% with start and end states.
diff --git a/docs/src/pages/components/Slider.svx b/docs/src/pages/components/Slider.svx
index d7ac38d4..3710eeee 100644
--- a/docs/src/pages/components/Slider.svx
+++ b/docs/src/pages/components/Slider.svx
@@ -9,17 +9,17 @@ components: ["Slider", "SliderSkeleton"]
## Default
-
+
## Full width
Set `fullWidth` to `true` for the slider to span the full width of its containing element.
-
+
## Hidden text input
-
+
## Custom minimum, maximum values
diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx
index 85799b6e..b693a713 100644
--- a/docs/src/pages/components/Tag.svx
+++ b/docs/src/pages/components/Tag.svx
@@ -41,7 +41,7 @@
## Custom icon
-Note: rendering a custom icon cannnot be used with the filterable variant.
+Note: rendering a custom icon cannot be used with the filterable variant.
IBM Cloud
diff --git a/docs/src/pages/components/Theme.svx b/docs/src/pages/components/Theme.svx
index f00cb56d..9a5cab2f 100644
--- a/docs/src/pages/components/Theme.svx
+++ b/docs/src/pages/components/Theme.svx
@@ -12,7 +12,7 @@ The `Theme` component can dyanmically update the Carbon theme on the client-side
The `all.css` StyleSheet uses [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) for dynamic theming.
-
+
## Default
diff --git a/docs/src/pages/components/TreeView.svx b/docs/src/pages/components/TreeView.svx
index 061e3dcc..fe2a4aa0 100644
--- a/docs/src/pages/components/TreeView.svx
+++ b/docs/src/pages/components/TreeView.svx
@@ -7,7 +7,7 @@
The `children` prop accepts an array of child nodes. Each node should contain `id` and `text` properties.
-Optional properties include `disabled`, `expanded`, `icon`, and `children`.
+Optional properties include `disabled`, `icon`, and `children`.
A parent node contains `children` while a leaf node does not.
diff --git a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
index 4f273214..ff416901 100644
--- a/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
+++ b/docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte
@@ -3,10 +3,14 @@
let max = 328;
let value = 0;
+ let status = "active";
$: helperText =
value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
- $: if (value === max) helperText = "Done";
+ $: if (value === max) {
+ helperText = "Done";
+ status = "finished";
+ }
@@ -37,7 +42,10 @@
diff --git a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
index 465735a0..5c534e0e 100644
--- a/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
+++ b/docs/src/pages/framed/TreeView/TreeViewIcons.svelte
@@ -14,13 +14,11 @@
id: 1,
text: "Analytics",
icon: Analytics,
- expanded: true,
children: [
{
id: 2,
text: "IBM Analytics Engine",
icon: Analytics,
- expanded: true,
children: [
{ id: 3, text: "Apache Spark", icon: Analytics },
{ id: 4, text: "Hadoop", icon: Analytics },
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 60209c7b..bd94c466 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -165,7 +165,7 @@ bufferutil@^4.0.1:
node-gyp-build "~3.7.0"
carbon-components-svelte@../:
- version "0.70.1"
+ version "0.76.1"
dependencies:
flatpickr "4.6.9"
@@ -1080,6 +1080,11 @@ punycode@^2.1.1:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+querystringify@^2.1.1:
+ version "2.2.0"
+ resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
+ integrity sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==
+
read-pkg@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@@ -1105,6 +1110,11 @@ remark-slug@^6.0.0:
mdast-util-to-string "^1.0.0"
unist-util-visit "^2.0.0"
+requires-port@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
+ integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
+
resolve@^1.10.0:
version "1.17.0"
resolved "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
@@ -1148,9 +1158,9 @@ saxes@^5.0.1:
xmlchars "^2.2.0"
"semver@2 || 3 || 4 || 5", semver@^5.5.0:
- version "5.7.1"
- resolved "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
- integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
+ version "5.7.2"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+ integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
shebang-command@^1.2.0:
version "1.2.0"
@@ -1280,10 +1290,10 @@ svelte-hmr@^0.14.12:
resolved "https://registry.yarnpkg.com/svelte-hmr/-/svelte-hmr-0.14.12.tgz#a127aec02f1896500b10148b2d4d21ddde39973f"
integrity sha512-4QSW/VvXuqVcFZ+RhxiR8/newmwOCTlbYIezvkeN6302YFRE8cXy0naamHcjz8Y9Ce3ITTZtrHrIL0AGfyo61w==
-svelte@^3.49.0:
- version "3.49.0"
- resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
- integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==
+svelte@^3.58.0:
+ version "3.58.0"
+ resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.58.0.tgz#d3e6f103efd6129e51c7d709225ad3b4c052b64e"
+ integrity sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==
symbol-tree@^3.2.4:
version "3.2.4"
@@ -1291,13 +1301,14 @@ symbol-tree@^3.2.4:
integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
tough-cookie@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
- integrity sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==
+ version "4.1.3"
+ resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+ integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
dependencies:
psl "^1.1.33"
punycode "^2.1.1"
- universalify "^0.1.2"
+ universalify "^0.2.0"
+ url-parse "^1.5.3"
tr46@^2.1.0:
version "2.1.0"
@@ -1342,16 +1353,24 @@ unist-util-visit@^2.0.0:
unist-util-is "^4.0.0"
unist-util-visit-parents "^3.0.0"
-universalify@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
- integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
+universalify@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+ integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
universalify@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
integrity sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==
+url-parse@^1.5.3:
+ version "1.5.10"
+ resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+ integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
+ dependencies:
+ querystringify "^2.1.1"
+ requires-port "^1.0.0"
+
utf-8-validate@^5.0.2:
version "5.0.2"
resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.2.tgz#63cfbccd85dc1f2b66cf7a1d0eebc08ed056bfb3"
diff --git a/examples/webpack/yarn.lock b/examples/webpack/yarn.lock
index d0a77707..8b7eecd6 100644
--- a/examples/webpack/yarn.lock
+++ b/examples/webpack/yarn.lock
@@ -2197,9 +2197,9 @@ selfsigned@^2.1.1:
node-forge "^1"
semver@^7.3.8:
- version "7.3.8"
- resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
- integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
+ version "7.5.4"
+ resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+ integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
dependencies:
lru-cache "^6.0.0"
diff --git a/package.json b/package.json
index e93925f1..56f0d6c2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "carbon-components-svelte",
- "version": "0.71.0",
+ "version": "0.76.1",
"license": "Apache-2.0",
"description": "Svelte implementation of the Carbon Design System",
"svelte": "./src/index.js",
@@ -11,13 +11,14 @@
"css/*.css"
],
"scripts": {
- "test:types": "svelte-check --workspace tests",
+ "test:types": "svelte-check --workspace tests --no-tsconfig --ignore 'docs,examples'",
+ "lint": "prettier --write \"**/*.{svelte,md,js,json,ts}\"",
"build:css": "node scripts/build-css",
"build:docs": "node scripts/build-docs",
"build:lib": "rollup -c",
- "prepack": "yarn build:docs & yarn build:lib",
"format": "prettier --write \"./**/*.{svelte,js,md}\"",
- "prepare": "husky install"
+ "prepack": "yarn build:docs & yarn build:lib",
+ "release": "standard-version && yarn prepack"
},
"dependencies": {
"flatpickr": "4.6.9"
@@ -25,12 +26,10 @@
"devDependencies": {
"@rollup/plugin-commonjs": "^21.0.3",
"@rollup/plugin-node-resolve": "^13.3.0",
- "@tsconfig/svelte": "^3.0.0",
+ "@tsconfig/svelte": "^4.0.1",
"autoprefixer": "^10.4.8",
- "carbon-components": "10.56.0",
+ "carbon-components": "10.57.0",
"carbon-icons-svelte": "^11.2.0",
- "husky": "^8.0.1",
- "lint-staged": "^13.0.3",
"postcss": "^8.4.16",
"prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0",
@@ -38,16 +37,17 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-terser": "^7.0.2",
"sass": "^1.49.11",
- "sveld": "^0.18.0",
- "svelte": "^3.51.0",
- "svelte-check": "^2.8.1",
+ "standard-version": "^9.5.0",
+ "sveld": "^0.18.1",
+ "svelte": "^3.58.0",
+ "svelte-check": "^3.4.3",
"typescript": "^4.7.4"
},
- "lint-staged": {
- "*.{svelte,md,js,json}": [
- "prettier --write"
- ],
- "*.{svelte,js,md}": "prettier --write"
+ "standard-version": {
+ "skip": {
+ "commit": true,
+ "tag": true
+ }
},
"prettier": {
"svelteStrictMode": true
@@ -72,7 +72,8 @@
"css"
],
"contributors": [
+ "Josef Aidt (https://github.com/josefaidt)",
"Eric Liu (https://github.com/metonym)",
- "Josef Aidt (https://github.com/josefaidt)"
+ "Enrico Sacchetti (https://github.com/theetrain)"
]
}
diff --git a/src/Breakpoint/breakpointObserver.d.ts b/src/Breakpoint/breakpointObserver.d.ts
index 70ec9894..69175629 100644
--- a/src/Breakpoint/breakpointObserver.d.ts
+++ b/src/Breakpoint/breakpointObserver.d.ts
@@ -1,28 +1,28 @@
-import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
-import type { BreakpointSize, BreakpointValue } from "./breakpoints";
-
-/**
- * Creates a readable store that returns the current breakpoint size.
- * It also provides functions for creating derived stores used to do comparisons.
- */
-export function breakpointObserver(): {
- subscribe: (
- this: void,
- run: Subscriber,
- invalidate?: (value?: any) => void
- ) => Unsubscriber;
- /**
- * Returns a store readable store that returns whether the current
- * breakpoint is smaller than {@link size}.
- * @param {BreakpointSize} size Size to compare against.
- */
- smallerThan: (size: BreakpointSize) => Readable;
- /**
- * Returns a store readable store that returns whether the current
- * breakpoint is larger than {@link size}.
- * @param {BreakpointSize} size Size to compare against.
- */
- largerThan: (size: BreakpointSize) => Readable;
-};
-
-export default breakpointObserver;
+import type { Readable, Subscriber, Unsubscriber } from "svelte/store";
+import type { BreakpointSize, BreakpointValue } from "./breakpoints";
+
+/**
+ * Creates a readable store that returns the current breakpoint size.
+ * It also provides functions for creating derived stores used to do comparisons.
+ */
+export function breakpointObserver(): {
+ subscribe: (
+ this: void,
+ run: Subscriber,
+ invalidate?: (value?: any) => void
+ ) => Unsubscriber;
+ /**
+ * Returns a store readable store that returns whether the current
+ * breakpoint is smaller than {@link size}.
+ * @param {BreakpointSize} size Size to compare against.
+ */
+ smallerThan: (size: BreakpointSize) => Readable;
+ /**
+ * Returns a store readable store that returns whether the current
+ * breakpoint is larger than {@link size}.
+ * @param {BreakpointSize} size Size to compare against.
+ */
+ largerThan: (size: BreakpointSize) => Readable;
+};
+
+export default breakpointObserver;
diff --git a/src/Breakpoint/breakpoints.d.ts b/src/Breakpoint/breakpoints.d.ts
index 0f89df39..44bbbcc4 100644
--- a/src/Breakpoint/breakpoints.d.ts
+++ b/src/Breakpoint/breakpoints.d.ts
@@ -1,11 +1,11 @@
-/**
- * Pixel sizes of Carbon grid breakpoints.
- * @type {Record}
- */
-export const breakpoints: Record;
-
-export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
-
-export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
-
-export default breakpoints;
+/**
+ * Pixel sizes of Carbon grid breakpoints.
+ * @type {Record}
+ */
+export const breakpoints: Record;
+
+export type BreakpointSize = "sm" | "md" | "lg" | "xlg" | "max";
+
+export type BreakpointValue = 320 | 672 | 1056 | 1312 | 1584;
+
+export default breakpoints;
diff --git a/src/Breakpoint/index.d.ts b/src/Breakpoint/index.d.ts
index e9046700..749b78c5 100644
--- a/src/Breakpoint/index.d.ts
+++ b/src/Breakpoint/index.d.ts
@@ -1,3 +1,3 @@
-export { default as Breakpoint } from "./Breakpoint.svelte";
-export { breakpointObserver } from "./breakpointObserver";
-export { breakpoints } from "./breakpoints";
+export { default as Breakpoint } from "./Breakpoint.svelte";
+export { breakpointObserver } from "./breakpointObserver";
+export { breakpoints } from "./breakpoints";
diff --git a/src/Checkbox/Checkbox.svelte b/src/Checkbox/Checkbox.svelte
index a98efe29..775aa344 100644
--- a/src/Checkbox/Checkbox.svelte
+++ b/src/Checkbox/Checkbox.svelte
@@ -1,5 +1,6 @@
+
+
{/if}
- {#if helperText}
+ {#if !invalid && !warn && helperText}
{
- dispatch("select", { selectedId, selectedItem });
+ dispatch("select", {
+ selectedId,
+ selectedItem: items.find((item) => item.id === selectedId),
+ });
};
-
-
+ };
+
+ onMount(() => {
+ if (parent) {
+ parent.addEventListener("click", pageClickHandler);
+ }
+
+ return () => {
+ if (parent) {
+ parent.removeEventListener("click", pageClickHandler);
+ }
+ };
+ });
+
+
+
+ /**
+ * @restProps {div | button | svg}
+ */
+
/**
* Specify the file name status
* @type {"uploading" | "edit" | "complete"}
diff --git a/src/FluidForm/FluidForm.svelte b/src/FluidForm/FluidForm.svelte
index 12d0b1c3..cf79c0af 100644
--- a/src/FluidForm/FluidForm.svelte
+++ b/src/FluidForm/FluidForm.svelte
@@ -1,4 +1,8 @@
{#if helperText}
diff --git a/src/ProgressIndicator/ProgressStep.svelte b/src/ProgressIndicator/ProgressStep.svelte
index 57446ff2..09ae7c91 100644
--- a/src/ProgressIndicator/ProgressStep.svelte
+++ b/src/ProgressIndicator/ProgressStep.svelte
@@ -53,7 +53,6 @@
{/if}
- {#if helperText}
+ {#if !invalid && !warn && helperText}
-
{maxLabel || max}
{:else}
+
+