mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-13 20:49:15 +00:00
Compare commits
1 Commits
remove-uns
...
native-cod
| Author | SHA1 | Date | |
|---|---|---|---|
|
696580a03b |
4
.github/ISSUE_TEMPLATE/config.yml
vendored
4
.github/ISSUE_TEMPLATE/config.yml
vendored
@@ -1,7 +1,7 @@
|
||||
contact_links:
|
||||
- name: Feature Requests
|
||||
url: https://github.com/shoelace-style/webawesome/discussions/categories/ideas-suggestions
|
||||
url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
|
||||
about: All requests for new features should go here.
|
||||
- name: Help & Support
|
||||
url: https://github.com/shoelace-style/webawesome/discussions/categories/ask-for-help
|
||||
url: https://github.com/shoelace-style/shoelace/discussions/categories/help
|
||||
about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.
|
||||
|
||||
@@ -1 +1,6 @@
|
||||
3.0.0
|
||||
3.0.0-beta.1
|
||||
3.0.0-beta.2
|
||||
3.0.0-beta.3
|
||||
3.0.0-beta.4
|
||||
3.0.0-beta.5
|
||||
3.0.0-beta.6
|
||||
|
||||
916
package-lock.json
generated
916
package-lock.json
generated
@@ -1595,22 +1595,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-hr9Oxj1Fa4r04dNpWr3P8QKVVsjQhqrMSUzZzf+LZcYjZNqhA3IAfPQdEh1FLVUJSiu6sgAwp3OmwBfbFgG2Xg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.23.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.23.1.tgz",
|
||||
@@ -1659,22 +1643,6 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/openharmony-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-rOREuNIQgaiR+9QuNkbkxubbp8MSO9rONmwP5nKncnWJ9v5jQ4JxFnLu4zDSRPf3x4u+2VN4pM4RdyIzDty/wQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openharmony"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.23.1",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.23.1.tgz",
|
||||
@@ -14013,7 +13981,7 @@
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@awesome.me/webawesome",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.0-beta.6",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "4.1.0",
|
||||
@@ -14028,8 +13996,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11"
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
@@ -14050,464 +14017,12 @@
|
||||
"qr-creator": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11"
|
||||
"@wc-toolkit/jsx-types": "^1.3.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
|
||||
"integrity": "sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"aix"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/android-arm": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.11.tgz",
|
||||
"integrity": "sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/android-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.11.tgz",
|
||||
"integrity": "sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.11.tgz",
|
||||
"integrity": "sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.11.tgz",
|
||||
"integrity": "sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.11.tgz",
|
||||
"integrity": "sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.11.tgz",
|
||||
"integrity": "sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.11.tgz",
|
||||
"integrity": "sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.11.tgz",
|
||||
"integrity": "sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"sunos"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.11.tgz",
|
||||
"integrity": "sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/esbuild": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.11.tgz",
|
||||
"integrity": "sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.25.11",
|
||||
"@esbuild/android-arm": "0.25.11",
|
||||
"@esbuild/android-arm64": "0.25.11",
|
||||
"@esbuild/android-x64": "0.25.11",
|
||||
"@esbuild/darwin-arm64": "0.25.11",
|
||||
"@esbuild/darwin-x64": "0.25.11",
|
||||
"@esbuild/freebsd-arm64": "0.25.11",
|
||||
"@esbuild/freebsd-x64": "0.25.11",
|
||||
"@esbuild/linux-arm": "0.25.11",
|
||||
"@esbuild/linux-arm64": "0.25.11",
|
||||
"@esbuild/linux-ia32": "0.25.11",
|
||||
"@esbuild/linux-loong64": "0.25.11",
|
||||
"@esbuild/linux-mips64el": "0.25.11",
|
||||
"@esbuild/linux-ppc64": "0.25.11",
|
||||
"@esbuild/linux-riscv64": "0.25.11",
|
||||
"@esbuild/linux-s390x": "0.25.11",
|
||||
"@esbuild/linux-x64": "0.25.11",
|
||||
"@esbuild/netbsd-arm64": "0.25.11",
|
||||
"@esbuild/netbsd-x64": "0.25.11",
|
||||
"@esbuild/openbsd-arm64": "0.25.11",
|
||||
"@esbuild/openbsd-x64": "0.25.11",
|
||||
"@esbuild/openharmony-arm64": "0.25.11",
|
||||
"@esbuild/sunos-x64": "0.25.11",
|
||||
"@esbuild/win32-arm64": "0.25.11",
|
||||
"@esbuild/win32-ia32": "0.25.11",
|
||||
"@esbuild/win32-x64": "0.25.11"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
@@ -14525,431 +14040,6 @@
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
|
||||
"integrity": "sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"aix"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/android-arm": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.11.tgz",
|
||||
"integrity": "sha512-uoa7dU+Dt3HYsethkJ1k6Z9YdcHjTrSb5NUy66ZfZaSV8hEYGD5ZHbEMXnqLFlbBflLsl89Zke7CAdDJ4JI+Gg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/android-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-9slpyFBc4FPPz48+f6jyiXOx/Y4v34TUeDDXJpZqAWQn/08lKGeD8aDp9TMn9jDz2CiEuHwfhRmGBvpnd/PWIQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/android-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-Sgiab4xBjPU1QoPEIqS3Xx+R2lezu0LKIEcYe6pftr56PqPygbB7+szVnzoShbx64MUupqoE0KyRlN7gezbl8g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/darwin-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-VekY0PBCukppoQrycFxUqkCojnTQhdec0vevUL/EDOCnXd9LKWqD/bHwMPzigIJXPhC59Vd1WFIL57SKs2mg4w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/darwin-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-+hfp3yfBalNEpTGp9loYgbknjR695HkqtY3d3/JjSRUyPg/xd6q+mQqIb5qdywnDxRZykIHs3axEqU6l1+oWEQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/freebsd-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-CmKjrnayyTJF2eVuO//uSjl/K3KsMIeYeyN7FyDBjsR3lnSJHaXlVoAK8DZa7lXWChbuOk7NjAc7ygAwrnPBhA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/freebsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-Dyq+5oscTJvMaYPvW3x3FLpi2+gSZTCE/1ffdwuM6G1ARang/mb3jvjxs0mw6n3Lsw84ocfo9CrNMqc5lTfGOw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-arm": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.11.tgz",
|
||||
"integrity": "sha512-TBMv6B4kCfrGJ8cUPo7vd6NECZH/8hPpBHHlYI3qzoYFvWu2AdTvZNuU/7hsbKWqu/COU7NIK12dHAAqBLLXgw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-Qr8AzcplUhGvdyUF08A1kHU3Vr2O88xxP0Tm8GcdVOUm25XYcMPp2YqSVHbLuXzYQMf9Bh/iKx7YPqECs6ffLA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-ia32": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.11.tgz",
|
||||
"integrity": "sha512-TmnJg8BMGPehs5JKrCLqyWTVAvielc615jbkOirATQvWWB1NMXY77oLMzsUjRLa0+ngecEmDGqt5jiDC6bfvOw==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-loong64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.11.tgz",
|
||||
"integrity": "sha512-DIGXL2+gvDaXlaq8xruNXUJdT5tF+SBbJQKbWy/0J7OhU8gOHOzKmGIlfTTl6nHaCOoipxQbuJi7O++ldrxgMw==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-mips64el": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.11.tgz",
|
||||
"integrity": "sha512-Osx1nALUJu4pU43o9OyjSCXokFkFbyzjXb6VhGIJZQ5JZi8ylCQ9/LFagolPsHtgw6himDSyb5ETSfmp4rpiKQ==",
|
||||
"cpu": [
|
||||
"mips64el"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-ppc64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.11.tgz",
|
||||
"integrity": "sha512-nbLFgsQQEsBa8XSgSTSlrnBSrpoWh7ioFDUmwo158gIm5NNP+17IYmNWzaIzWmgCxq56vfr34xGkOcZ7jX6CPw==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-riscv64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.11.tgz",
|
||||
"integrity": "sha512-HfyAmqZi9uBAbgKYP1yGuI7tSREXwIb438q0nqvlpxAOs3XnZ8RsisRfmVsgV486NdjD7Mw2UrFSw51lzUk1ww==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-s390x": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.11.tgz",
|
||||
"integrity": "sha512-HjLqVgSSYnVXRisyfmzsH6mXqyvj0SA7pG5g+9W7ESgwA70AXYNpfKBqh1KbTxmQVaYxpzA/SvlB9oclGPbApw==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/linux-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-HSFAT4+WYjIhrHxKBwGmOOSpphjYkcswF449j6EjsjbinTZbp8PJtjsVK1XFJStdzXdy/jaddAep2FGY+wyFAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/netbsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-u7tKA+qbzBydyj0vgpu+5h5AeudxOAGncb8N6C9Kh1N4n7wU1Xw1JDApsRjpShRpXRQlJLb9wY28ELpwdPcZ7A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"netbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/openbsd-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-Qq6YHhayieor3DxFOoYM1q0q1uMFYb7cSpLD2qzDSvK1NAvqFi8Xgivv0cFC6J+hWVw2teCYltyy9/m/14ryHg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/openbsd-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-CN+7c++kkbrckTOz5hrehxWN7uIhFFlmS/hqziSFVWpAzpWrQoAG4chH+nN3Be+Kzv/uuo7zhX716x3Sn2Jduw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openbsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/sunos-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-nq2xdYaWxyg9DcIyXkZhcYulC6pQ2FuCgem3LI92IwMgIZ69KHeY8T4Y88pcwoLIjbed8n36CyKoYRDygNSGhA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"sunos"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/win32-arm64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.11.tgz",
|
||||
"integrity": "sha512-3XxECOWJq1qMZ3MN8srCJ/QfoLpL+VaxD/WfNRm1O3B4+AZ/BnLVgFbUV3eiRYDMXetciH16dwPbbHqwe1uU0Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/win32-ia32": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.11.tgz",
|
||||
"integrity": "sha512-3ukss6gb9XZ8TlRyJlgLn17ecsK4NSQTmdIXRASVsiS2sQ6zPPZklNJT5GR5tE/MUarymmy8kCEf5xPCNCqVOA==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/win32-x64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.11.tgz",
|
||||
"integrity": "sha512-D7Hpz6A2L4hzsRpPaCYkQnGOotdUpDzSGRIv9I+1ITdHROSFUWW95ZPZWQmGka1Fg7W3zFJowyn9WGwMJ0+KPA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/esbuild": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.11.tgz",
|
||||
"integrity": "sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"esbuild": "bin/esbuild"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@esbuild/aix-ppc64": "0.25.11",
|
||||
"@esbuild/android-arm": "0.25.11",
|
||||
"@esbuild/android-arm64": "0.25.11",
|
||||
"@esbuild/android-x64": "0.25.11",
|
||||
"@esbuild/darwin-arm64": "0.25.11",
|
||||
"@esbuild/darwin-x64": "0.25.11",
|
||||
"@esbuild/freebsd-arm64": "0.25.11",
|
||||
"@esbuild/freebsd-x64": "0.25.11",
|
||||
"@esbuild/linux-arm": "0.25.11",
|
||||
"@esbuild/linux-arm64": "0.25.11",
|
||||
"@esbuild/linux-ia32": "0.25.11",
|
||||
"@esbuild/linux-loong64": "0.25.11",
|
||||
"@esbuild/linux-mips64el": "0.25.11",
|
||||
"@esbuild/linux-ppc64": "0.25.11",
|
||||
"@esbuild/linux-riscv64": "0.25.11",
|
||||
"@esbuild/linux-s390x": "0.25.11",
|
||||
"@esbuild/linux-x64": "0.25.11",
|
||||
"@esbuild/netbsd-arm64": "0.25.11",
|
||||
"@esbuild/netbsd-x64": "0.25.11",
|
||||
"@esbuild/openbsd-arm64": "0.25.11",
|
||||
"@esbuild/openbsd-x64": "0.25.11",
|
||||
"@esbuild/openharmony-arm64": "0.25.11",
|
||||
"@esbuild/sunos-x64": "0.25.11",
|
||||
"@esbuild/win32-arm64": "0.25.11",
|
||||
"@esbuild/win32-ia32": "0.25.11",
|
||||
"@esbuild/win32-x64": "0.25.11"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
|
||||
@@ -94,16 +94,6 @@ export default async function (eleventyConfig) {
|
||||
flashes: '',
|
||||
});
|
||||
|
||||
// Site metadata for social sharing (Open Graph, canonical URLs, etc.)
|
||||
const siteMetadata = {
|
||||
url: 'https://webawesome.com',
|
||||
name: 'Web Awesome',
|
||||
description: 'Build better with Web Awesome, the open source library of web components from Font Awesome.',
|
||||
image: 'https://webawesome.com/assets/images/open-graph/default.png',
|
||||
};
|
||||
|
||||
eleventyConfig.addGlobalData('siteMetadata', siteMetadata);
|
||||
|
||||
// Template filters - {{ content | filter }}
|
||||
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
|
||||
eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
|
||||
@@ -182,24 +172,6 @@ export default async function (eleventyConfig) {
|
||||
// Attach lastUpdatedISO to page data so templates can use {{ lastUpdatedISO }} directly
|
||||
eleventyConfig.addGlobalData('eleventyComputed', {
|
||||
lastUpdatedISO: data => getLastModifiedISO(data.page?.inputPath, data.lastUpdated),
|
||||
// Page title with smart + default site name formatting
|
||||
pageTitle: data => {
|
||||
const title = data.title || siteMetadata.name;
|
||||
return title !== siteMetadata.name ? `${title} | ${siteMetadata.name}` : title;
|
||||
},
|
||||
// Open Graph title with smart + default site name formatting
|
||||
ogTitle: data => {
|
||||
const ogTitle = data.ogTitle || data.title || siteMetadata.name;
|
||||
return ogTitle !== siteMetadata.name ? `${ogTitle} | ${siteMetadata.name}` : ogTitle;
|
||||
},
|
||||
ogDescription: data => data.ogDescription || data.description,
|
||||
ogImage: data => data.ogImage || siteMetadata.image,
|
||||
ogUrl: data => {
|
||||
if (data.ogUrl) return data.ogUrl;
|
||||
const url = data.page?.url || '';
|
||||
return url ? `${siteMetadata.url}${url}` : siteMetadata.url;
|
||||
},
|
||||
ogType: data => data.ogType || 'website',
|
||||
});
|
||||
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
|
||||
// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
|
||||
@@ -255,11 +227,7 @@ export default async function (eleventyConfig) {
|
||||
|
||||
// Shortcodes - {% shortCode arg1, arg2 %}
|
||||
eleventyConfig.addShortcode('cdnUrl', location => {
|
||||
// We use WA (free) via the public CDN for CodePen examples
|
||||
return (
|
||||
`https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${packageData.version}/dist-cdn/` +
|
||||
(location || '').replace(/^\//, '')
|
||||
);
|
||||
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + (location || '').replace(/^\//, '');
|
||||
});
|
||||
|
||||
// Turns `{% server "foo" %} into `{{ server.foo | safe }}` when the WEBAWESOME_SERVER variable is set to "true"
|
||||
@@ -378,9 +346,6 @@ export default async function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy(glob);
|
||||
}
|
||||
|
||||
// Passthrough copy for manifest.json (PWA manifest file)
|
||||
eleventyConfig.addPassthroughCopy('manifest.json');
|
||||
|
||||
// // SSR plugin
|
||||
// if (!isDev) {
|
||||
// //
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
{% raw %}
|
||||
{%- if not currentUser.hasPro -%}
|
||||
<div slot="banner" class="banner-wa-launch wa-dark">
|
||||
<div class="banner-content wa-split">
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-icon name="badge-percent" class="banner-icon"></wa-icon>
|
||||
<p class="wa-body-s">
|
||||
<strong style="margin-inline-end: var(--wa-space-2xs)">Web Awesome is here!</strong>
|
||||
Celebrate with <span class="appearance-underlined variant-drawn">20% off</span> on a Web Awesome Pro plan… <span class="appearance-underlined variant-drawn">for life</span>!
|
||||
</p>
|
||||
</div>
|
||||
<wa-button appearance="outlined" variant="brand" size="small" href="/purchase" class="brand-font">
|
||||
<wa-icon slot="start" variant="regular" name="rocket-launch"></wa-icon>
|
||||
Get Pro + Save 20%
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
{% endraw %}
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}" class="wa-cloak">
|
||||
<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}" class="wa-cloak">
|
||||
<head>
|
||||
{% include 'head.njk' %}
|
||||
<meta name="theme-color" content="#f36944">
|
||||
@@ -27,11 +27,7 @@
|
||||
</script>
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }} page-{{ pageClass or page.fileSlug or 'home' }}{{ ' page-wide' if wide }}">
|
||||
{% if hasBanner == undefined %}
|
||||
{% set hasBanner = true %}
|
||||
{% endif %}
|
||||
|
||||
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180, 'disable-sticky': 'banner' } %}
|
||||
{% set defaultWaPageAttributes = defaultWaPageAttributes or { view: 'desktop', 'disable-navigation-toggle': true, 'mobile-breakpoint': 1180 } %}
|
||||
{% set waPageAttributes = waPageAttributes or {} %}
|
||||
{% set mergedWaPageAttributes = defaultWaPageAttributes | merge(waPageAttributes) %}
|
||||
<wa-page
|
||||
@@ -41,13 +37,6 @@
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
>
|
||||
{% block pageBanner %}
|
||||
{% if hasBanner %}
|
||||
{#- WA Launch Banner -#}
|
||||
{% include "_banner-wa-launch.njk" ignore missing %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block pageHeader %}
|
||||
<header slot="header" class="wa-split">
|
||||
{# Nav toggle #}
|
||||
|
||||
@@ -3,17 +3,7 @@
|
||||
<meta name="description" content="{{ description }}">
|
||||
{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<title>{{ pageTitle }}</title>
|
||||
|
||||
{# Skip OG tags for unlisted/noindex pages to prevent social sharing #}
|
||||
{% if not (noindex or unlisted) %}
|
||||
<meta property="og:type" content="{{ ogType }}" />
|
||||
<meta property="og:url" content="{{ ogUrl }}" />
|
||||
<meta property="og:title" content="{{ ogTitle }}" />
|
||||
<meta property="og:description" content="{{ ogDescription }}" />
|
||||
<meta property="og:image" content="{{ ogImage }}" />
|
||||
<meta property="og:site_name" content="{{ siteMetadata.name }}" />
|
||||
{% endif %}
|
||||
<title>{{ title }}</title>
|
||||
|
||||
{# Dark mode #}
|
||||
<script>
|
||||
@@ -25,11 +15,8 @@
|
||||
document.documentElement.classList.toggle('wa-dark', isDark);
|
||||
</script>
|
||||
|
||||
<link rel="manifest" href="/manifest.json" />
|
||||
<link rel="icon" href="/assets/images/app-icons/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/assets/images/app-icons/icon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icons/apple-touch-icon.png">
|
||||
|
||||
<link rel="icon" href="/assets/images/webawesome-logo.svg" />
|
||||
<link rel="apple-touch-icon" href="/assets/images/app-icon.png">
|
||||
<link rel="preconnect" href="https://cdn.jsdelivr.net">
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
|
||||
@@ -38,12 +25,12 @@
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
|
||||
<script type="module">
|
||||
document.addEventListener('wa-discovery-complete', loadLayout)
|
||||
document.addEventListener("wa-discovery-complete", loadLayout)
|
||||
function loadLayout () {
|
||||
if (!customElements.get('wa-page')) {
|
||||
import('https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/page/page.js')
|
||||
if (!customElements.get("wa-layout")) {
|
||||
import("{% cdnUrl 'components/page/page.js' %}")
|
||||
.catch((e) => {
|
||||
// known errors with dual registration. This is only a thing in the free repo.
|
||||
// known errors with dual registration. This is only a thing in the free repo.
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
{# Resources #}
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/resources/support">Help & Support</a></li>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help & Support</a></li>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
|
||||
<li>
|
||||
<span class="wa-split">
|
||||
@@ -24,13 +24,12 @@
|
||||
{{ proBadge() }}
|
||||
</span>
|
||||
</li>
|
||||
<li><a href="/docs/resources/community">Community</a></li>
|
||||
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/docs/resources/browser-support">Browser Support</a></li>
|
||||
<li><a href="/docs/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<!-- Components -->
|
||||
@@ -365,6 +364,9 @@
|
||||
<li>
|
||||
<a href="/docs/patterns/layouts/ecommerce/">Ecommerce</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/layouts/app/">App</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/layouts/blog/">Blog</a>
|
||||
</li>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-fa-kit-code="38c11e3f20" data-version="{{ package.version }}">
|
||||
<html lang="en" data-fa-kit-code="38c11e3f20" data-cdn-url="{% cdnUrl %}">
|
||||
<head>
|
||||
{% include 'head.njk' %}
|
||||
{% block head %}{% endblock %}
|
||||
|
||||
@@ -211,12 +211,7 @@
|
||||
<tr>
|
||||
<td class="table-name"><code>{{ state.name }}</code></td>
|
||||
<td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
|
||||
<td class="table-selector">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<code>:state({{ state.name }})</code>
|
||||
<wa-copy-button value=":state({{ state.name }})"></wa-copy-button>
|
||||
</span>
|
||||
</td>
|
||||
<td class="table-selector"><code>:state({{ state.name }})</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -235,7 +230,6 @@
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
<th class="table-selector">CSS selector</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -243,12 +237,6 @@
|
||||
<tr>
|
||||
<td class="table-name"><code>{{ cssPart.name }}</code></td>
|
||||
<td class="table-description">{{ cssPart.description | inlineMarkdown | safe }}</td>
|
||||
<td class="table-selector">
|
||||
<span class="wa-cluster wa-gap-3xs">
|
||||
<code>::part({{ cssPart.name }})</code>
|
||||
<wa-copy-button value="::part({{ cssPart.name }})"></wa-copy-button>
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
@@ -273,7 +261,7 @@
|
||||
{# Importing #}
|
||||
<h2>Importing</h2>
|
||||
<p>
|
||||
Autoloading components via <a href="/docs/#using-a-project">projects</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
The <a href="/docs/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
</p>
|
||||
|
||||
|
||||
@@ -285,8 +273,10 @@
|
||||
<wa-tab panel="react">React</wa-tab>
|
||||
<wa-tab-panel name="cdn">
|
||||
<p>
|
||||
Let your project code do the work! <a href="/signup">Sign up for free</a> to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.
|
||||
To manually import this component from the CDN, use the following code.
|
||||
</p>
|
||||
|
||||
<pre><code class="language-js">import '{% cdnUrl componentPath %}';</code></pre>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="npm">
|
||||
<p>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 943 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 744 B |
Binary file not shown.
|
Before Width: | Height: | Size: 965 B |
Binary file not shown.
|
Before Width: | Height: | Size: 5.3 KiB |
@@ -1 +0,0 @@
|
||||
<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m18.608 5.8c0 1.04658-.6184 1.94874-1.5097 2.36103l5.3017 4.63897 5.2196-1.0439c-.2647-.3858-.4196-.8529-.4196-1.3561 0-1.32548 1.0745-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 1.3085-1.0471 2.3724-2.3491 2.3995l-5.7878 12.3578c-.5267 1.1245-1.6562 1.8427-2.8979 1.8427h-9.9303c-1.2417 0-2.37129-.7182-2.89794-1.8427l-5.78784-12.3578c-1.30199-.0271-2.34912-1.091-2.34912-2.3995 0-1.32548 1.07452-2.4 2.4-2.4s2.4 1.07452 2.4 2.4c0 .5032-.15488.9703-.41957 1.3561l5.21957 1.0439 5.3072-4.64383c-.8857-.4145-1.4992-1.31368-1.4992-2.35617 0-1.43594 1.1641-2.6 2.6-2.6s2.6 1.16406 2.6 2.6z" fill="#f36944" fill-rule="evenodd"/></svg>
|
||||
|
Before Width: | Height: | Size: 744 B |
Binary file not shown.
|
Before Width: | Height: | Size: 235 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.63 3.625C11.63 4.27911 11.2435 4.84296 10.6865 5.10064L14 8L17.2622 7.34755C17.0968 7.10642 17 6.81452 17 6.5C17 5.67157 17.6716 5 18.5 5C19.3284 5 20 5.67157 20 6.5C20 7.31157 19.3555 7.9726 18.5504 7.99917L15.0307 15.8207C14.7077 16.5384 13.9939 17 13.2068 17H6.79317C6.00615 17 5.29229 16.5384 4.96933 15.8207L1.44963 7.99917C0.64452 7.9726 0 7.31157 0 6.5C0 5.67157 0.671573 5 1.5 5C2.32843 5 3 5.67157 3 6.5C3 6.81452 2.9032 7.10642 2.73777 7.34755L6 8L9.31702 5.09761C8.76346 4.83855 8.38 4.27656 8.38 3.625C8.38 2.72754 9.10754 2 10.005 2C10.9025 2 11.63 2.72754 11.63 3.625Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 722 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 742 B |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
@@ -1,6 +1,3 @@
|
||||
const version = document.documentElement.getAttribute('data-version') || '';
|
||||
const CDN_URL = `https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@${version}/dist-cdn/`;
|
||||
|
||||
//
|
||||
// Resizing previews
|
||||
//
|
||||
@@ -57,9 +54,10 @@ document.addEventListener('click', event => {
|
||||
if (pen) {
|
||||
const codeExample = pen.closest('.code-example');
|
||||
const code = codeExample.querySelector('code');
|
||||
const cdnUrl = document.documentElement.dataset.cdnUrl;
|
||||
const html =
|
||||
`<script data-fa-kit-code="38c11e3f20" type="module" src="${CDN_URL}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${CDN_URL}styles/webawesome.css">\n\n` +
|
||||
`<script data-fa-kit-code="38c11e3f20" type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n padding: 2rem !important;\n}';
|
||||
const js = '';
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
// Search data
|
||||
const version = document.documentElement.getAttribute('data-version') || '';
|
||||
const res = await Promise.all([import('https://cdn.jsdelivr.net/npm/lunr/+esm'), fetch(`/search.json?v=${version}`)]);
|
||||
const res = await Promise.all([import('https://cdn.jsdelivr.net/npm/lunr/+esm'), fetch('/search.json')]);
|
||||
const lunr = res[0].default;
|
||||
const searchData = await res[1].json();
|
||||
const searchIndex = lunr.Index.load(searchData.searchIndex);
|
||||
|
||||
@@ -27,43 +27,6 @@ body.theme-transitioning {
|
||||
transition: opacity 200ms ease-out;
|
||||
}
|
||||
|
||||
/* banner */
|
||||
wa-page > [slot='banner'] {
|
||||
padding: var(--wa-space-0);
|
||||
|
||||
.banner-content {
|
||||
/* match docs header padding-inline by default */
|
||||
padding-inline: var(--wa-space-xl);
|
||||
padding-block: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&.banner-wa-launch {
|
||||
/* custom brand colors carrried over from theme-site for the banner */
|
||||
--wa-color-brand-95: #fef0ec;
|
||||
--wa-color-brand-90: #fce0d8;
|
||||
--wa-color-brand-80: #f8bcac;
|
||||
--wa-color-brand-70: #fa9378;
|
||||
--wa-color-brand-60: #f46a45;
|
||||
--wa-color-brand-50: #cb4b27;
|
||||
--wa-color-brand-40: #9d371a;
|
||||
--wa-color-brand-30: #7c2a13;
|
||||
--wa-color-brand-20: #5d1d0b;
|
||||
--wa-color-brand-10: #3b0f05;
|
||||
--wa-color-brand-05: #270802;
|
||||
--wa-color-brand: var(--wa-color-brand-60);
|
||||
--wa-color-brand-on: var(--wa-color-brand-10);
|
||||
|
||||
.banner-icon {
|
||||
color: var(--wa-color-brand-fill-loud);
|
||||
font-size: var(--wa-font-size-xl);
|
||||
}
|
||||
|
||||
.appearance-underlined.variant-drawn {
|
||||
--underline-color: var(--wa-color-brand);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Header */
|
||||
wa-page::part(header) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
@@ -665,10 +628,6 @@ wa-scroller:has(.component-table) {
|
||||
min-width: var(--line-length-xs);
|
||||
}
|
||||
|
||||
.table-selector .wa-cluster {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.table-reflect {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -127,28 +127,6 @@
|
||||
|
||||
/* #region funsies + cosmetics */
|
||||
|
||||
/* decorative underline emphasis */
|
||||
.appearance-underlined.variant-drawn {
|
||||
--underline-color: currentColor;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
padding-bottom: 0.4em;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 0.4em;
|
||||
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpath d='M0,12 Q50,8 100,12' stroke='black' stroke-width='4' fill='none'/%3E%3C/svg%3E");
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: 100% auto;
|
||||
mask-position: 0 100%;
|
||||
background-color: var(--underline-color);
|
||||
}
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.background-grid {
|
||||
--grid-spacing: var(--wa-space-2xl);
|
||||
|
||||
@@ -66,71 +66,14 @@ layout: page
|
||||
</div>
|
||||
|
||||
<h2>Using This Palette</h2>
|
||||
|
||||
<div id="import-code">
|
||||
{% for palette in themer.palettes %}
|
||||
<div class="palette-instructions" data-palette="{{ palette.name | lower }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="cdn">
|
||||
{% markdown %}
|
||||
{% if palette.isPro %}
|
||||
<wa-callout variant="neutral" size="small">
|
||||
<wa-icon name="info-circle" variant="regular"></wa-icon>
|
||||
This palette can only be used on teams with a Pro subscription.
|
||||
</wa-callout>
|
||||
<br />
|
||||
{% else %}
|
||||
**For projects on Free teams:**
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Find **Color Palette**. Select <wa-icon name="swatchbook" variant="regular"></wa-icon> **{{ palette.name | capitalize }}**.
|
||||
3. Save your theme to immediately update anywhere you're using your project.
|
||||
{% endif %}
|
||||
|
||||
**For projects on Pro teams:**
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Press <wa-icon name="paintbrush" variant="regular"></wa-icon> **Edit Your Theme** to open the Theme Builder.
|
||||
3. Open **Colors** and select **{{ palette.name | capitalize }}**.
|
||||
4. Save your theme to immediately update anywhere you're using your project.
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
{% markdown %}
|
||||
To use this theme, import the theme's stylesheet:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}';
|
||||
```
|
||||
|
||||
Then apply the following class to the `<html>` element:
|
||||
|
||||
```html
|
||||
<html class="wa-palette-{{ palette.name | lower }}">
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
{% markdown %}
|
||||
To use this theme, include the theme's stylesheet:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ palette.filename }}" />
|
||||
```
|
||||
|
||||
Then apply the following class to the `<html>` element:
|
||||
|
||||
```html
|
||||
<html class="wa-palette-{{ palette.name | lower }}">
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
<div class="palette-instructions" data-palette="{{ palette.name | lower }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<p>
|
||||
To import this palette, set <code><html class="wa-palette-{{ palette.name | lower }}"></code> and import the following stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="{% cdnUrl %}styles/color/palettes/{{ palette.filename }}" /></code></pre>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -178,7 +121,6 @@ Then apply the following class to the `<html>` element:
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&::part(form-control-label) {
|
||||
@@ -191,11 +133,7 @@ Then apply the following class to the `<html>` element:
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.palette-card {
|
||||
|
||||
@@ -100,20 +100,19 @@ If using SSR, you need to also use the `with-media` attribute to add a media sec
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
<wa-card class="card-media">
|
||||
<div slot="media" class="wa-frame:landscape">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
alt="A kitten walks towards camera on top of pallet."
|
||||
/>
|
||||
</div>
|
||||
This card has an image of a kitten walking along a pallet.
|
||||
<img
|
||||
slot="media"
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
alt="A kitten walks towards camera on top of pallet."
|
||||
/>
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
</wa-card>
|
||||
<wa-card class="card-media">
|
||||
<video slot="media" controls>
|
||||
<source src="https://uploads.webawesome.com/dog-with-glasses.mp4" />
|
||||
<p>Your browser doesn't support HTML video</p>
|
||||
</video>
|
||||
This card has a video of a dog wearing shades.
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
</wa-card>
|
||||
</div>
|
||||
|
||||
@@ -154,10 +153,10 @@ Use the `appearance` attribute to change the card's visual appearance.
|
||||
### Orientation
|
||||
|
||||
Set the `orientation` attribute to `horizontal` to create a card with a horizontal, side-by-side layout. Make sure to set a width or maximum width for the media slot. Horizontal cards do not currently contain the header and footer slots.
|
||||
|
||||
:::info
|
||||
<wa-callout>
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
The `actions` slot is only available for the horizontal orientation
|
||||
:::
|
||||
</wa-callout>
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid">
|
||||
@@ -167,7 +166,7 @@ The `actions` slot is only available for the horizontal orientation
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
This card has a horizontal orientation with media, body, and actions arranged side-by-side.
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
<wa-button slot="actions" variant="neutral" appearance="plain"
|
||||
><wa-icon name="ellipsis" label="actions"></wa-icon
|
||||
></wa-button>
|
||||
|
||||
@@ -19,7 +19,7 @@ The included content will be inserted into the `<wa-include>` element's default
|
||||
|
||||
When an include file loads successfully, the `wa-load` event will be emitted. You can listen for this event to add custom loading logic to your includes.
|
||||
|
||||
If the request fails, the `wa-include-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
|
||||
If the request fails, the `wa-error` event will be emitted. In this case, `event.detail.status` will contain the resulting HTTP status code of the request, e.g. 404 (not found).
|
||||
|
||||
```html
|
||||
<wa-include src="https://shoelace.style/assets/examples/include.html"></wa-include>
|
||||
@@ -33,7 +33,7 @@ If the request fails, the `wa-include-error` event will be emitted. In this case
|
||||
}
|
||||
});
|
||||
|
||||
include.addEventListener('wa-include-error', event => {
|
||||
include.addEventListener('wa-error', event => {
|
||||
if (event.eventPhase === Event.AT_TARGET) {
|
||||
console.log('Error', event.detail.status);
|
||||
}
|
||||
|
||||
@@ -10,32 +10,27 @@ You can customize the look and feel of Web Awesome at a high level with themes.
|
||||
|
||||
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
|
||||
|
||||
{% raw %}
|
||||
<p>
|
||||
To use a pre-built theme {%- if currentUser.hasPro -%} or build your own{%- endif -%},
|
||||
{%- if not session.isLoggedIn -%}
|
||||
<a href="/signup">sign up</a> or <a href="/login">log in</a> to create a project.
|
||||
{%- else -%}
|
||||
head over to <a href="/teams">your teams</a> and open up the project you'd like to use.
|
||||
{%- endif -%}
|
||||
In your project's <wa-icon name="gear" variant="regular"></wa-icon> <strong>Settings</strong>,
|
||||
{%- if not currentUser.hasPro -%}
|
||||
select a <wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>Theme</strong> and a <wa-icon name="swatchbook" variant="regular"></wa-icon> <strong>Color Palette</strong> to use, save your changes, and bask in the glory of your new theme.
|
||||
{%- else -%}
|
||||
<wa-icon name="paintbrush" variant="regular"></wa-icon> <strong>Edit Your Theme</strong> to open the Theme Builder and select a pre-built theme or customize your colors, fonts, icons, and more.
|
||||
{%- endif -%}
|
||||
</p>
|
||||
{% endraw %}
|
||||
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme:
|
||||
|
||||
For even more customizations, you can off-road and override any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply style any design token in your own stylesheet by scoping your styles to `:root` and the class for the relevant color scheme (if needed). Here's an example that uses tinted surface colors in light mode:
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
|
||||
```
|
||||
|
||||
You can customize any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:root`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
|
||||
|
||||
```css
|
||||
:root,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-surface-raised: var(--wa-color-neutral-95);
|
||||
--wa-color-surface-default: var(--wa-color-neutral-90);
|
||||
--wa-color-surface-lowered: var(--wa-color-neutral-80);
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-purple-95);
|
||||
--wa-color-brand-fill-normal: var(--wa-color-purple-90);
|
||||
--wa-color-brand-fill-loud: var(--wa-color-purple-50);
|
||||
--wa-color-brand-border-quiet: var(--wa-color-purple-90);
|
||||
--wa-color-brand-border-normal: var(--wa-color-purple-80);
|
||||
--wa-color-brand-border-loud: var(--wa-color-purple-60);
|
||||
--wa-color-brand-on-quiet: var(--wa-color-purple-40);
|
||||
--wa-color-brand-on-normal: var(--wa-color-purple-30);
|
||||
--wa-color-brand-on-loud: white;
|
||||
}
|
||||
```
|
||||
|
||||
@@ -160,4 +155,4 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
|
||||
color: lavenderblush;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
```
|
||||
@@ -16,8 +16,8 @@ SSR in Web Awesome is experimental! There are some known bugs and timing issues.
|
||||
If you're using the `webawesome.loader.js` file which automatically loads, make sure to change it to `webawesome.ssr-loader.js`.
|
||||
|
||||
```diff
|
||||
- <script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
+ <script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
- <script type="module" src="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/webawesome.loader.js"></script>
|
||||
+ <script type="module" src="https://early.webawesome.com/webawesome@3.0.0-alpha.2/dist/webawesome.ssr-loader.js"></script>
|
||||
```
|
||||
|
||||
If you're using a bundler, make sure it comes _before_ any components are imported.
|
||||
@@ -43,10 +43,7 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
|
||||
|
||||
eleventyConfig.addPlugin(litPlugin, {
|
||||
mode: 'worker',
|
||||
componentModules: [
|
||||
'@awesome.me/webawesome/dist/components/button/button.js',
|
||||
'@awesome.me/webawesome/dist/components/input/input.js',
|
||||
],
|
||||
componentModules: ['@awesome.me/webawesome/dist/components/button/button.js', '@awesome.me/webawesome/dist/components/input/input.js'],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -117,4 +114,4 @@ Here are some known issues and things we're still working on.
|
||||
- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
|
||||
- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
|
||||
- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
@@ -12,27 +12,42 @@ Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Using a Project
|
||||
## Quick Start (Autoloading via CDN)
|
||||
|
||||
A project gives you your own, personal CDN to use Web Awesome on your site. Each project uses a single line of code to install your preferred version, theme, Font Awesome kit...the works! And, when you update your project's settings, your project code pulls in all of the right stuff automatically — no need to update your own code or redeploy your site.
|
||||
To get everything included in Web Awesome, add the following code to the `<head>` of your site:
|
||||
|
||||
One line of code from us. The entire Web Awesome library for you.
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
|
||||
```
|
||||
|
||||
To use a project:
|
||||
This snippet adds:
|
||||
|
||||
{% raw %}
|
||||
<ol>
|
||||
<li>
|
||||
{% if not session.isLoggedIn %}
|
||||
<a href="/signup">Sign up</a> or <a href="/login">log in</a> to create a project.
|
||||
{% else %}
|
||||
Head over to <a href="/teams">your favorite team</a> and open up the project you'd like to use.
|
||||
{% endif %}
|
||||
</li>
|
||||
<li>Copy and paste your unique project code into the <code><head></code> of each page on your site.</li>
|
||||
<li><a href="/docs/usage">Start using Web Awesome!</a></li>
|
||||
</ol>
|
||||
{% endraw %}
|
||||
- **Web Awesome styles**, a collection of stylesheets including essential default theme styles, optional [styles for native elements](/docs/utilities/native) and optional [utility classes](/docs/utilities)
|
||||
- **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
|
||||
|
||||
Now you can [start using Web Awesome!](/docs/usage)
|
||||
|
||||
---
|
||||
|
||||
## Using Font Awesome Kit Codes
|
||||
|
||||
Font Awesome users can provide their kit code to unlock premium icon packs. You can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '{% cdnUrl 'webawesome.loader.js' %}';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
|
||||
:::info
|
||||
Not a Font Awesome user yet? [Learn more about premium icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
@@ -48,9 +63,31 @@ To use a project:
|
||||
{% endraw %}
|
||||
</div>
|
||||
|
||||
## 🛠️ Advanced Setup
|
||||
## Advanced Setup
|
||||
|
||||
Projects are our favorite way to use Web Awesome, but different environments (or your own preferences!) may require different installation methods. If you're self-hosting Web Awesome or using npm, refer to the instructions in this section.
|
||||
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
|
||||
|
||||
### Cherry Picking from CDN
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. Additionally, you must include the default theme (`styles/themes/default.css`) to style any imported components. To use a different theme, include your preferred theme _in addition to_ the default theme.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
|
||||
<script type="module">
|
||||
import '{% cdnUrl 'components/button/button.js' %}';
|
||||
|
||||
// <wa-button> is ready to use!
|
||||
</script>
|
||||
```
|
||||
|
||||
You can copy and paste the code to import a component from the "Importing" section of the component's documentation. Note that some components have dependencies that are automatically imported when you cherry pick. If a component has dependencies, they will be listed in the "Dependencies" section of its docs.
|
||||
|
||||
:::warning
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
### Installing via npm
|
||||
|
||||
@@ -79,48 +116,11 @@ import '@awesome.me/webawesome/dist/components/input/input.js';
|
||||
|
||||
Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
|
||||
|
||||
|
||||
### The Difference Between `/dist` & `/dist-cdn`
|
||||
|
||||
If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
|
||||
|
||||
```
|
||||
dist/
|
||||
dist-cdn/
|
||||
```
|
||||
|
||||
The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
|
||||
|
||||
Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
|
||||
|
||||
### Referencing Necessary Styles
|
||||
|
||||
If you're self-hosting Web Awesome, you'll need to set up your pages to reference any necessary styles. You can do so by referencing `webawesome.css`, or you can pick and choose specific stylesheets you'd like to use.
|
||||
|
||||
```html
|
||||
<!-- Option 1: use all Web Awesome styles -->
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
|
||||
|
||||
<!-- Option 2: pick and choose styles -->
|
||||
|
||||
<!-- theme (required) -->
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
|
||||
<!-- native styles (optional) -->
|
||||
<link rel="stylesheet" href="/dist/styles/native.css" />
|
||||
|
||||
<!-- CSS utilities (optional) -->
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
```
|
||||
|
||||
If you choose to use a theme other than the default theme, be sure to add the corresponding class (e.g. `.wa-theme-awesome`) to your `<html>` element so that the class is applied.
|
||||
|
||||
### Setting the Base Path
|
||||
|
||||
Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
|
||||
|
||||
==If you're using a Web Awesome project, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
|
||||
==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-webawesome attribute -->
|
||||
@@ -153,26 +153,18 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
</script>
|
||||
```
|
||||
|
||||
### Using Font Awesome Pro and Pro+
|
||||
### The Difference Between `/dist` & `/dist-cdn`
|
||||
|
||||
Font Awesome users can provide their kit code to unlock Pro and Pro+ icon packs. If you're using a project, simply add your Font Awesome Kit Code in your project's settings, and boom! Done.
|
||||
If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
|
||||
|
||||
If you're using Web Awesome through other methods like npm, you can provide yours by adding the `data-fa-kit-code` attribute to any element on the page, or by calling the `setKitCode()` method.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-fa-kit-code attribute -->
|
||||
<script src="bundle.js" data-fa-kit-code="abc123"></script>
|
||||
|
||||
<!-- Option 2: the setKitCode() method -->
|
||||
<script type="module">
|
||||
import { setKitCode } from '{% cdnUrl 'webawesome.loader.js' %}';
|
||||
setKitCode('YOUR_KIT_CODE_HERE');
|
||||
</script>
|
||||
```
|
||||
dist/
|
||||
dist-cdn/
|
||||
```
|
||||
|
||||
:::info
|
||||
Not a Font Awesome user yet? [Learn more about Font Awesome icon packs](https://fontawesome.com/) and sign up for an account to unlock them!
|
||||
:::
|
||||
The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
|
||||
|
||||
Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
|
||||
|
||||
## React Users
|
||||
|
||||
|
||||
@@ -43,56 +43,22 @@ layout: docs
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Using Layout Utilities
|
||||
## Installation
|
||||
|
||||
Layout utility classes are bundled with Web Awesome's [style utilities](/docs/utilities). By including style utilities in your project, you'll have access to layout utilities like `.wa-grid` and `.wa-stack`.
|
||||
{% endmarkdown %}
|
||||
Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/#cherry-picking).
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="cdn">
|
||||
{% markdown %}
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Next to **Features**, select the **CSS utilities** checkbox.
|
||||
3. **Save Changes** to immediately update anywhere you're using your project.
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/webawesome.css';
|
||||
```
|
||||
|
||||
Or, if you only want CSS utility classes, import a theme and the utilities individually:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/themes/default.css';
|
||||
import '@awesome.me/webawesome/dist/styles/utilities.css';
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/utilities/native/)) by including the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, if you only want CSS utility classes, include a theme and the utilities individually:
|
||||
Or, you can choose to import _only_ the utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
|
||||
@@ -27,7 +27,7 @@ Web Awesome ships with [a number of translations](https://github.com/shoelace-st
|
||||
You can import translations using the following syntax, where `<code>` is replaced with any language code shown above.
|
||||
|
||||
```js
|
||||
import '/dist/translations/<code>.js';
|
||||
import '{% cdnUrl "translations/<code>.js" %}';
|
||||
```
|
||||
|
||||
You do not need to load translations up front. You can import them dynamically even after updating the `lang` attribute. Once a translation is registered, localized components will update automatically.
|
||||
@@ -37,7 +37,7 @@ You do not need to load translations up front. You can import them dynamically e
|
||||
document.documentElement.lang = 'de';
|
||||
|
||||
// Import the translation
|
||||
import('/translations/<code>.js');
|
||||
import('{% cdnUrl "translations/<code>.js" %}');
|
||||
```
|
||||
|
||||
### Translation Resolution
|
||||
|
||||
@@ -10,7 +10,7 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
|
||||
|
||||
Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
|
||||
|
||||
## 3.0.0
|
||||
## Next
|
||||
|
||||
- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
|
||||
- `<wa-badge>`
|
||||
@@ -21,13 +21,11 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- `<wa-select>`
|
||||
- `<wa-tag>`
|
||||
- `<wa-textarea>`
|
||||
- 🚨 BREAKING: Fixed a bug where `base` and `input` parts were swapped in `<wa-input>` [issue:1646]
|
||||
- Added the Kazakh translation [pr:1496]
|
||||
- Added docs for code completion for VS Code and JetBrains [pr:1550]
|
||||
- Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
|
||||
- Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
|
||||
- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
|
||||
- Added version 1.0.0 of the [official Web Awesome Figma Design Kit](/docs/resources/figma)
|
||||
- Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
|
||||
- Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
|
||||
- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
|
||||
@@ -40,10 +38,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
|
||||
- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
|
||||
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
|
||||
- Fixed a bug in `<wa-popover>` and `<wa-tooltip>` that prevented dots and other valid ID characters from being used [issue:1648]
|
||||
- [Pro] Fixed a bug in `<wa-page>` that caused menu and aside content to reserve space for slots with `disable-sticky`
|
||||
- Fixed incorrect docs for the `wa-include-error` event which is dispatched by `<wa-include>` [issue:1663]
|
||||
- Fixed a bug in `<wa-card>` where slotted header and footer content wasn't properly aligned [pr:1435]
|
||||
- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
|
||||
- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
|
||||
- Improved Native Styles to use the `--wa-font-weight-code` design token
|
||||
@@ -492,4 +486,4 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
</details>
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
---
|
||||
title: Community & Support
|
||||
description: Web Awesome has a growing community of designers and developers that are building amazing things with web components.
|
||||
layout: page
|
||||
---
|
||||
|
||||
<p>We know people have their own way of reaching out, so our team makes sure you can find us wherever you need — whether it’s filing an issue on GitHub, chatting with the community on Discord, or getting private help via email. If you’re just getting started, don’t miss our <a href="/docs/">Instillation Guide</a>.</p>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<div class="wa-stack wa-align-items-start">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<h2 class="anchor-heading wa-cluster wa-gap-xs" data-no-anchor><wa-icon name="github" family="brands" style="font-size: 2ch;"></wa-icon>Github</h2>
|
||||
<span class="wa-heading-m">Feature requests & bugs</span>
|
||||
<p class="wa-caption-l">Notice a bug or have an idea? Open an issue on GitHub so we can triage, track, and ship fixes.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Report reproducible bugs with clear steps.</li>
|
||||
<li>Suggest features that improve developer workflow</li>
|
||||
<li>Vote on issues others have filed to help us prioritize.</li>
|
||||
</ul>
|
||||
<div class="wa-cluster wa-gap-s">
|
||||
<wa-button href="https://github.com/shoelace-style/webawesome/discussions/categories/ideas-suggestions" appearance="filled">
|
||||
Request a Feature
|
||||
</wa-button>
|
||||
<wa-button href="https://github.com/shoelace-style/webawesome/issues" appearance="outlined">
|
||||
Report a Bug
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-stack wa-align-items-start">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<h2 class="anchor-heading wa-cluster wa-gap-xs" data-no-anchor><wa-icon name="discord" family="brands" style="font-size: 2ch;"></wa-icon>Discord</h2>
|
||||
<span class="wa-heading-m">Community & Discussion</span>
|
||||
<p class="wa-caption-l">Ask questions, share tips, and connect with other developers in real time.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Ask for help</li>
|
||||
<li>Share ideas and get feedback</li>
|
||||
<li>Show the community what you're working on</li>
|
||||
<li>Chat live with other designers, developers, and Web Awesome supporters.</li>
|
||||
</ul>
|
||||
<wa-button href="https://discord.com/invite/mg8f26C" appearance="filled">
|
||||
Join Discord
|
||||
</wa-button>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
<div class="wa-stack wa-align-items-start">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<h2 class="anchor-heading wa-cluster wa-gap-xs" data-no-anchor><wa-icon name="envelope" style="font-size: 2ch;"></wa-icon>Email</h2>
|
||||
<span class="wa-heading-m">Anything Else</span>
|
||||
<p class="wa-caption-l">Billing questions, account access, or sensitive issues—reach our support team directly.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Account access & login issues.</li>
|
||||
<li>Billing or subscription questions.</li>
|
||||
<li>Private matters you don’t want to post publicly.</li>
|
||||
</ul>
|
||||
<wa-button href="mailto:help@webawesome.com" appearance="filled">
|
||||
Get Help via Email
|
||||
</wa-button>
|
||||
</div>
|
||||
<wa-divider></wa-divider>
|
||||
</div>
|
||||
<div class="wa-stack" style="margin-block-start: var(--wa-space-xl);">
|
||||
<div class="wa-stack wa-gap-s">
|
||||
<h2 data-no-anchor>Socials</h2>
|
||||
<p>We’re everywhere you are — follow us on your favorite social media platforms for the latest news and updates.</p>
|
||||
</div>
|
||||
<div class="wa-cluster wa-caption-2xl">
|
||||
<h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
|
||||
<a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
|
||||
<wa-icon family="brands" name="github" label="GitHub" role="img" aria-label="GitHub" library="default"></wa-icon>
|
||||
</a>
|
||||
<a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
|
||||
<wa-icon family="brands" name="bluesky" label="Bluesky" role="img" aria-label="Bluesky" library="default"></wa-icon>
|
||||
</a>
|
||||
<a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
|
||||
<wa-icon family="brands" name="mastodon" label="Mastodon" role="img" aria-label="Mastodon" library="default"></wa-icon>
|
||||
</a>
|
||||
<a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
|
||||
<wa-icon family="brands" name="x-twitter" label="Twitter (X)" role="img" aria-label="Twitter (X)" library="default"></wa-icon>
|
||||
</a>
|
||||
<a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
|
||||
<wa-icon family="brands" name="threads" label="Threads" role="img" aria-label="Threads" library="default"></wa-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -86,70 +86,16 @@ to create a project with any one of these themes.
|
||||
</div>
|
||||
|
||||
<h2>Using This Theme</h2>
|
||||
|
||||
<div id="import-code">
|
||||
{% for theme in themer.themes %}
|
||||
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="cdn">
|
||||
{% markdown %}
|
||||
{% if theme.isPro %}
|
||||
<wa-callout variant="neutral" size="small">
|
||||
<wa-icon name="info-circle" variant="regular"></wa-icon>
|
||||
This theme can only be used on teams with a Pro subscription.
|
||||
</wa-callout>
|
||||
<br />
|
||||
{% else %}
|
||||
**For projects on Free teams:**
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. For your **Theme**, select <wa-icon name="paintbrush" variant="regular"></wa-icon> **{{ theme.filename | stripExtension | capitalize }}**.
|
||||
3. For your **Color Palette**, select <wa-icon name="swatchbook" variant="regular"></wa-icon> **{{ theme.palette.filename | stripExtension | capitalize }}**.
|
||||
4. Press **Save Changes** to immediately update anywhere you're using your project.
|
||||
{% endif %}
|
||||
|
||||
**For projects on Pro teams:**
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Press <wa-icon name="paintbrush" variant="regular"></wa-icon> **Edit Your Theme** to open the Theme Builder.
|
||||
3. Open **Theme** and select **{{ theme.filename | stripExtension | capitalize }}**.
|
||||
4. Press **Save Theme** to immediately update anywhere you're using your project.
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
{% markdown %}
|
||||
To use this theme, import the theme's stylesheet:
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';
|
||||
```
|
||||
|
||||
Then apply the following classes to the `<html>` element:
|
||||
|
||||
```html
|
||||
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
{% markdown %}
|
||||
To use this theme, include the theme's stylesheet:
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" />
|
||||
```
|
||||
|
||||
Then apply the following classes to the `<html>` element:
|
||||
|
||||
```html
|
||||
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
</div>
|
||||
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<p>
|
||||
To import this theme, apply the following classes to the <code><html></code> element and import the theme's stylesheet.
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
|
||||
...
|
||||
<link rel="stylesheet" href="{% cdnUrl %}styles/themes/{{ theme.filename }}" /></code></pre>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@@ -279,13 +225,14 @@ Then apply the following classes to the `<html>` element:
|
||||
}
|
||||
|
||||
#theme-viewer {
|
||||
margin-block-start: 2rem;
|
||||
|
||||
#theme-picker {
|
||||
|
||||
&::part(form-control-input) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--wa-space-m);
|
||||
}
|
||||
|
||||
&::part(form-control-label) {
|
||||
@@ -299,10 +246,6 @@ Then apply the following classes to the `<html>` element:
|
||||
white-space: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
wa-radio {
|
||||
margin-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
|
||||
@@ -40,7 +40,6 @@ await allDefined();
|
||||
|
||||
By default, `allDefined()` will wait for all `wa-` prefixed custom elements within the current `document` to be registered.
|
||||
You can customize this behavior by passing in options:
|
||||
|
||||
- `root` allows you to pass in a different element to search within, or a different document entirely (defaults to `document`).
|
||||
- `match` allows you to specify a custom function to determine which elements to wait for. This function should return `true` for elements you want to wait for and `false` for those you don't.
|
||||
- `additionalElements` allows you to wait for custom elements to be defined that may not be present in the DOM at the time `allDefined()` is called. This can be useful for elements that are loaded dynamically via JS.
|
||||
@@ -53,7 +52,7 @@ import { allDefined } from '/dist/webawesome.js';
|
||||
await allDefined({
|
||||
match: tagName => tagName.startsWith('wa-') || tagName === 'my-component',
|
||||
root: document.getElementById('sidebar'),
|
||||
additionalElements: ['wa-slider', 'other-slider'],
|
||||
additionalElements: ['wa-slider', 'other-slider']
|
||||
});
|
||||
```
|
||||
|
||||
@@ -195,11 +194,12 @@ Web Awesome ships with a file called `vscode.html-custom-data.json` that can be
|
||||
|
||||
If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
|
||||
|
||||
If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead.
|
||||
|
||||
### JetBrains IDEs
|
||||
If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
|
||||
|
||||
If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the `web-types.json` file from the package and you should immediately see component information in your editor.
|
||||
|
||||
Be sure to add a reference to the `web-types.json` file in your `package.json` in order for your editor to properly detect it.
|
||||
If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
|
||||
|
||||
```json
|
||||
{
|
||||
|
||||
@@ -45,54 +45,22 @@ layout: docs
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Using {{ title }}
|
||||
{% endmarkdown %}
|
||||
## Installation
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="cdn">
|
||||
{% markdown %}
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Next to **Features**, select the **CSS utilities** checkbox.
|
||||
3. **Save Changes** to immediately update anywhere you're using your project.
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), import the following stylesheet in your project:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/webawesome.css';
|
||||
```
|
||||
|
||||
Or, if you only want CSS utility classes, import a theme and the utilities individually:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/themes/default.css';
|
||||
import '@awesome.me/webawesome/dist/styles/utilities.css';
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, if you only want CSS utility classes, include a theme and the utilities individually:
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -9,53 +9,18 @@ Native styles use design tokens to spruce up native HTML elements so that they m
|
||||
|
||||
## Using native styles
|
||||
|
||||
<wa-tab-group>
|
||||
<wa-tab panel="cdn"><wa-icon name="rocket-launch" variant="regular"></wa-icon> CDN</wa-tab>
|
||||
<wa-tab panel="npm"><wa-icon name="box-open" variant="regular"></wa-icon> npm</wa-tab>
|
||||
<wa-tab panel="self-hosted"><wa-icon name="arrow-down-to-line" variant="regular"></wa-icon> Self-Hosted</wa-tab>
|
||||
|
||||
<wa-tab-panel name="cdn">
|
||||
{% markdown %}
|
||||
1. Head over to your project's <wa-icon name="gear" variant="regular"></wa-icon> **Settings**.
|
||||
2. Next to **Features**, select the **Native styles** checkbox.
|
||||
3. **Save Changes** to immediately update anywhere you're using your project.
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="npm">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [utilities](/docs/utilities/)), import the following stylesheet in your project:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/webawesome.css';
|
||||
```
|
||||
|
||||
Or, if you only want styles for native elements, import a theme and native styles individually:
|
||||
|
||||
```js
|
||||
import '@awesome.me/webawesome/dist/styles/themes/default.css';
|
||||
import '@awesome.me/webawesome/dist/styles/native.css';
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
|
||||
<wa-tab-panel name="self-hosted">
|
||||
{% markdown %}
|
||||
To use all Web Awesome styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, if you only want styles for native elements, include a theme and native styles individually:
|
||||
Or, if you only want styles for native elements, include the default theme and native styles individually:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/native.css" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/native.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
You can additionally include any pre-made [theme](/docs/themes/) or [color palette](/docs/color-palettes/) to change the look of native elements.
|
||||
|
||||
@@ -65,18 +30,10 @@ Native styles set default space between many block-level HTML elements using the
|
||||
|
||||
```html {.example}
|
||||
<h3>Curabitur odio ligula</h3>
|
||||
<p>
|
||||
Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla
|
||||
porta, ac scelerisque elit finibus.
|
||||
</p>
|
||||
<blockquote>
|
||||
The Road goes ever on and on<br />
|
||||
Out from the door where it began.
|
||||
</blockquote>
|
||||
<p>
|
||||
Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi
|
||||
luctus at nisl sit amet faucibus.
|
||||
</p>
|
||||
<p>Fusce mollis quam lorem, et gravida arcu laoreet ut. Pellentesque et malesuada mi. Morbi faucibus nisl nec nulla porta, ac scelerisque elit finibus.</p>
|
||||
<blockquote>The Road goes ever on and on<br />
|
||||
Out from the door where it began.</blockquote>
|
||||
<p>Donec varius, ipsum sit amet lobortis tristique, quam arcu pellentesque turpis, non porta lacus arcu non arcu. Morbi luctus at nisl sit amet faucibus.</p>
|
||||
<hr />
|
||||
<ul>
|
||||
<li>Aenean imperdiet</li>
|
||||
@@ -234,8 +191,8 @@ Use any inline text element like `<strong>`, `<em>`, `<a>`, `<kbd>`, and others
|
||||
Add responsive media with `<img>`, `<svg>`, `<video>`, `<iframe>`, and others. Media takes up 100% width by default and scales according to its container's width.
|
||||
|
||||
```html {.example}
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
||||
alt="A gray kitten lays next to a toy"
|
||||
/>
|
||||
```
|
||||
@@ -247,9 +204,7 @@ Structure tabular data with `<table>` and related elements like `<caption>`, `<t
|
||||
```html {.example}
|
||||
<table>
|
||||
<caption>
|
||||
This
|
||||
<code><caption></code>
|
||||
describes the table
|
||||
This <code><caption></code> describes the table
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -392,6 +347,7 @@ Create buttons with `<button>` or `<input type="button | submit | reset">`. Butt
|
||||
|
||||
Add the `wa-brand`, `wa-neutral`, `wa-success`, `wa-warning`, or `wa-danger` class to specify the button's [color variant](/docs/utilities/color/).
|
||||
|
||||
|
||||
```html {.example}
|
||||
<button class="wa-neutral">Neutral</button>
|
||||
<button class="wa-brand">Brand</button>
|
||||
@@ -450,8 +406,7 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
|
||||
<label>Color <input type="color" value="#f36944" /></label>
|
||||
<label>File <input type="file" multiple /></label>
|
||||
<label>Range <input type="range" /></label>
|
||||
<label
|
||||
>Select
|
||||
<label>Select
|
||||
<select>
|
||||
<option value="option-1">Option 1</option>
|
||||
<option value="option-2">Option 2</option>
|
||||
@@ -477,7 +432,6 @@ Create a variety of form controls with `<input type="">`, `<select>`, and `<text
|
||||
```
|
||||
|
||||
Add the `wa-size-s`, `wa-size-m`, or `wa-size-l` class to any form control or its parent `<label>` to specify its size.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<input type="text" placeholder="Small input" class="wa-size-s" />
|
||||
@@ -556,8 +510,7 @@ Wrap form controls in a flex container to arrange them horizontally or verticall
|
||||
|
||||
<form class="wa-stack">
|
||||
<label>Number of pancakes <input type="number" value="5" /></label>
|
||||
<label
|
||||
>Syrup flavor
|
||||
<label>Syrup flavor
|
||||
<select>
|
||||
<option value="maple">Maple</option>
|
||||
<option value="strawberry">Strawberry</option>
|
||||
|
||||
@@ -238,14 +238,22 @@ layout: page
|
||||
{% if currentUser.hasPro %}
|
||||
<span class="wa-font-size-l" style="text-align: center; width: 100%;">Thanks for being a Web Awesome Pro subscriber!</span>
|
||||
{% else %}
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Get More with Web Awesome Pro!</h3>
|
||||
<p>Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.</p>
|
||||
</div>
|
||||
<wa-button class="wa-dark" size="small" href="/purchase">
|
||||
<wa-icon slot="start" name="rocket-launch"></wa-icon>
|
||||
Purchase Pro
|
||||
</wa-button>
|
||||
{% if App.flags.stripeEnabled %}
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<h3 class="wa-heading-m">Get More with Web Awesome Pro!</h3>
|
||||
<p>Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.</p>
|
||||
</div>
|
||||
<wa-button class="wa-dark" size="small" href="/purchase">
|
||||
<wa-icon slot="start" name="rocket-launch"></wa-icon>
|
||||
Purchase Pro
|
||||
</wa-button>
|
||||
{% else %}
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
</div>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"name": "Web Awesome",
|
||||
"short_name": "Web Awesome",
|
||||
"description": "Build better with Web Awesome, the open source library of web components from Font Awesome.",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"theme_color": "#f36944",
|
||||
"background_color": "#ffffff",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/images/app-icons/app-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/assets/images/app-icons/app-icon-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -4,7 +4,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.0-beta.6",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -90,7 +90,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11"
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import variantStyles from '../../styles/utilities/variants.css';
|
||||
import type WaButton from '../button/button.js';
|
||||
import styles from './button-group.css';
|
||||
|
||||
@@ -18,7 +19,7 @@ import styles from './button-group.css';
|
||||
*/
|
||||
@customElement('wa-button-group')
|
||||
export default class WaButtonGroup extends WebAwesomeElement {
|
||||
static css = [styles];
|
||||
static css = [variantStyles, styles];
|
||||
|
||||
@query('slot') defaultSlot: HTMLSlotElement;
|
||||
|
||||
@@ -34,6 +35,9 @@ export default class WaButtonGroup extends WebAwesomeElement {
|
||||
/** The button group's orientation. */
|
||||
@property({ reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';
|
||||
|
||||
/** The button group's theme variant. Defaults to `neutral` if not within another element with a variant. */
|
||||
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
|
||||
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
|
||||
@@ -77,7 +77,9 @@
|
||||
}
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--wa-color-surface-border);
|
||||
border-block-end-width: var(--wa-panel-border-width);
|
||||
@@ -90,20 +92,15 @@
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--wa-color-surface-border);
|
||||
border-block-start-width: var(--wa-panel-border-width);
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
/* Push slots to sides when the action slots renders */
|
||||
.has-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:host(:not([with-header])) .header,
|
||||
:host(:not([with-footer])) .footer,
|
||||
:host(:not([with-media])) .media {
|
||||
@@ -118,12 +115,7 @@
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: 0;
|
||||
|
||||
&::slotted(*) {
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -69,25 +69,15 @@ export default class WaCard extends WebAwesomeElement {
|
||||
// Vertical Orientation
|
||||
return html`
|
||||
<slot name="media" part="media" class="media"></slot>
|
||||
|
||||
${this.hasSlotController.test('header-actions')
|
||||
? html` <header part="header" class="header has-actions">
|
||||
<slot name="header"></slot>
|
||||
<slot name="header-actions"></slot>
|
||||
</header>`
|
||||
: html` <header part="header" class="header">
|
||||
<slot name="header"></slot>
|
||||
</header>`}
|
||||
|
||||
<header part="header" class="header">
|
||||
<slot name="header"></slot>
|
||||
<slot name="header-actions"></slot>
|
||||
</header>
|
||||
<slot part="body" class="body"></slot>
|
||||
${this.hasSlotController.test('footer-actions')
|
||||
? html` <footer part="footer" class="footer has-actions">
|
||||
<slot name="footer"></slot>
|
||||
<slot name="footer-actions"></slot>
|
||||
</footer>`
|
||||
: html` <footer part="footer" class="footer">
|
||||
<slot name="footer"></slot>
|
||||
</footer>`}
|
||||
<footer part="footer" class="footer">
|
||||
<slot name="footer"></slot>
|
||||
<slot name="footer-actions"></slot>
|
||||
</footer>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ import { requestInclude } from './request.js';
|
||||
* @since 2.0
|
||||
*
|
||||
* @event wa-load - Emitted when the included file is loaded.
|
||||
* @event {{ status: number }} wa-include-error - Emitted when the included file fails to load due to an error.
|
||||
* @event {{ status: number }} wa-error - Emitted when the included file fails to load due to an error.
|
||||
*/
|
||||
@customElement('wa-include')
|
||||
export default class WaInclude extends WebAwesomeElement {
|
||||
|
||||
@@ -40,8 +40,8 @@ import styles from './input.css';
|
||||
*
|
||||
* @csspart label - The label
|
||||
* @csspart hint - The hint's wrapper.
|
||||
* @csspart base - The wrapper being rendered as an input
|
||||
* @csspart input - The internal `<input>` control.
|
||||
* @csspart input - The wrapper being rendered as an input
|
||||
* @csspart base - The internal `<input>` control.
|
||||
* @csspart start - The container that wraps the `start` slot.
|
||||
* @csspart clear-button - The clear button.
|
||||
* @csspart password-toggle-button - The password toggle button.
|
||||
@@ -353,11 +353,11 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
<slot name="label">${this.label}</slot>
|
||||
</label>
|
||||
|
||||
<div part="base" class="text-field">
|
||||
<div part="input" class="text-field">
|
||||
<slot name="start" part="start" class="start"></slot>
|
||||
|
||||
<input
|
||||
part="input"
|
||||
part="base"
|
||||
id="input"
|
||||
class="control"
|
||||
type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
|
||||
|
||||
@@ -230,7 +230,7 @@ export default class WaPopover extends WebAwesomeElement {
|
||||
return;
|
||||
}
|
||||
|
||||
const newAnchor = this.for ? rootNode.getElementById(this.for) : null;
|
||||
const newAnchor = this.for ? rootNode.querySelector(`#${this.for}`) : null;
|
||||
const oldAnchor = this.anchor;
|
||||
|
||||
if (newAnchor === oldAnchor) {
|
||||
|
||||
@@ -690,8 +690,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
if (!this.withTooltip) return;
|
||||
|
||||
// Show only the active tooltip, hide the other
|
||||
const tooltipMin = this.shadowRoot?.getElementById('tooltip-thumb-min') as WaTooltip;
|
||||
const tooltipMax = this.shadowRoot?.getElementById('tooltip-thumb-max') as WaTooltip;
|
||||
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
|
||||
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
|
||||
|
||||
if (this.activeThumb === 'min') {
|
||||
if (tooltipMin) tooltipMin.open = true;
|
||||
@@ -705,8 +705,8 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
|
||||
private hideRangeTooltips() {
|
||||
if (!this.withTooltip) return;
|
||||
|
||||
const tooltipMin = this.shadowRoot?.getElementById('tooltip-thumb-min') as WaTooltip;
|
||||
const tooltipMax = this.shadowRoot?.getElementById('tooltip-thumb-max') as WaTooltip;
|
||||
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
|
||||
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
|
||||
|
||||
if (tooltipMin) tooltipMin.open = false;
|
||||
if (tooltipMax) tooltipMax.open = false;
|
||||
|
||||
@@ -137,7 +137,8 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
this.eventController.abort();
|
||||
|
||||
if (this.anchor) {
|
||||
this.removeFromAriaLabelledBy(this.anchor, this.id);
|
||||
const label = this.anchor.getAttribute('aria-labelledby') || '';
|
||||
this.anchor.setAttribute('aria-labelledby', label.replace(this.id, ''));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -201,34 +202,6 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
return triggers.includes(triggerType);
|
||||
}
|
||||
|
||||
/** Adds the tooltip ID to the aria-labelledby attribute */
|
||||
private addToAriaLabelledBy(element: Element, id: string) {
|
||||
const currentLabel = element.getAttribute('aria-labelledby') || '';
|
||||
const labels = currentLabel.split(/\s+/).filter(Boolean);
|
||||
|
||||
// Only add if not already present
|
||||
if (!labels.includes(id)) {
|
||||
labels.push(id);
|
||||
element.setAttribute('aria-labelledby', labels.join(' '));
|
||||
}
|
||||
}
|
||||
|
||||
/** Removes the tooltip ID from the aria-labelledby attribute */
|
||||
private removeFromAriaLabelledBy(element: Element, id: string) {
|
||||
const currentLabel = element.getAttribute('aria-labelledby') || '';
|
||||
const labels = currentLabel.split(/\s+/).filter(Boolean);
|
||||
|
||||
// Remove the ID
|
||||
const filteredLabels = labels.filter(label => label !== id);
|
||||
|
||||
if (filteredLabels.length > 0) {
|
||||
element.setAttribute('aria-labelledby', filteredLabels.join(' '));
|
||||
} else {
|
||||
// Remove the attribute if empty
|
||||
element.removeAttribute('aria-labelledby');
|
||||
}
|
||||
}
|
||||
|
||||
@watch('open', { waitUntilFirstUpdate: true })
|
||||
async handleOpenChange() {
|
||||
if (this.open) {
|
||||
@@ -279,7 +252,7 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
return;
|
||||
}
|
||||
|
||||
const newAnchor = this.for ? rootNode.getElementById(this.for) : null;
|
||||
const newAnchor = this.for ? rootNode.querySelector(`#${this.for}`) : null;
|
||||
const oldAnchor = this.anchor;
|
||||
|
||||
if (newAnchor === oldAnchor) {
|
||||
@@ -288,6 +261,9 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
|
||||
const { signal } = this.eventController;
|
||||
|
||||
// "\\b" is a space boundary, used for making sure we don't add the tooltip to aria-labelledby twice.
|
||||
const labelRegex = new RegExp(`\\b${this.id}\\b`);
|
||||
|
||||
if (newAnchor) {
|
||||
/**
|
||||
* We use `aria-labelledby` because it seems to have the most consistent screen reader experience.
|
||||
@@ -296,7 +272,10 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
* whereas with `aria-labelledby` it'll still read on first focus. The APG does and WAI-ARIA does recommend aria-describedby
|
||||
* so perhaps once we have cross-root aria, we can revisit this decision.
|
||||
*/
|
||||
this.addToAriaLabelledBy(newAnchor, this.id);
|
||||
const currentLabel = newAnchor.getAttribute('aria-labelledby') || '';
|
||||
if (!currentLabel.match(labelRegex)) {
|
||||
newAnchor.setAttribute('aria-labelledby', currentLabel + ' ' + this.id);
|
||||
}
|
||||
|
||||
newAnchor.addEventListener('blur', this.handleBlur, { capture: true, signal });
|
||||
newAnchor.addEventListener('focus', this.handleFocus, { capture: true, signal });
|
||||
@@ -306,7 +285,8 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
if (oldAnchor) {
|
||||
this.removeFromAriaLabelledBy(oldAnchor, this.id);
|
||||
const label = oldAnchor.getAttribute('aria-labelledby') || '';
|
||||
oldAnchor.setAttribute('aria-labelledby', label.replace(labelRegex, ''));
|
||||
oldAnchor.removeEventListener('blur', this.handleBlur, { capture: true });
|
||||
oldAnchor.removeEventListener('focus', this.handleFocus, { capture: true });
|
||||
oldAnchor.removeEventListener('click', this.handleClick);
|
||||
|
||||
@@ -11,7 +11,6 @@ export type { WaExpandEvent } from './expand.js';
|
||||
export type { WaFinishEvent } from './finish.js';
|
||||
export type { WaHideEvent } from './hide.js';
|
||||
export type { WaHoverEvent } from './hover.js';
|
||||
export type { WaIncludeErrorEvent } from './include-error.js';
|
||||
export type { WaIntersectEvent } from './intersect.js';
|
||||
export type { WaInvalidEvent } from './invalid.js';
|
||||
export type { WaLazyChangeEvent } from './lazy-change.js';
|
||||
|
||||
@@ -127,30 +127,17 @@ export default class WebAwesomeElement extends LitElement {
|
||||
/** Adds or removes the specified custom state. */
|
||||
set: (customState: string, active: boolean) => {
|
||||
if (!Boolean(this.internals?.states)) return;
|
||||
try {
|
||||
if (active) {
|
||||
this.internals.states.add(customState);
|
||||
} else {
|
||||
this.internals.states.delete(customState);
|
||||
}
|
||||
} catch (e) {
|
||||
if (String(e).includes("must start with '--'")) {
|
||||
/* eslint-disable-next-line */
|
||||
console.error('Your browser implements an outdated version of CustomStateSet. Consider using a polyfill');
|
||||
} else {
|
||||
throw e;
|
||||
}
|
||||
if (active) {
|
||||
this.internals.states.add(customState);
|
||||
} else {
|
||||
this.internals.states.delete(customState);
|
||||
}
|
||||
},
|
||||
|
||||
/** Determines whether or not the element currently has the specified state. */
|
||||
has: (customState: string) => {
|
||||
if (!Boolean(this.internals?.states)) return false;
|
||||
try {
|
||||
return this.internals.states.has(customState);
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
return this.internals.states.has(customState);
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@@ -460,7 +460,7 @@
|
||||
wa-textarea
|
||||
):not(:focus):not([appearance='filled']) {
|
||||
&:where(:not(wa-input):not(wa-select):not(wa-textarea)),
|
||||
&:where(wa-input)::part(base),
|
||||
&:where(wa-input)::part(input),
|
||||
&:where(wa-select)::part(combobox),
|
||||
&:where(wa-textarea)::part(base) {
|
||||
box-shadow: inset var(--wa-shadow-offset-x-s)
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"$schema": "https://openapi.vercel.sh/vercel.json",
|
||||
"outputDirectory": "packages/webawesome/_site",
|
||||
"outputDirectory": "packages/webawesome-pro/_site",
|
||||
"buildCommand": "bash ./vercel.sh"
|
||||
}
|
||||
|
||||
@@ -2,4 +2,8 @@
|
||||
|
||||
echo "Running the build!"
|
||||
|
||||
cd packages/webawesome && npm install && npm run build
|
||||
if [[ "$CLONE_PRO" != "false" ]]; then
|
||||
git clone "https://konnorrogers:$GITHUB_ACCESS_TOKEN@github.com/shoelace-style/webawesome-pro" packages/webawesome-pro
|
||||
fi
|
||||
|
||||
cd packages/webawesome-pro && npm run build
|
||||
|
||||
Reference in New Issue
Block a user