Compare commits

..

17 Commits

Author SHA1 Message Date
lindsaym-fa
e7d5d96be7 add changelog 2025-10-21 11:10:02 -04:00
lindsaym-fa
9e06e4848d missed a spot! 2025-10-20 22:00:11 -04:00
lindsaym-fa
a5523c6173 use new font size utilities 2025-10-20 21:36:52 -04:00
lindsaym-fa
204c130968 find and replace outdated text utilities 2025-10-20 19:11:29 -04:00
lindsaym-fa
83d516b791 use proper longform font weight 2025-10-20 18:29:14 -04:00
lindsaym-fa
43a7174e7e document missing font weight tokens 2025-10-20 18:28:57 -04:00
lindsaym-fa
2cf6129275 document utilities 2025-10-20 18:25:55 -04:00
lindsaym-fa
01e58b5b57 add longform, color-text-link, and placeholder classes 2025-10-20 18:25:43 -04:00
lindsaym-fa
113cfbe52f Merge branch 'next' into lm/improve-text-utilities 2025-10-20 16:32:28 -04:00
lindsaym-fa
434c96d48b add .wa-text-truncate, .wa-list-plain 2025-10-15 15:22:40 -04:00
lindsaym-fa
d36232b638 gimme the font weights 2025-10-15 14:51:13 -04:00
lindsaym-fa
cdd1bcebcf remove font weight classes 2025-10-15 12:10:04 -04:00
lindsaym-fa
d54422f3c8 reorg stylesheet 2025-10-15 11:58:22 -04:00
lindsaym-fa
929673030c Merge branch 'next' into lm/improve-text-utilities 2025-10-15 11:27:40 -04:00
lindsaym-fa
3153c3c582 re-introduce .wa-caption-* 2025-10-14 13:18:21 -04:00
lindsaym-fa
466050848f Merge branch 'next' into lm/improve-text-utilities 2025-10-14 11:59:55 -04:00
lindsaym-fa
be3dbd6612 initial take on text utility improvements 2025-10-03 18:31:57 -04:00
46 changed files with 190 additions and 1308 deletions

View File

@@ -1,2 +1,6 @@
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

914
package-lock.json generated
View File

@@ -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",
@@ -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",

View File

@@ -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,16 +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),
// Open Graph metadata with smart defaults
ogTitle: data => data.ogTitle || data.title,
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.
@@ -247,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"
@@ -370,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) {
// //

View File

@@ -12,22 +12,22 @@ export const themes = [
isPro: false,
fonts: {
body: {
name: 'OS Default (sans-serif)',
name: 'OS Default',
css: 'ui-sans-serif, system-ui, sans-serif',
href: null,
},
heading: {
name: 'OS Default (sans-serif)',
name: 'OS Default',
css: 'ui-sans-serif, system-ui, sans-serif',
href: null,
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
longform: {
name: 'OS Default (serif)',
name: 'OS Default',
css: 'ui-serif, serif',
href: null,
},
@@ -82,7 +82,7 @@ export const themes = [
href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
@@ -132,22 +132,22 @@ export const themes = [
isPro: false,
fonts: {
body: {
name: 'OS Default (sans-serif)',
name: 'OS Default',
css: 'ui-sans-serif, system-ui, sans-serif',
href: null,
},
heading: {
name: 'OS Default (sans-serif)',
name: 'OS Default',
css: 'ui-sans-serif, system-ui, sans-serif',
href: null,
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
longform: {
name: 'OS Default (serif)',
name: 'OS Default',
css: 'ui-serif, serif',
href: null,
},
@@ -442,7 +442,7 @@ export const themes = [
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
@@ -562,7 +562,7 @@ export const themes = [
href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
@@ -622,12 +622,12 @@ export const themes = [
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
},
code: {
name: 'OS Default (monospace)',
name: 'OS Default',
css: 'ui-monospace, monospace',
href: null,
},
longform: {
name: 'OS Default (serif)',
name: 'OS Default',
css: 'ui-serif, serif',
href: null,
},

View File

@@ -3,17 +3,7 @@
<meta name="description" content="{{ description }}">
{% if noindex or unlisted %}<meta name="robots" content="noindex">{% endif %}
<title>{{ title }} | {{ siteMetadata.name }}</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 }} | {{ siteMetadata.name }}" />
<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.
})
}
}

View File

@@ -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 &amp; Support</a></li>
<li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
<li>
<span class="wa-split">
@@ -24,13 +24,15 @@
{{ 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="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
<li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
<li><a href="/tos">Terms of Service</a></li>
<li><a href="/docs/resources/visual-tests">Visual Tests</a></li>
</ul>
<!-- Components -->
@@ -381,6 +383,12 @@
<ul>
<li><a href="/docs/color-palettes">Color Palettes</a></li>
<li><a href="/docs/themes">Themes</a></li>
<li>
<span class="wa-split">
<a href="/themer" data-turbo="false">Theme Builder</a>
{{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
</span>
</li>
</ul>
<!-- Design tokens -->
@@ -403,16 +411,6 @@
</ul>
</wa-details>
{# Policies #}
<h2>Terms &amp; Policies</h2>
<ul>
<li><a href="/license"><span class="wa-visually-hidden">Web Awesome </span>Free License</a></li>
<li><a href="/license/pro"><span class="wa-visually-hidden">Web Awesome </span>Pro License</a></li>
<li><a href="/tos">Terms of Service</a></li>
<li><a href="/privacy">Privacy Policy</a></li>
<li><a href="/refunds">Refund Policy</a></li>
</ul>
<wa-divider style="--spacing: var(--wa-space-xl);"></wa-divider>
<div class="wa-stack wa-gap-xl" id="colophon">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 943 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

View File

@@ -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

View File

@@ -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

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 27 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 235 KiB

View File

@@ -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

View File

@@ -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

View File

@@ -38,7 +38,7 @@ async function updateTheme(value, isInitialLoad = false) {
// Handle site theme vs regular theme
let href = `/dist/styles/themes/${value}.css`;
if (document.querySelector('wa-page')?.dataset.pageType === 'site') {
if (document.querySelector('wa-page').dataset.pageType === 'site') {
brand = 'orange';
href = `/assets/styles/theme-site.css`;
palette = 'default';

View File

@@ -2,25 +2,22 @@
pre[id*='code-block-'] {
color-scheme: dark;
color: white;
background-color: var(--code-background, var(--wa-color-neutral-20));
background-color: var(--wa-color-neutral-20);
/* Ensures a discernible background color in dark mode
* Useful for themes that use gray-20 as --wa-color-surface-default */
.wa-dark & {
background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
background-color: var(--wa-color-surface-lowered);
}
}
.code-comment,
.code-prolog,
.code-doctype,
.code-cdata {
color: var(--code-comment, var(--wa-color-gray-70));
}
.code-cdata,
.code-operator,
.code-punctuation {
color: var(--code-operator, var(--wa-color-gray-70));
color: var(--wa-color-gray-70);
}
.code-namespace {
@@ -31,27 +28,24 @@ pre[id*='code-block-'] {
.code-keyword,
.code-tag,
.code-url {
color: var(--code-keyword, var(--wa-color-indigo-70));
color: var(--wa-color-indigo-70);
}
.code-symbol,
.code-deleted,
.code-important {
color: var(--code-error, var(--wa-color-red-70));
}
.code-string,
.code-char,
.code-constant {
color: var(--code-string, var(--wa-color-green-70));
color: var(--wa-color-red-70);
}
.code-boolean,
.code-constant,
.code-selector,
.code-attr-name,
.code-string,
.code-char,
.code-builtin,
.code-inserted {
color: var(--code-literal, var(--wa-color-green-70));
color: var(--wa-color-green-70);
}
.code-atrule,
@@ -61,7 +55,7 @@ pre[id*='code-block-'] {
.code-function,
.code-class-name,
.code-regex {
color: var(--code-value, var(--wa-color-blue-70));
color: var(--wa-color-blue-70);
}
.code-important,

View File

@@ -252,9 +252,8 @@ wa-button.delete {
padding-bottom: 1rem;
}
wa-page::part(drawer__dialog),
wa-page::part(menu) {
overflow: clip;
scrollbar-width: thin;
}
/* smaller viewports-based navigation */

View File

@@ -166,39 +166,6 @@
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
}
/* dot grid background */
.background-dot-grid {
--dot-spacing: 1.5rem;
--dot-radius: 1.5px;
--dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);
background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
background-size: var(--dot-spacing) var(--dot-spacing);
}
/* wa illustration background pattern */
.background-wa-pattern {
position: relative;
& > * {
position: relative;
z-index: 1;
}
&::after {
--background-pattern-image: url('/assets/images/bg-wa-pattern.svg');
position: absolute;
inset: 0;
background-color: var(--background-pattern-color, transparent);
background-image: var(--background-pattern-image);
background-repeat: repeat;
content: '';
opacity: var(--background-pattern-opacity, 0.3);
z-index: 0;
}
}
/* #endregion */
/* buttons with icon toggle on hover */

View File

@@ -121,6 +121,7 @@ layout: page
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--wa-space-s);
}
&::part(form-control-label) {

View File

@@ -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);
}

View File

@@ -132,7 +132,7 @@ Most (but not all) components expose parts. You can find them in each component'
If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using standard CSS properties and CSS parts:
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
```html {.example}
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
@@ -143,16 +143,60 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
</label>
<style>
wa-checkbox.pinkify::part(control),
wa-checkbox.pinkify,
input[type='checkbox'].pinkify {
--background-color-checked: hotpink;
--border-color-checked: hotpink;
--border-width: 3px;
--checked-icon-color: lavenderblush;
}
</style>
```
Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
```html {.example}
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
<br />
<label>
<input type="checkbox" class="purpleify" />
HTML checkbox
</label>
<style>
wa-checkbox.purpleify::part(control),
input[type='checkbox'].purpleify {
border-width: 3px;
}
wa-checkbox.pinkify:state(checked)::part(control),
input[type='checkbox'].pinkify:checked {
background-color: hotpink;
border-color: hotpink;
color: lavenderblush;
wa-checkbox.purpleify:state(checked)::part(control),
input[type='checkbox'].purpleify:checked {
background-color: darkorchid;
border-color: darkorchid;
color: lavender;
}
</style>
```
```
## Style Utilities
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
```html {.example}
<wa-callout appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>appearance="outlined"</code>
</wa-callout>
<wa-callout class="wa-outlined wa-filled">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>class="wa-outlined"</code>
</wa-callout>
<style>
wa-callout:is([appearance~='outlined']) {
border-left-width: var(--wa-panel-border-radius);
}
</style>
```

View File

@@ -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.

View File

@@ -21,12 +21,9 @@ 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]
- 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]
@@ -38,13 +35,10 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
- 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]
- Fixed incorrect docs for the `wa-include-error` event which is dispatched by `<wa-include>` [issue:1663]
- 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
- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
- Upgraded `<wa-page>` from _experimental_ to _stable_
## 3.0.0-beta.6

View File

@@ -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 its filing an issue on GitHub, chatting with the community on Discord, or getting private help via email. If youre just getting started, dont 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 dont 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>Were 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>

View File

@@ -1,28 +1,26 @@
---
title: Themes
description: Style (and restyle) your website at will with any of Web Awesome's pre-built themes.
description: Themes galore
layout: page
---
<h1>{{ title }}</h1>
<p>Themes are collections of <a href="/docs/tokens">design tokens</a> that give a cohesive look and feel to the entire Web Awesome library. Style and restyle your website at will by loading any pre-built theme.</p>
{% raw %}
<p>See one you like?&nbsp;
{%- if not session.isLoggedIn -%}
<a href="/login">Log in</a>&nbsp;
{%- else -%}
Head over to <a href="/teams">your teams</a>&nbsp;
{%- endif -%}
to create a project with any one of these themes.
{%- if not currentUser.hasPro -%}
&nbsp;(Plus, there are even more themes to love with Web Awesome Pro. <wa-icon name="heart" style="color: var(--wa-color-red-70);"></wa-icon>)
{%- endif -%}
</p>
{% endraw %}
<div class="wa-split">
<h1>{{ title }}</h1>
<wa-button variant="brand" href="/themer">
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
Create a Theme
</wa-button>
</div>
<div id="theme-viewer">
{% raw %}
{% if not currentUser.hasPro %}
<p>
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
</p>
{% endif %}
{% endraw %}
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
{% for theme in themer.themes %}
{% if not theme.isPro %}
@@ -225,14 +223,13 @@ to create a project with any one of these themes.
}
#theme-viewer {
margin-block-start: 2rem;
#theme-picker {
&::part(form-control-input) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--wa-space-s);
}
&::part(form-control-label) {

View File

@@ -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"
}
]
}

View File

@@ -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"
}
}

View File

@@ -41,7 +41,6 @@ import styles from './button.css';
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
static css = [styles, variantStyles, sizeStyles];
static get validators() {

View File

@@ -119,19 +119,6 @@ describe('<wa-dialog>', () => {
expect(el.open).to.be.true;
});
it('should not close when bubbled cancel event originates from within the drawer', async () => {
const el = await fixture<WaDialog>(html` <wa-dialog open><input type="file" /></wa-dialog> `);
const input = el.querySelector('input')!;
await clickOnElement(el); // Chromium wants the page to have been clicked prior to closing the dialog.
const cancelEvent = new Event('cancel', { bubbles: true });
input.dispatchEvent(cancelEvent);
await aTimeout(250);
expect(el.open).to.be.true;
});
it('should allow initial focus to be set', async () => {
const el = await fixture<WaDialog>(html` <wa-dialog><wa-input autofocus></wa-input></wa-dialog> `);
const input = el.querySelector('wa-input')!;

View File

@@ -129,7 +129,7 @@ export default class WaDialog extends WebAwesomeElement {
private handleDialogCancel(event: Event) {
event.preventDefault();
if (!this.dialog.classList.contains('hide') && event.target === this.dialog) {
if (!this.dialog.classList.contains('hide')) {
this.requestClose(this.dialog);
}
}

View File

@@ -115,18 +115,6 @@ describe('<wa-drawer>', () => {
expect(el.open).to.be.true;
});
it('should not close when bubbled cancel event originates from within the drawer', async () => {
const el = await fixture<WaDrawer>(html`<wa-drawer open><input type="file" /></wa-drawer>`);
const input = el.querySelector('input')!;
const cancelEvent = new Event('cancel', { bubbles: true });
input.dispatchEvent(cancelEvent);
await aTimeout(250);
expect(el.open).to.be.true;
});
it('should allow initial focus to be set', async () => {
const el = await fixture<WaDrawer>(html` <wa-drawer><wa-input autofocus></wa-input></wa-drawer> `);
const input = el.querySelector('wa-input')!;

View File

@@ -141,7 +141,7 @@ export default class WaDrawer extends WebAwesomeElement {
private handleDialogCancel(event: Event) {
event.preventDefault();
if (!this.drawer.classList.contains('hide') && event.target === this.drawer) {
if (!this.drawer.classList.contains('hide')) {
this.requestClose(this.drawer);
}
}

View File

@@ -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 {

View File

@@ -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}

View File

@@ -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) {

View File

@@ -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;

View File

@@ -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);

View File

@@ -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);
},
};

View File

@@ -228,7 +228,6 @@
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
border-radius: var(--wa-border-radius-s);
@@ -282,7 +281,6 @@
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
background-color: var(--wa-color-overlay-inline);
border-radius: var(--wa-border-radius-s);
@@ -293,7 +291,6 @@
font-family: var(--wa-font-family-code);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-code);
white-space: pre;
background-color: var(--wa-color-overlay-inline);
@@ -465,7 +462,7 @@
&::after {
content: '';
background-color: var(--wa-color-text-quiet);
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>')
center no-repeat;
width: 1rem;
height: 1rem;
@@ -877,6 +874,7 @@
input[type='radio'] {
appearance: none;
position: relative;
flex: 0 0 auto;
align-items: center;
justify-content: center;
@@ -924,18 +922,21 @@
&:checked::after,
&:indeterminate::after {
position: absolute;
width: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
height: round(calc(100% - var(--wa-form-control-border-width) * 2), 1px);
content: '';
width: var(--wa-form-control-toggle-size);
height: var(--wa-form-control-toggle-size);
scale: var(--checked-icon-scale);
background-color: currentColor;
scale: var(--checked-icon-scale);
}
&:checked::after {
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
center / 1em 1em no-repeat;
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="currentColor" d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>')
center no-repeat;
}
&:indeterminate::after {
@@ -963,8 +964,7 @@
content: '';
aspect-ratio: 1;
width: 100%;
scale: var(--checked-icon-scale);
width: round(calc(100% * var(--checked-icon-scale)), 1px);
background-color: currentColor;
border-radius: 50%;
@@ -1065,7 +1065,9 @@
/* Select */
select {
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
--icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 448 512"><!--! Font Awesome Pro 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc. --><path fill="rgb(180 180 200)" d="M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');
appearance: none;
@@ -1078,7 +1080,6 @@
background-repeat: no-repeat;
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
background-size: 1rem 1rem;
cursor: pointer;
}

View File

@@ -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)

View File

@@ -457,7 +457,7 @@
border-color: var(--wa-color-gray-50);
}
&:state(checked)::part(control) {
&[checked]::part(control) {
background-color: var(--wa-form-control-activated-color);
border-color: var(--wa-form-control-activated-color);
}
@@ -466,7 +466,7 @@
background-color: var(--wa-color-surface-default);
border: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-gray-50);
}
&:state(checked)::part(thumb) {
&[checked]::part(thumb) {
border-color: var(--wa-form-control-activated-color);
}
}

View File

@@ -1,5 +1,5 @@
{
"$schema": "https://openapi.vercel.sh/vercel.json",
"outputDirectory": "packages/webawesome/_site",
"outputDirectory": "packages/webawesome-pro/_site",
"buildCommand": "bash ./vercel.sh"
}

View File

@@ -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