diff --git a/.changeset/fast-apricots-sing.md b/.changeset/fast-apricots-sing.md
deleted file mode 100644
index 035e4bc03..000000000
--- a/.changeset/fast-apricots-sing.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/skeleton": patch
----
-
-bugfix: Fixed double drawers unexpected closing direction.
diff --git a/.changeset/silent-bikes-count.md b/.changeset/silent-bikes-count.md
new file mode 100644
index 000000000..32a987784
--- /dev/null
+++ b/.changeset/silent-bikes-count.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": minor
+---
+
+feat: Added `Tree` component.
diff --git a/.changeset/tall-days-shop.md b/.changeset/tall-days-shop.md
new file mode 100644
index 000000000..c9d33fcda
--- /dev/null
+++ b/.changeset/tall-days-shop.md
@@ -0,0 +1,5 @@
+---
+"@skeletonlabs/skeleton": patch
+---
+
+bugfix: `Popup` content is not interactable when closed.
diff --git a/.changeset/wet-bugs-guess.md b/.changeset/wet-bugs-guess.md
deleted file mode 100644
index f93466d6a..000000000
--- a/.changeset/wet-bugs-guess.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"@skeletonlabs/skeleton": patch
----
-
-bugfix: InputChips should handle undefined values
diff --git a/cspell.json b/cspell.json
index af30508f6..e6c9712be 100644
--- a/cspell.json
+++ b/cspell.json
@@ -132,6 +132,7 @@
"Vercel",
"vite",
"Vitest",
+ "Wakanda",
"wght",
"Wonka",
"xmark",
diff --git a/package.json b/package.json
index afc706a67..ae28f0939 100644
--- a/package.json
+++ b/package.json
@@ -48,9 +48,9 @@
"cspell": "^6.31.1",
"shelljs": "^0.8.5"
},
- "packageManager": "pnpm@8.6.0",
+ "packageManager": "pnpm@8.6.3",
"engines": {
- "pnpm": ">=8.6.0"
+ "pnpm": ">=8.6.3"
},
"type": "module"
}
diff --git a/packages/skeleton/.eslintrc.cjs b/packages/skeleton/.eslintrc.cjs
index 29cc3a9ac..eaa0882c9 100644
--- a/packages/skeleton/.eslintrc.cjs
+++ b/packages/skeleton/.eslintrc.cjs
@@ -35,6 +35,8 @@ module.exports = {
],
'no-empty-function': 'off',
- '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }]
+ '@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+
+ '@typescript-eslint/ban-types': ['error', { types: { '{}': false }, extendDefaults: true }]
}
};
diff --git a/packages/skeleton/CHANGELOG.md b/packages/skeleton/CHANGELOG.md
index 45594b22d..30d43e2c3 100644
--- a/packages/skeleton/CHANGELOG.md
+++ b/packages/skeleton/CHANGELOG.md
@@ -1,5 +1,27 @@
# @skeletonlabs/skeleton
+## 1.9.0
+
+### Minor Changes
+
+- feat: Adds support for Svelte 4 ([#1690](https://github.com/skeletonlabs/skeleton/pull/1690))
+
+### Patch Changes
+
+- bugfix: Enhanced types for the `clipboard` action ([#1692](https://github.com/skeletonlabs/skeleton/pull/1692))
+
+- bugfix: resolved a spacing issue when using the vertical `radio group` setting ([#1696](https://github.com/skeletonlabs/skeleton/pull/1696))
+
+- bugfix: resolved an issue when the drawer position suddenly changes sides ([#1679](https://github.com/skeletonlabs/skeleton/pull/1679))
+
+- bugfix: paginator buttons now include accessible ARIA label props ([#1709](https://github.com/skeletonlabs/skeleton/pull/1709))
+
+- bugfix: fixed `scroll` event type in `AppShell` ([#1715](https://github.com/skeletonlabs/skeleton/pull/1715))
+
+- bugfix: Enhanced types for the `filter` action ([#1693](https://github.com/skeletonlabs/skeleton/pull/1693))
+
+- bugfix: `InputChips` can now handle `undefined` values ([#1678](https://github.com/skeletonlabs/skeleton/pull/1678))
+
## 1.8.0
### Minor Changes
diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json
index fc5209d3c..d4f20e001 100644
--- a/packages/skeleton/package.json
+++ b/packages/skeleton/package.json
@@ -1,6 +1,6 @@
{
"name": "@skeletonlabs/skeleton",
- "version": "1.8.0",
+ "version": "1.9.0",
"description": "A SvelteKit component library.",
"author": "endigo9740 ",
"scripts": {
@@ -42,17 +42,17 @@
"homepage": "https://skeleton.dev/",
"devDependencies": {
"@sveltejs/adapter-auto": "2.1.0",
- "@sveltejs/kit": "1.20.2",
- "@sveltejs/package": "2.0.2",
+ "@sveltejs/kit": "1.20.5",
+ "@sveltejs/package": "^2.1.0",
"@testing-library/dom": "9.3.0",
- "@testing-library/svelte": "3.2.2",
+ "@testing-library/svelte": "4.0.1",
"@typescript-eslint/eslint-plugin": "5.59.9",
"@typescript-eslint/parser": "5.59.9",
"@vitest/coverage-c8": "0.32.0",
"autoprefixer": "10.4.14",
"eslint": "8.42.0",
"eslint-config-prettier": "8.8.0",
- "eslint-plugin-svelte": "^2.30.0",
+ "eslint-plugin-svelte": "^2.31.0",
"jsdom": "21.1.1",
"postcss": "8.4.24",
"postcss-import": "15.1.0",
@@ -60,7 +60,8 @@
"postcss-load-config": "4.0.1",
"prettier": "2.8.8",
"prettier-plugin-svelte": "2.10.1",
- "svelte-check": "3.4.3",
+ "svelte": "4.0.0",
+ "svelte-check": "^3.4.4",
"tailwindcss": "3.3.2",
"tslib": "2.5.3",
"typescript": "5.0.3",
@@ -69,8 +70,10 @@
},
"type": "module",
"dependencies": {
- "esm-env": "1.0.0",
- "svelte": "3.58.0"
+ "esm-env": "1.0.0"
+ },
+ "peerDependencies": {
+ "svelte": "^3.56.0 || ^4.0.0"
},
"publishConfig": {
"types": "./dist/index.d.ts",
diff --git a/packages/skeleton/pnpm-lock.yaml b/packages/skeleton/pnpm-lock.yaml
index c0ee14231..cd726a7f8 100644
--- a/packages/skeleton/pnpm-lock.yaml
+++ b/packages/skeleton/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
settings:
autoInstallPeers: true
@@ -8,26 +8,23 @@ dependencies:
esm-env:
specifier: 1.0.0
version: 1.0.0
- svelte:
- specifier: 3.58.0
- version: 3.58.0
devDependencies:
'@sveltejs/adapter-auto':
specifier: 2.1.0
- version: 2.1.0(@sveltejs/kit@1.20.2)
+ version: 2.1.0(@sveltejs/kit@1.20.5)
'@sveltejs/kit':
- specifier: 1.20.2
- version: 1.20.2(svelte@3.58.0)(vite@4.3.9)
+ specifier: 1.20.5
+ version: 1.20.5(svelte@4.0.0)(vite@4.3.9)
'@sveltejs/package':
- specifier: 2.0.2
- version: 2.0.2(svelte@3.58.0)(typescript@5.0.3)
+ specifier: ^2.1.0
+ version: 2.1.0(svelte@4.0.0)(typescript@5.0.3)
'@testing-library/dom':
specifier: 9.3.0
version: 9.3.0
'@testing-library/svelte':
- specifier: 3.2.2
- version: 3.2.2(svelte@3.58.0)
+ specifier: 4.0.1
+ version: 4.0.1(svelte@4.0.0)
'@typescript-eslint/eslint-plugin':
specifier: 5.59.9
version: 5.59.9(@typescript-eslint/parser@5.59.9)(eslint@8.42.0)(typescript@5.0.3)
@@ -47,8 +44,8 @@ devDependencies:
specifier: 8.8.0
version: 8.8.0(eslint@8.42.0)
eslint-plugin-svelte:
- specifier: ^2.30.0
- version: 2.30.0(eslint@8.42.0)(svelte@3.58.0)
+ specifier: ^2.31.0
+ version: 2.31.0(eslint@8.42.0)(svelte@4.0.0)
jsdom:
specifier: 21.1.1
version: 21.1.1
@@ -69,10 +66,13 @@ devDependencies:
version: 2.8.8
prettier-plugin-svelte:
specifier: 2.10.1
- version: 2.10.1(prettier@2.8.8)(svelte@3.58.0)
+ version: 2.10.1(prettier@2.8.8)(svelte@4.0.0)
+ svelte:
+ specifier: 4.0.0
+ version: 4.0.0
svelte-check:
- specifier: 3.4.3
- version: 3.4.3(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@3.58.0)
+ specifier: ^3.4.4
+ version: 3.4.4(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@4.0.0)
tailwindcss:
specifier: 3.3.2
version: 3.3.2
@@ -455,17 +455,17 @@ packages:
resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
dev: true
- /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.20.2):
+ /@sveltejs/adapter-auto@2.1.0(@sveltejs/kit@1.20.5):
resolution: {integrity: sha512-o2pZCfATFtA/Gw/BB0Xm7k4EYaekXxaPGER3xGSY3FvzFJGTlJlZjBseaXwYSM94lZ0HniOjTokN3cWaLX6fow==}
peerDependencies:
'@sveltejs/kit': ^1.0.0
dependencies:
- '@sveltejs/kit': 1.20.2(svelte@3.58.0)(vite@4.3.9)
+ '@sveltejs/kit': 1.20.5(svelte@4.0.0)(vite@4.3.9)
import-meta-resolve: 3.0.0
dev: true
- /@sveltejs/kit@1.20.2(svelte@3.58.0)(vite@4.3.9):
- resolution: {integrity: sha512-MtR1i+HtmYWcRgtubw1GQqT/+CWXL/z24PegE0xYAdObbhdr7YtEfmoe705D/JZMtMmoPXrmSk4W0MfL5A3lYw==}
+ /@sveltejs/kit@1.20.5(svelte@4.0.0)(vite@4.3.9):
+ resolution: {integrity: sha512-8rJYZ2boRlO75lwpbpB+DlSzIwmTuamXTpVlDtw4dBk86o3UaDe/+Ro4xCsV/4FtTw2U8xPHyV83edAWbQHG0w==}
engines: {node: ^16.14 || >=18}
hasBin: true
requiresBuild: true
@@ -473,7 +473,7 @@ packages:
svelte: ^3.54.0 || ^4.0.0-next.0
vite: ^4.0.0
dependencies:
- '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.58.0)(vite@4.3.9)
+ '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.0.0)(vite@4.3.9)
'@types/cookie': 0.5.1
cookie: 0.5.0
devalue: 4.3.1
@@ -484,31 +484,30 @@ packages:
sade: 1.8.1
set-cookie-parser: 2.6.0
sirv: 2.0.3
- svelte: 3.58.0
- tiny-glob: 0.2.9
+ svelte: 4.0.0
undici: 5.22.1
vite: 4.3.9(@types/node@20.1.5)
transitivePeerDependencies:
- supports-color
dev: true
- /@sveltejs/package@2.0.2(svelte@3.58.0)(typescript@5.0.3):
- resolution: {integrity: sha512-cCOCcO8yMHnhHyaR51nQtvKZ3o/vSU9UYI1EXLT1j2CKNPMuH1/g6JNwKcNNrtQGwwquudc69ZeYy8D/TDNwEw==}
+ /@sveltejs/package@2.1.0(svelte@4.0.0)(typescript@5.0.3):
+ resolution: {integrity: sha512-c6PLH9G2YLQ48kqrS2XX422BrLNABBstSiapamchVJaQnOTXyJmUR8KmoCCySnzVy3PiYL6jg12UnoPmjW3SwA==}
engines: {node: ^16.14 || >=18}
hasBin: true
peerDependencies:
- svelte: ^3.44.0
+ svelte: ^3.44.0 || ^4.0.0
dependencies:
chokidar: 3.5.3
kleur: 4.1.5
sade: 1.8.1
- svelte: 3.58.0
- svelte2tsx: 0.6.14(svelte@3.58.0)(typescript@5.0.3)
+ svelte: 4.0.0
+ svelte2tsx: 0.6.16(svelte@4.0.0)(typescript@5.0.3)
transitivePeerDependencies:
- typescript
dev: true
- /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@3.58.0)(vite@4.3.9):
+ /@sveltejs/vite-plugin-svelte-inspector@1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.0.0)(vite@4.3.9):
resolution: {integrity: sha512-Cy1dUMcYCnDVV/hPLXa43YZJ2jGKVW5rA0xuNL9dlmYhT0yoS1g7+FOFSRlgk0BXKk/Oc7grs+8BVA5Iz2fr8A==}
engines: {node: ^14.18.0 || >= 16}
peerDependencies:
@@ -516,28 +515,28 @@ packages:
svelte: ^3.54.0 || ^4.0.0-next.0
vite: ^4.0.0
dependencies:
- '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.58.0)(vite@4.3.9)
+ '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@4.0.0)(vite@4.3.9)
debug: 4.3.4
- svelte: 3.58.0
+ svelte: 4.0.0
vite: 4.3.9(@types/node@20.1.5)
transitivePeerDependencies:
- supports-color
dev: true
- /@sveltejs/vite-plugin-svelte@2.4.1(svelte@3.58.0)(vite@4.3.9):
+ /@sveltejs/vite-plugin-svelte@2.4.1(svelte@4.0.0)(vite@4.3.9):
resolution: {integrity: sha512-bNNKvoRY89ptY7udeBSCmTdCVwkjmMcZ0j/z9J5MuedT8jPjq0zrknAo/jF1sToAza4NVaAgR9AkZoD9oJJmnA==}
engines: {node: ^14.18.0 || >= 16}
peerDependencies:
svelte: ^3.54.0 || ^4.0.0-next.0
vite: ^4.0.0
dependencies:
- '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@3.58.0)(vite@4.3.9)
+ '@sveltejs/vite-plugin-svelte-inspector': 1.0.2(@sveltejs/vite-plugin-svelte@2.4.1)(svelte@4.0.0)(vite@4.3.9)
debug: 4.3.4
deepmerge: 4.3.1
kleur: 4.1.5
magic-string: 0.30.0
- svelte: 3.58.0
- svelte-hmr: 0.15.1(svelte@3.58.0)
+ svelte: 4.0.0
+ svelte-hmr: 0.15.1(svelte@4.0.0)
vite: 4.3.9(@types/node@20.1.5)
vitefu: 0.2.4(vite@4.3.9)
transitivePeerDependencies:
@@ -551,7 +550,7 @@ packages:
'@babel/code-frame': 7.21.4
'@babel/runtime': 7.21.5
'@types/aria-query': 5.0.1
- aria-query: 5.1.3
+ aria-query: 5.2.1
chalk: 4.1.2
dom-accessibility-api: 0.5.16
lz-string: 1.5.0
@@ -572,14 +571,14 @@ packages:
pretty-format: 27.5.1
dev: true
- /@testing-library/svelte@3.2.2(svelte@3.58.0):
- resolution: {integrity: sha512-IKwZgqbekC3LpoRhSwhd0JswRGxKdAGkf39UiDXTywK61YyLXbCYoR831e/UUC6EeNW4hiHPY+2WuovxOgI5sw==}
+ /@testing-library/svelte@4.0.1(svelte@4.0.0):
+ resolution: {integrity: sha512-rvqkMlkXPtbtMbYQsWTb666yBAJVrTJcek2TlDogBKhxwYKqbWgvtTftMNclPi5aLgy+QGndTyIf4gtdFKaiXA==}
engines: {node: '>= 10'}
peerDependencies:
- svelte: 3.x
+ svelte: ^3 || ^4
dependencies:
'@testing-library/dom': 8.20.0
- svelte: 3.58.0
+ svelte: 4.0.0
dev: true
/@tootallnate/once@2.0.0:
@@ -605,6 +604,10 @@ packages:
resolution: {integrity: sha512-COUnqfB2+ckwXXSFInsFdOAWQzCCx+a5hq2ruyj+Vjund94RJQd4LG2u9hnvJrTgunKAaax7ancBYlDrNYxA0g==}
dev: true
+ /@types/estree@1.0.1:
+ resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
+ dev: true
+
/@types/istanbul-lib-coverage@2.0.4:
resolution: {integrity: sha512-z/QT1XN4K4KYuslS23k62yDIDLwLFkzxOuMplDtObz0+y7VqJCaO2o+SPwHCvLFZh7xazvvoor2tA/hPz9ee7g==}
dev: true
@@ -905,6 +908,12 @@ packages:
deep-equal: 2.2.1
dev: true
+ /aria-query@5.2.1:
+ resolution: {integrity: sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==}
+ dependencies:
+ dequal: 2.0.3
+ dev: true
+
/array-buffer-byte-length@1.0.0:
resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==}
dependencies:
@@ -946,6 +955,12 @@ packages:
engines: {node: '>= 0.4'}
dev: true
+ /axobject-query@3.2.1:
+ resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
+ dependencies:
+ dequal: 2.0.3
+ dev: true
+
/balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
dev: true
@@ -1097,6 +1112,16 @@ packages:
wrap-ansi: 7.0.0
dev: true
+ /code-red@1.0.3:
+ resolution: {integrity: sha512-kVwJELqiILQyG5aeuyKFbdsI1fmQy1Cmf7dQ8eGmVuJoaRVdwey7WaMknr2ZFeVSYSKT0rExsa8EGw0aoI/1QQ==}
+ dependencies:
+ '@jridgewell/sourcemap-codec': 1.4.15
+ '@types/estree': 1.0.1
+ acorn: 8.8.2
+ estree-walker: 3.0.3
+ periscopic: 3.1.0
+ dev: true
+
/color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies:
@@ -1166,6 +1191,14 @@ packages:
which: 2.0.2
dev: true
+ /css-tree@2.3.1:
+ resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==}
+ engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+ dependencies:
+ mdn-data: 2.0.30
+ source-map-js: 1.0.2
+ dev: true
+
/cssesc@3.0.0:
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
engines: {node: '>=4'}
@@ -1267,6 +1300,11 @@ packages:
engines: {node: '>=0.4.0'}
dev: true
+ /dequal@2.0.3:
+ resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+ engines: {node: '>=6'}
+ dev: true
+
/detect-indent@6.1.0:
resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
engines: {node: '>=8'}
@@ -1407,8 +1445,8 @@ packages:
eslint: 8.42.0
dev: true
- /eslint-plugin-svelte@2.30.0(eslint@8.42.0)(svelte@3.58.0):
- resolution: {integrity: sha512-2/qj0BJsfM0U2j4EjGb7iC/0nbUvXx1Gn78CdtyuXpi/rSomLPCPwnsZsloXMzlt6Xwe8LBlpRvZObSKEHLP5A==}
+ /eslint-plugin-svelte@2.31.0(eslint@8.42.0)(svelte@4.0.0):
+ resolution: {integrity: sha512-Q70jPFRraTkc/giPSfY7yuatmJcb5fPelWNplevqd45gfaJDjc3qXRtWQ6m9U5tWVVYERU9dcdUod294vwD8Gw==}
engines: {node: ^14.17.0 || >=16.0.0}
peerDependencies:
eslint: ^7.0.0 || ^8.0.0-0
@@ -1426,8 +1464,9 @@ packages:
postcss: 8.4.24
postcss-load-config: 3.1.4(postcss@8.4.24)
postcss-safe-parser: 6.0.0(postcss@8.4.24)
- svelte: 3.58.0
- svelte-eslint-parser: 0.30.0(svelte@3.58.0)
+ postcss-selector-parser: 6.0.13
+ svelte: 4.0.0
+ svelte-eslint-parser: 0.31.0(svelte@4.0.0)
transitivePeerDependencies:
- supports-color
- ts-node
@@ -1544,6 +1583,12 @@ packages:
engines: {node: '>=4.0'}
dev: true
+ /estree-walker@3.0.3:
+ resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
+ dependencies:
+ '@types/estree': 1.0.1
+ dev: true
+
/esutils@2.0.3:
resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
engines: {node: '>=0.10.0'}
@@ -1724,10 +1769,6 @@ packages:
type-fest: 0.20.2
dev: true
- /globalyzer@0.1.0:
- resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
- dev: true
-
/globby@11.1.0:
resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
engines: {node: '>=10'}
@@ -1740,10 +1781,6 @@ packages:
slash: 3.0.0
dev: true
- /globrex@0.1.2:
- resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
- dev: true
-
/gopd@1.0.1:
resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
dependencies:
@@ -1984,6 +2021,12 @@ packages:
resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
dev: true
+ /is-reference@3.0.1:
+ resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
+ dependencies:
+ '@types/estree': 1.0.1
+ dev: true
+
/is-regex@1.1.4:
resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
engines: {node: '>= 0.4'}
@@ -2181,6 +2224,10 @@ packages:
engines: {node: '>=14'}
dev: true
+ /locate-character@3.0.0:
+ resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
+ dev: true
+
/locate-path@6.0.0:
resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
engines: {node: '>=10'}
@@ -2248,6 +2295,10 @@ packages:
blueimp-md5: 2.19.0
dev: true
+ /mdn-data@2.0.30:
+ resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
+ dev: true
+
/merge2@1.4.1:
resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
engines: {node: '>= 8'}
@@ -2511,6 +2562,14 @@ packages:
resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
dev: true
+ /periscopic@3.1.0:
+ resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
+ dependencies:
+ '@types/estree': 1.0.1
+ estree-walker: 3.0.3
+ is-reference: 3.0.1
+ dev: true
+
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
dev: true
@@ -2613,6 +2672,15 @@ packages:
postcss: 8.4.24
dev: true
+ /postcss-scss@4.0.6(postcss@8.4.24):
+ resolution: {integrity: sha512-rLDPhJY4z/i4nVFZ27j9GqLxj1pwxE80eAzUNRMXtcpipFYIeowerzBgG3yJhMtObGEXidtIgbUpQ3eLDsf5OQ==}
+ engines: {node: '>=12.0'}
+ peerDependencies:
+ postcss: ^8.4.19
+ dependencies:
+ postcss: 8.4.24
+ dev: true
+
/postcss-selector-parser@6.0.13:
resolution: {integrity: sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==}
engines: {node: '>=4'}
@@ -2644,14 +2712,14 @@ packages:
engines: {node: '>= 0.8.0'}
dev: true
- /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@3.58.0):
+ /prettier-plugin-svelte@2.10.1(prettier@2.8.8)(svelte@4.0.0):
resolution: {integrity: sha512-Wlq7Z5v2ueCubWo0TZzKc9XHcm7TDxqcuzRuGd0gcENfzfT4JZ9yDlCbEgxWgiPmLHkBjfOtpAWkcT28MCDpUQ==}
peerDependencies:
prettier: ^1.16.4 || ^2.0.0
svelte: ^3.2.0 || ^4.0.0-next.0
dependencies:
prettier: 2.8.8
- svelte: 3.58.0
+ svelte: 4.0.0
dev: true
/prettier@2.8.8:
@@ -2971,8 +3039,8 @@ packages:
engines: {node: '>= 0.4'}
dev: true
- /svelte-check@3.4.3(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@3.58.0):
- resolution: {integrity: sha512-O07soQFY3X0VDt+bcGc6D5naz0cLtjwnmNP9JsEBPVyMemFEqUhL2OdLqvkl5H/u8Jwm50EiAU4BPRn5iin/kg==}
+ /svelte-check@3.4.4(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@4.0.0):
+ resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==}
hasBin: true
peerDependencies:
svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0
@@ -2983,8 +3051,8 @@ packages:
import-fresh: 3.3.0
picocolors: 1.0.0
sade: 1.8.1
- svelte: 3.58.0
- svelte-preprocess: 5.0.3(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@3.58.0)(typescript@5.0.3)
+ svelte: 4.0.0
+ svelte-preprocess: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@4.0.0)(typescript@5.0.3)
typescript: 5.0.3
transitivePeerDependencies:
- '@babel/core'
@@ -2998,8 +3066,8 @@ packages:
- sugarss
dev: true
- /svelte-eslint-parser@0.30.0(svelte@3.58.0):
- resolution: {integrity: sha512-H0Cn2TKr70DU9p/Gb04CfwtS7eK28MYumrHYPaDNkIFbfwGDLADpbERBn7u8G1Rcm2RMr2/mL6mq0J2e8iKFlA==}
+ /svelte-eslint-parser@0.31.0(svelte@4.0.0):
+ resolution: {integrity: sha512-/31RpBf/e3YjoFphjsyo3JRyN1r4UalGAGafXrZ6EJK4h4COOO0rbfBoen5byGsXnIJKsrlC1lkEd2Vzpq2IDg==}
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
peerDependencies:
svelte: ^3.37.0 || ^4.0.0-0
@@ -3010,20 +3078,22 @@ packages:
eslint-scope: 7.2.0
eslint-visitor-keys: 3.4.1
espree: 9.5.2
- svelte: 3.58.0
+ postcss: 8.4.24
+ postcss-scss: 4.0.6(postcss@8.4.24)
+ svelte: 4.0.0
dev: true
- /svelte-hmr@0.15.1(svelte@3.58.0):
+ /svelte-hmr@0.15.1(svelte@4.0.0):
resolution: {integrity: sha512-BiKB4RZ8YSwRKCNVdNxK/GfY+r4Kjgp9jCLEy0DuqAKfmQtpL38cQK3afdpjw4sqSs4PLi3jIPJIFp259NkZtA==}
engines: {node: ^12.20 || ^14.13.1 || >= 16}
peerDependencies:
svelte: '>=3.19.0'
dependencies:
- svelte: 3.58.0
+ svelte: 4.0.0
dev: true
- /svelte-preprocess@5.0.3(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@3.58.0)(typescript@5.0.3):
- resolution: {integrity: sha512-GrHF1rusdJVbOZOwgPWtpqmaexkydznKzy5qIC2FabgpFyKN57bjMUUUqPRfbBXK5igiEWn1uO/DXsa2vJ5VHA==}
+ /svelte-preprocess@5.0.4(postcss-load-config@4.0.1)(postcss@8.4.24)(svelte@4.0.0)(typescript@5.0.3):
+ resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
engines: {node: '>= 14.10.0'}
requiresBuild: true
peerDependencies:
@@ -3036,7 +3106,7 @@ packages:
sass: ^1.26.8
stylus: ^0.55.0
sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
- svelte: ^3.23.0
+ svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0
typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
peerDependenciesMeta:
'@babel/core':
@@ -3067,25 +3137,40 @@ packages:
postcss-load-config: 4.0.1(postcss@8.4.24)
sorcery: 0.11.0
strip-indent: 3.0.0
- svelte: 3.58.0
+ svelte: 4.0.0
typescript: 5.0.3
dev: true
- /svelte2tsx@0.6.14(svelte@3.58.0)(typescript@5.0.3):
- resolution: {integrity: sha512-Sxo9gtpc3dYWuFQ8fruZG+M+I6OZMIvOxxKjt48Lr8jD6Kr9cNf1Hf/yHUDEgDwQdRbAzn5y0FL9xk8Dx5v9lg==}
+ /svelte2tsx@0.6.16(svelte@4.0.0)(typescript@5.0.3):
+ resolution: {integrity: sha512-AX2iYEvQdd4tq5BokRdOOA0N/nD37ZnhXAomrAG9EEGl2cjkvoQUwe1Aluo6FSzA684WJjhxW+1ZXmveCmvDrA==}
peerDependencies:
- svelte: ^3.55
+ svelte: ^3.55 || ^4.0.0-next.0 || ^4.0
typescript: ^4.9.4 || ^5.0.0
dependencies:
dedent-js: 1.0.1
pascal-case: 3.1.2
- svelte: 3.58.0
+ svelte: 4.0.0
typescript: 5.0.3
dev: true
- /svelte@3.58.0:
- resolution: {integrity: sha512-brIBNNB76mXFmU/Kerm4wFnkskBbluBDCjx/8TcpYRb298Yh2dztS2kQ6bhtjMcvUhd5ynClfwpz5h2gnzdQ1A==}
- engines: {node: '>= 8'}
+ /svelte@4.0.0:
+ resolution: {integrity: sha512-+yCYu3AEUu9n91dnQNGIbnVp8EmNQtuF/YImW4+FTXRHard7NMo+yTsWzggPAbj3fUEJ1FBJLkql/jkp6YB5pg==}
+ engines: {node: '>=16'}
+ dependencies:
+ '@ampproject/remapping': 2.2.1
+ '@jridgewell/sourcemap-codec': 1.4.15
+ '@jridgewell/trace-mapping': 0.3.18
+ acorn: 8.8.2
+ aria-query: 5.2.1
+ axobject-query: 3.2.1
+ code-red: 1.0.3
+ css-tree: 2.3.1
+ estree-walker: 3.0.3
+ is-reference: 3.0.1
+ locate-character: 3.0.0
+ magic-string: 0.30.0
+ periscopic: 3.1.0
+ dev: true
/symbol-tree@3.2.4:
resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
@@ -3154,13 +3239,6 @@ packages:
engines: {node: '>=4'}
dev: true
- /tiny-glob@0.2.9:
- resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
- dependencies:
- globalyzer: 0.1.0
- globrex: 0.1.2
- dev: true
-
/tinybench@2.5.0:
resolution: {integrity: sha512-kRwSG8Zx4tjF9ZiyH4bhaebu+EDz1BOx9hOigYHlUW4xxI/wKIUQUqo018UlU4ar6ATPBsaMrdbKZ+tmPdohFA==}
dev: true
diff --git a/packages/skeleton/src/lib/actions/Clipboard/additional-svelte-typings.d.ts b/packages/skeleton/src/lib/actions/Clipboard/additional-svelte-typings.d.ts
index 5780dfddb..2d592ffef 100644
--- a/packages/skeleton/src/lib/actions/Clipboard/additional-svelte-typings.d.ts
+++ b/packages/skeleton/src/lib/actions/Clipboard/additional-svelte-typings.d.ts
@@ -1,5 +1,5 @@
declare namespace svelteHTML {
- interface HTMLAttributes {
- 'on:copyComplete'?: (event: any) => any;
+ interface HTMLAttributes {
+ 'on:copyComplete'?: () => void;
}
}
diff --git a/packages/skeleton/src/lib/actions/Clipboard/clipboard.ts b/packages/skeleton/src/lib/actions/Clipboard/clipboard.ts
index 9343c0d54..440a4ec50 100644
--- a/packages/skeleton/src/lib/actions/Clipboard/clipboard.ts
+++ b/packages/skeleton/src/lib/actions/Clipboard/clipboard.ts
@@ -1,6 +1,6 @@
// Action: Clipboard
-
-export function clipboard(node: HTMLElement, args: any) {
+type ClipboardArgs = string | { element: string } | { input: string };
+export function clipboard(node: HTMLElement, args: ClipboardArgs) {
const fireCopyCompleteEvent = () => {
node.dispatchEvent(new CustomEvent('copyComplete'));
};
@@ -8,15 +8,17 @@ export function clipboard(node: HTMLElement, args: any) {
// Handle `data-clipboard` target based on object key
if (typeof args === 'object') {
// Element Inner HTML
- if (Object.prototype.hasOwnProperty.call(args, 'element')) {
- const element: HTMLElement | null = document.querySelector(`[data-clipboard="${args.element}"]`);
- copyToClipboard(element?.innerHTML, 'text/html').then(fireCopyCompleteEvent);
+ if ('element' in args) {
+ const element = document.querySelector(`[data-clipboard="${args.element}"]`);
+ if (!element) throw new Error(`Missing HTMLElement with an attribute of [data-clipboard="${args.element}"]`);
+ copyToClipboard(element.innerHTML, 'text/html').then(fireCopyCompleteEvent);
return;
}
// Form Input Value
- if (Object.prototype.hasOwnProperty.call(args, 'input')) {
- const input: HTMLInputElement | null = document.querySelector(`[data-clipboard="${args.input}"]`);
- copyToClipboard(input?.value).then(fireCopyCompleteEvent);
+ if ('input' in args) {
+ const input = document.querySelector(`[data-clipboard="${args.input}"]`);
+ if (!input) throw new Error(`Missing HTMLInputElement with an attribute of [data-clipboard="${args.input}"]`);
+ copyToClipboard(input.value).then(fireCopyCompleteEvent);
return;
}
}
@@ -27,7 +29,7 @@ export function clipboard(node: HTMLElement, args: any) {
node.addEventListener('click', onClick);
// Lifecycle
return {
- update(newArgs: any) {
+ update(newArgs: ClipboardArgs) {
args = newArgs;
},
destroy() {
@@ -37,7 +39,7 @@ export function clipboard(node: HTMLElement, args: any) {
}
// Shared copy method
-async function copyToClipboard(data: any, mimeType = 'text/plain') {
+async function copyToClipboard(data: BlobPart, mimeType = 'text/plain') {
if (navigator.clipboard.write) {
await navigator.clipboard.write([
new ClipboardItem({
diff --git a/packages/skeleton/src/lib/actions/Filters/filter.test.ts b/packages/skeleton/src/lib/actions/Filters/filter.test.ts
index 6c2ef5f5a..4c45b31a1 100644
--- a/packages/skeleton/src/lib/actions/Filters/filter.test.ts
+++ b/packages/skeleton/src/lib/actions/Filters/filter.test.ts
@@ -26,16 +26,15 @@ describe('Actions: Filter', () => {
render(GreenFall);
render(NoirLight);
render(Noir);
- const elements: HTMLCollection = document.getElementsByClassName('filter');
+ const elements = document.getElementsByClassName('filter');
for (const element of elements) {
- const el: any = element;
- expect(el.getAttribute('class').includes('filter'));
+ expect(element.getAttribute('class')?.includes('filter'));
}
});
it('Test the node gets the filter url', async () => {
- const elem: any = document.createElement('div');
+ const elem = document.createElement('div');
filter(elem, 'XPro');
- expect(elem.getAttribute('style').includes('filter: url("#Emerald")'));
+ expect(elem.getAttribute('style')?.includes('filter: url("#Emerald")'));
});
});
diff --git a/packages/skeleton/src/lib/actions/Filters/filter.ts b/packages/skeleton/src/lib/actions/Filters/filter.ts
index c1c004e77..1054ca1d0 100644
--- a/packages/skeleton/src/lib/actions/Filters/filter.ts
+++ b/packages/skeleton/src/lib/actions/Filters/filter.ts
@@ -1,6 +1,11 @@
// Action: Filter
-export function filter(node: HTMLElement, filterName: string) {
+type Filters = ['Apollo', 'BlueNight', 'Emerald', 'GreenFall', 'Noir', 'NoirLight', 'Rustic', 'Summer84', 'XPro'];
+// This type allows users to get the autocomplete option for our
+// filter presets while also permitting them into adding their own filter.
+type FilterName = `#${Filters[number]}` | (string & {});
+
+export function filter(node: HTMLElement, filterName: FilterName) {
// Return if no filterName provided
if (filterName === undefined) return;
@@ -10,7 +15,7 @@ export function filter(node: HTMLElement, filterName: string) {
applyFilter();
return {
- update(newArgs: any) {
+ update(newArgs: FilterName) {
filterName = newArgs;
applyFilter();
}
diff --git a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte
index 1fac1abe8..7a9e6cbb6 100644
--- a/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte
+++ b/packages/skeleton/src/lib/components/Accordion/AccordionItem.svelte
@@ -10,15 +10,18 @@
// DISPATCHED: document directly above the definition, like props (ex: paginator)
import { getContext } from 'svelte';
- import { createEventDispatcher } from 'svelte/internal';
+ import { createEventDispatcher } from 'svelte';
import type { Writable } from 'svelte/store';
import { slide } from 'svelte/transition';
// Event Dispatcher
- const dispatch = createEventDispatcher();
+ type AccordionItemEvent = {
+ toggle: { event?: Event; id: string; open: boolean; autocollapse: boolean };
+ };
+ const dispatch = createEventDispatcher();
// Types
- import type { CssClasses } from '../../index.js';
+ import type { CssClasses, SvelteEvent } from '../../index.js';
// Props (state)
/** Set open by default on load. */
@@ -66,7 +69,7 @@
export let regionCaret: CssClasses = getContext('regionCaret');
// Change open behavior based on auto-collapse mode
- function setActive(event?: Event): void {
+ function setActive(event?: SvelteEvent): void {
if (autocollapse === true) {
// Set item active
active.set(id);
@@ -78,7 +81,7 @@
onToggle(event);
}
- function onToggle(event?: Event): void {
+ function onToggle(event?: SvelteEvent): void {
const currentOpenState = autocollapse ? $active === id : open;
/** @event {{ event: Event, id: string, open: boolean, autocollapse: boolean }} toggle - Fires when an accordion item is toggled. */
dispatch('toggle', { event, id: `accordion-control-${id}`, open: currentOpenState, autocollapse });
diff --git a/packages/skeleton/src/lib/components/AppRail/AppRailAnchor.svelte b/packages/skeleton/src/lib/components/AppRail/AppRailAnchor.svelte
index 58aa58942..7b378d876 100644
--- a/packages/skeleton/src/lib/components/AppRail/AppRailAnchor.svelte
+++ b/packages/skeleton/src/lib/components/AppRail/AppRailAnchor.svelte
@@ -38,7 +38,7 @@
$: classesLabel = `${cLabel} ${regionLabel}`;
// RestProps
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
diff --git a/packages/skeleton/src/lib/components/AppRail/AppRailTile.svelte b/packages/skeleton/src/lib/components/AppRail/AppRailTile.svelte
index 5a1b59cae..008b6d001 100644
--- a/packages/skeleton/src/lib/components/AppRail/AppRailTile.svelte
+++ b/packages/skeleton/src/lib/components/AppRail/AppRailTile.svelte
@@ -58,7 +58,7 @@
$: classesLabel = `${cLabel} ${regionLabel}`;
// RestProps
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
@@ -66,6 +66,8 @@
+
+
diff --git a/packages/skeleton/src/lib/components/AppShell/AppShell.svelte b/packages/skeleton/src/lib/components/AppShell/AppShell.svelte
index 3e73efaba..ccddf4916 100644
--- a/packages/skeleton/src/lib/components/AppShell/AppShell.svelte
+++ b/packages/skeleton/src/lib/components/AppShell/AppShell.svelte
@@ -9,7 +9,11 @@
*/
// Types
- import type { CssClasses } from '../../index.js';
+ import type { CssClasses, SvelteEvent } from '../../index.js';
+
+ interface $$Events {
+ scroll: SvelteEvent
;
+ }
// Props (regions)
/** Apply arbitrary classes to the entire `#page` region. */
diff --git a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
index 8283e159f..2eedcc2ec 100644
--- a/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
+++ b/packages/skeleton/src/lib/components/Autocomplete/Autocomplete.svelte
@@ -6,8 +6,11 @@
// Types
import type { AutocompleteOption } from './types.js';
- // Custom Dispatcher
- const dispatch = createEventDispatcher();
+ // Event Dispatcher
+ type AutocompleteEvent = {
+ selection: AutocompleteOption;
+ };
+ const dispatch = createEventDispatcher();
// Props
/**
diff --git a/packages/skeleton/src/lib/components/Avatar/Avatar.svelte b/packages/skeleton/src/lib/components/Avatar/Avatar.svelte
index 45d448dfe..89d4ce2eb 100644
--- a/packages/skeleton/src/lib/components/Avatar/Avatar.svelte
+++ b/packages/skeleton/src/lib/components/Avatar/Avatar.svelte
@@ -15,9 +15,9 @@
/** Provide the fallback image element source. */
export let fallback = '';
/**
- * Image only. Provide an Svelte action reference, such as `filter`.
+ * Image only. Provide a Svelte action reference, such as `filter`.
*/
- export let action: Action = () => {};
+ export let action: Action = () => {};
/** Image only. Provide Svelte action params, such as Apollo. */
export let actionParams = '';
@@ -49,6 +49,8 @@
}
+
+
{#if src}
{
it('Image shown when src prop set', async () => {
const { getByTestId } = render(Avatar, { props: { src: imgTextSrc } });
- const elemImage: any = getByTestId('avatar').querySelector('.avatar-image');
- expect(elemImage.src).to.eq(imgTextSrc);
+ const elemImage = getByTestId('avatar').querySelector('.avatar-image');
+ expect(elemImage?.src).to.eq(imgTextSrc);
});
it('Initials shown when no image source provided', async () => {
diff --git a/packages/skeleton/src/lib/components/ConicGradient/ConicGradient.svelte b/packages/skeleton/src/lib/components/ConicGradient/ConicGradient.svelte
index c8fb39c8d..54c9a4f02 100644
--- a/packages/skeleton/src/lib/components/ConicGradient/ConicGradient.svelte
+++ b/packages/skeleton/src/lib/components/ConicGradient/ConicGradient.svelte
@@ -95,6 +95,8 @@
{#if legend && generatedLegendList}
{#each generatedLegendList as { color, label, value }}
+
+
{label}
diff --git a/packages/skeleton/src/lib/components/FileButton/FileButton.svelte b/packages/skeleton/src/lib/components/FileButton/FileButton.svelte
index d0ba4d548..07bce1956 100644
--- a/packages/skeleton/src/lib/components/FileButton/FileButton.svelte
+++ b/packages/skeleton/src/lib/components/FileButton/FileButton.svelte
@@ -28,7 +28,7 @@
elemFileInput.click();
}
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
diff --git a/packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte b/packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte
index 1a88cb3cd..9403b0c20 100644
--- a/packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte
+++ b/packages/skeleton/src/lib/components/FileDropzone/FileDropzone.svelte
@@ -44,7 +44,7 @@
$: classesInterface = `${cInterface}`;
// Pruned RestProps
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
diff --git a/packages/skeleton/src/lib/components/InputChip/InputChip.svelte b/packages/skeleton/src/lib/components/InputChip/InputChip.svelte
index 92fad30a0..842cc2cf6 100644
--- a/packages/skeleton/src/lib/components/InputChip/InputChip.svelte
+++ b/packages/skeleton/src/lib/components/InputChip/InputChip.svelte
@@ -1,13 +1,18 @@
diff --git a/packages/skeleton/src/lib/components/Radio/RadioItem.svelte b/packages/skeleton/src/lib/components/Radio/RadioItem.svelte
index 9bc9269e6..1d69e576f 100644
--- a/packages/skeleton/src/lib/components/Radio/RadioItem.svelte
+++ b/packages/skeleton/src/lib/components/Radio/RadioItem.svelte
@@ -2,7 +2,7 @@
import { getContext } from 'svelte';
// Types
- import type { CssClasses } from '../../index.js';
+ import type { CssClasses, SvelteEvent } from '../../index.js';
// Props
/**
@@ -40,7 +40,7 @@
let elemInput: HTMLElement;
// A11y Key Down Handler
- function onKeyDown(event: KeyboardEvent): void {
+ function onKeyDown(event: SvelteEvent): void {
if (['Enter', 'Space'].includes(event.code)) {
event.preventDefault();
elemInput.click();
@@ -54,7 +54,7 @@
$: classesBase = `${cBase} ${padding} ${rounded} ${classesActive} ${classesDisabled} ${$$props.class ?? ''}`;
// RestProps
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
diff --git a/packages/skeleton/src/lib/components/RangeSlider/RangeSlider.svelte b/packages/skeleton/src/lib/components/RangeSlider/RangeSlider.svelte
index 9da703fa8..fdb02406b 100644
--- a/packages/skeleton/src/lib/components/RangeSlider/RangeSlider.svelte
+++ b/packages/skeleton/src/lib/components/RangeSlider/RangeSlider.svelte
@@ -63,7 +63,7 @@
$: classesInput = `${cBaseInput} ${accent}`;
// Prune $$restProps to avoid overwriting $$props.class
- function prunedRestProps(): any {
+ function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
diff --git a/packages/skeleton/src/lib/components/Ratings/Ratings.svelte b/packages/skeleton/src/lib/components/Ratings/Ratings.svelte
index edfbae137..413d92404 100644
--- a/packages/skeleton/src/lib/components/Ratings/Ratings.svelte
+++ b/packages/skeleton/src/lib/components/Ratings/Ratings.svelte
@@ -6,7 +6,7 @@
* @slot {{}} full - Provide a full rating icon.
*/
- import { createEventDispatcher } from 'svelte/internal';
+ import { createEventDispatcher } from 'svelte';
// Types
import type { CssClasses } from '../../index.js';
@@ -16,6 +16,8 @@
export let value = 0;
/** Maximum rating value. */
export let max = 5;
+ /** Enables interactive mode for each rating icon. */
+ export let interactive = false;
// Props (styles)
/** Provide classes to set the text color. */
@@ -32,7 +34,10 @@
export let regionIcon: CssClasses = '';
// Event Dispatcher
- const dispatch = createEventDispatcher();
+ type RatingsEvent = {
+ icon: { index: number };
+ };
+ const dispatch = createEventDispatcher();
function iconClick(index: number): void {
/** @event {{ index: number }} icon - Fires when an icons is clicked */
@@ -45,6 +50,8 @@
const cBase = 'w-full flex';
// Reactive
+ $: elemInteractive = interactive ? 'button' : 'span';
+ $: attrInteractive = interactive ? { type: 'button' } : {};
$: classesBase = `${cBase} ${text} ${fill} ${justify} ${spacing} ${$$props.class ?? ''}`;
@@ -52,11 +59,17 @@
{#each Array(max) as _, i}
{#if Math.floor(value) >= i + 1}
- iconClick(i)}>
+ iconClick(i)}>
+
+
{:else if value === i + 0.5}
- iconClick(i)}>
+ iconClick(i)}>
+
+
{:else}
- iconClick(i)}>
+ iconClick(i)}>
+
+
{/if}
{/each}
diff --git a/packages/skeleton/src/lib/components/SlideToggle/SlideToggle.svelte b/packages/skeleton/src/lib/components/SlideToggle/SlideToggle.svelte
index c1cbe7181..0210d858c 100644
--- a/packages/skeleton/src/lib/components/SlideToggle/SlideToggle.svelte
+++ b/packages/skeleton/src/lib/components/SlideToggle/SlideToggle.svelte
@@ -1,11 +1,14 @@
+
+
diff --git a/packages/skeleton/src/lib/components/Table/Table.svelte b/packages/skeleton/src/lib/components/Table/Table.svelte
index ae6a58ae3..8a251159c 100644
--- a/packages/skeleton/src/lib/components/Table/Table.svelte
+++ b/packages/skeleton/src/lib/components/Table/Table.svelte
@@ -4,9 +4,13 @@
import { tableA11y } from '../../utilities/DataTable/actions.js';
// Types
- import type { CssClasses, TableSource } from '../../index.js';
+ import type { CssClasses, SvelteEvent, TableSource } from '../../index.js';
- const dispatch = createEventDispatcher();
+ // Event Dispatcher
+ type TableEvent = {
+ selected: string[];
+ };
+ const dispatch = createEventDispatcher
();
// Props
/**
@@ -38,7 +42,7 @@
export let regionFootCell: CssClasses = '';
// Row Click Handler
- function onRowClick(event: MouseEvent | KeyboardEvent, rowIndex: number): void {
+ function onRowClick(event: SvelteEvent, rowIndex: number): void {
if (!interactive) return;
event.preventDefault();
event.stopPropagation();
@@ -49,7 +53,7 @@
}
// Row Keydown Handler
- function onRowKeydown(event: KeyboardEvent, rowIndex: number): void {
+ function onRowKeydown(event: SvelteEvent, rowIndex: number): void {
if (['Enter', 'Space'].includes(event.code)) onRowClick(event, rowIndex);
}
diff --git a/packages/skeleton/src/lib/components/TableOfContents/TableOfContents.svelte b/packages/skeleton/src/lib/components/TableOfContents/TableOfContents.svelte
index 20c0ef812..127f0d4cf 100644
--- a/packages/skeleton/src/lib/components/TableOfContents/TableOfContents.svelte
+++ b/packages/skeleton/src/lib/components/TableOfContents/TableOfContents.svelte
@@ -139,6 +139,8 @@
{label}
{#each filteredHeadingsList as headingElem}
+
+
+`}
+ />
+
Carousel Thumbnails
+
+
+ {#each unsplashIds as unsplashId, i}
+ carouselThumbnail(i)}>
+
+
+ {/each}
+
+`}
+ />
+
+
+
+
+
+
+ Multi-Column
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `}
+ />
+
+
+ Attribution: TMDB
+
+
+
+
+
diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/movies.ts b/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/movies.ts
new file mode 100644
index 000000000..53e582f83
--- /dev/null
+++ b/sites/skeleton.dev/src/routes/(inner)/elements/scroll-containers/movies.ts
@@ -0,0 +1,55 @@
+// Data and images via: https://www.themoviedb.org/
+
+interface Movie {
+ name: string;
+ imageUrl: string;
+ url: string;
+}
+
+export const movies: Movie[] = [
+ {
+ name: 'The Flash',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/rktDFPbfHfUbArZ6OOOKsXcv0Bm.jpg',
+ url: 'https://www.themoviedb.org/movie/298618-the-flash'
+ },
+ {
+ name: 'Guardians of the Galaxy Vol. 3',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/r2J02Z2OpNTctfOSN1Ydgii51I3.jpg',
+ url: 'https://www.themoviedb.org/movie/447365-guardians-of-the-galaxy-vol-3'
+ },
+ {
+ name: 'Black Panther: Wakanda Forever',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/sv1xJUazXeYqALzczSZ3O6nkH75.jpg',
+ url: 'https://www.themoviedb.org/movie/505642-black-panther-wakanda-forever'
+ },
+ {
+ name: 'Avengers: Infinity War',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg',
+ url: 'https://www.themoviedb.org/movie/299536-avengers-infinity-war'
+ },
+ {
+ name: 'Spider-Man: No Way Home',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/1g0dhYtq4irTY1GPXvft6k4YLjm.jpg',
+ url: 'https://www.themoviedb.org/movie/634649-spider-man-no-way-home'
+ },
+ {
+ name: 'The Batman',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/74xTEgt7R36Fpooo50r9T25onhq.jpg',
+ url: 'https://www.themoviedb.org/movie/414906-the-batman'
+ },
+ {
+ name: 'Iron Man',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/78lPtwv72eTNqFW9COBYI0dWDJa.jpg',
+ url: 'https://www.themoviedb.org/movie/1726-iron-man'
+ },
+ {
+ name: 'Venom: Let There Be Carnage',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/rjkmN1dniUHVYAtwuV3Tji7FsDO.jpg',
+ url: 'https://www.themoviedb.org/movie/580489-venom-let-there-be-carnage'
+ },
+ {
+ name: 'Deadpool',
+ imageUrl: 'https://www.themoviedb.org/t/p/w600_and_h900_bestv2/3E53WEZJqP6aM84D8CckXx4pIHw.jpg',
+ url: 'https://www.themoviedb.org/movie/293660-deadpool'
+ }
+];
diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte
index 8ac611f09..602f0ed5d 100644
--- a/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte
+++ b/sites/skeleton.dev/src/routes/(inner)/utilities/popups/+page.svelte
@@ -86,9 +86,9 @@
placement: 'top',
state: (e: Record) => console.log(e)
};
- const popupMiddlware: PopupSettings = {
+ const popupMiddleware: PopupSettings = {
event: 'click',
- target: 'popupMiddlware',
+ target: 'popupMiddleware',
placement: 'top',
middleware: {
offset: 24
@@ -169,7 +169,7 @@ const popupFeatured: PopupSettings = {
/>
Note the .arrow
element is optional, but will create and position an arrow automatically when available.
- Just make sure the background color amtches your popup element's background color!
+ Just make sure the background color matches your popup element's background color!
@@ -483,8 +483,8 @@ const popupState: PopupSettings = {
- Show Popup
-
+
Show Popup
+
This popup has an offset of 24 px.
@@ -493,7 +493,7 @@ const popupState: PopupSettings = {
Combobox
- The goal of Skeleton is to combine primative elements and components to build more complex UI. For example, by combining a Button,
+ The goal of Skeleton is to combine primitive elements and components to build more complex UI. For example, by combining a Button,
Popup, and ListBox you can create a highly customizable combobox.
diff --git a/sites/skeleton.dev/src/routes/home-partials/HomeHeroComponents.svelte b/sites/skeleton.dev/src/routes/home-partials/HomeHeroComponents.svelte
index 816107d63..08847f32b 100644
--- a/sites/skeleton.dev/src/routes/home-partials/HomeHeroComponents.svelte
+++ b/sites/skeleton.dev/src/routes/home-partials/HomeHeroComponents.svelte
@@ -1,4 +1,5 @@