diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md index 0de5b0fb2e..f1d69e9932 100644 --- a/RELEASE_NOTES.md +++ b/RELEASE_NOTES.md @@ -6,6 +6,8 @@ ## Component changes +- Topbar - v2 experimental stage - disabled by default (migration involves breaking changes) + ### Non breaking UI changes ## Testing diff --git a/package-lock.json b/package-lock.json index 3380519da6..c0c64a0fa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,11 +63,11 @@ "node-fetch": "^3.3.0", "postcss-less": "^6.0.0", "postcss-loader": "^7.0.2", - "postcss-preset-env": "^8.0.1", - "prettier": "2.8.8", + "postcss-preset-env": "^8.5.1", + "prettier": "^3.0.1", "react-test-renderer": "^18.2.0", "style-loader": "^3.3.1", - "stylelint": "^15.5.0", + "stylelint": "^15.9.0", "stylelint-config-recommended-less": "^1.0.4", "stylelint-config-standard": "^33.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.6.0", @@ -2212,26 +2212,101 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, "node_modules/@csstools/cascade-layer-name-parser": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.1.tgz", - "integrity": "sha512-SAAi5DpgJJWkfTvWSaqkgyIsTawa83hMwKrktkj6ra2h+q6ZN57vOGZ6ySHq6RSo+CbP64fA3aPChPBRDDUgtw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz", + "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" + } + }, + "node_modules/@csstools/color-helpers": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz", + "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, + "node_modules/@csstools/css-calc": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.3.tgz", + "integrity": "sha512-7mJZ8gGRtSQfQKBQFi5N0Z+jzNC0q8bIkwojP1W0w+APzEqHu5wJoGVsvKxVnVklu9F8tW1PikbBRseYnAdv+g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" + } + }, + "node_modules/@csstools/css-color-parser": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.3.1.tgz", + "integrity": "sha512-cehc/DQCyb4hL4fspvyL7WiY+uAy8Iuaz0yTyndC/AyBmxkNpgtSgCSsr0aR4vkaSFVZfNNVlKbjHFwOsPGB1Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/color-helpers": "^3.0.2", + "@csstools/css-calc": "^1.1.3" + }, + "engines": { + "node": "^14 || ^16 || >=18" + }, + "peerDependencies": { + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz", - "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true, "funding": [ { @@ -2247,26 +2322,32 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.1.1" + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz", - "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "engines": { "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz", - "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true, "funding": [ { @@ -2282,8 +2363,8 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.3.0", - "@csstools/css-tokenizer": "^2.1.1" + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0" } }, "node_modules/@csstools/postcss-cascade-layers": { @@ -2307,29 +2388,65 @@ } }, "node_modules/@csstools/postcss-color-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.0.1.tgz", - "integrity": "sha512-d7379loVBgIiKTQMOUduUctq3CWMeqNpGkLhzuejvuGyA+bWYT1p7n2GzmIwgXwP0CF8DIFtDgvrsvHn3i+tWw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.2.3.tgz", + "integrity": "sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-color-mix-function": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-1.0.3.tgz", + "integrity": "sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-font-format-keywords": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.1.tgz", - "integrity": "sha512-NRwT5g/L+lDkridDiHfjNGyHvdSHJOdcXPPZXZOpSfr/AwRxTJ+wsbKAzyBb1stalkr9KjICDr+ofpkk96r0Wg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.2.tgz", + "integrity": "sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2345,50 +2462,102 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-hwb-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.0.1.tgz", - "integrity": "sha512-IYoJZ/lDgbXr5iRxlIYdTirWRerrcpezfpP6Xr+bfu8KJRgSMQVOxmXpfJwEXQuTBiX+DyVcAz+IbDdOexHq9g==", + "node_modules/@csstools/postcss-gradients-interpolation-method": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-3.0.6.tgz", + "integrity": "sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-hwb-function": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.2.2.tgz", + "integrity": "sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-ic-unit": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.1.tgz", - "integrity": "sha512-718aUIKZJDkbQrINOv6B0I70EZpTB9LzPykGVE/U3gnlXc4tjgvr6/r/G3Hopyn1D5R4BJYcMPI06tVzAgLSMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.4.tgz", + "integrity": "sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.0.1.tgz", - "integrity": "sha512-N0GC8eRkHDsI8Y3AZ6HLJol1YANNk8PFWsUHOzuDkQW0zbrPL9arYpPTw4cr8yq0rkY/9TRaBDU74QA4ULmKHQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.2.1.tgz", + "integrity": "sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "@csstools/selector-specificity": "^2.0.0", "postcss-selector-parser": "^6.0.10" @@ -2396,10 +2565,6 @@ "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -2440,12 +2605,12 @@ } }, "node_modules/@csstools/postcss-logical-viewport-units": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.2.tgz", - "integrity": "sha512-nnKFywBqRMYjv5jyjSplD/nbAnboUEGFfdxKw1o34Y1nvycgqjQavhKkmxbORxroBBIDwC5y6SfgENcPPUcOxQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.3.tgz", + "integrity": "sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==", "dev": true, "dependencies": { - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -2458,31 +2623,65 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.1.tgz", - "integrity": "sha512-V9yQqXdje6OfqDf6EL5iGOpi6N0OEczwYK83rql9UapQwFEryXlAehR5AqH8QqLYb6+y31wUXK6vMxCp0920Zg==", + "node_modules/@csstools/postcss-media-minmax": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.7.tgz", + "integrity": "sha512-5LGLdu8cJgRPmvkjUNqOPKIKeHbyQmoGKooB5Rh0mp5mLaNI9bl+IjFZ2keY0cztZYsriJsGf6Lu8R5XetuwoQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/css-calc": "^1.1.3", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", + "@csstools/media-query-list-parser": "^2.1.4" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.4.tgz", + "integrity": "sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-nested-calc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.1.tgz", - "integrity": "sha512-6C5yoF99zFb/C2Sa9Y5V0Y/2dnrjK5xe+h59L0LfdVhfanmJPrttwmfTua9etFRA1TGV46aoVMLEZ1NoHjWikg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.2.tgz", + "integrity": "sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -2518,48 +2717,90 @@ } }, "node_modules/@csstools/postcss-oklab-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.0.1.tgz", - "integrity": "sha512-MTj3w6G1TYW0k43sXjw25fY/S+LHXpFIym5NW0oO/hjHFzuz5Uwz93aUvdo/UrrFmxSQeQAYCxmq6NlH3Pf1Hw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.2.3.tgz", + "integrity": "sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.0.1.tgz", - "integrity": "sha512-ImgaFLEOhH/EdcrqDF8GSYSlsVR8EQBJ1p9ZhzoHgDkL7/uuzvSZOlRw5dFGFGnjdi7EXK4gsUjy2HU7ChHh3w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.3.0.tgz", + "integrity": "sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-relative-color-syntax": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz", + "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "dependencies": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + }, + "engines": { + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/@csstools/postcss-scope-pseudo-class": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.1.tgz", - "integrity": "sha512-wf2dcsqSQlBHc4HMMqdXdxDx4uYuqH+L08kKj+pmT+743C06STcUEu7ORFFEnqGWlOJ1kmA5BJ3pQU0EdMuA+w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.2.tgz", + "integrity": "sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -2576,12 +2817,14 @@ } }, "node_modules/@csstools/postcss-stepped-value-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.0.1.tgz", - "integrity": "sha512-VimD+M69GsZF/XssivjUwo6jXLgi86ar/gRSH7bautnCULSLxCr/HuY32N4rLRUr7qWF8oF/JTv06ceb66Q1jA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.1.1.tgz", + "integrity": "sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -2595,31 +2838,59 @@ } }, "node_modules/@csstools/postcss-text-decoration-shorthand": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.1.0.tgz", - "integrity": "sha512-ARU7Oh9nplxt99cDONVrDt/c1osWRCtgAzegtvmkn6ed7wfmjeNOlXogK1SlAIfHl6X116kPTuFL7vuyDmlPQw==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.2.4.tgz", + "integrity": "sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { + "@csstools/color-helpers": "^2.1.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-text-decoration-shorthand/node_modules/@csstools/color-helpers": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-2.1.0.tgz", + "integrity": "sha512-OWkqBa7PDzZuJ3Ha7T5bxdSVfSCfTq6K1mbAhbO1MD+GSULGjrp45i5RudyJOedstSarN/3mdwu9upJE7gDXfw==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "engines": { + "node": "^14 || ^16 || >=18" + } + }, "node_modules/@csstools/postcss-trigonometric-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.0.1.tgz", - "integrity": "sha512-uGmmVWGHozyWe6+I4w321fKUC034OB1OYW0ZP4ySHA23n+r9y93K+1yrmW+hThpSfApKhaWySoD4I71LLlFUYQ==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.1.1.tgz", + "integrity": "sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==", "dev": true, "dependencies": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" @@ -5156,6 +5427,43 @@ "node": ">=0.8" } }, + "node_modules/autoprefixer": { + "version": "10.4.15", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", + "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001520", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -5574,9 +5882,9 @@ "dev": true }, "node_modules/browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.21.10", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", + "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", "dev": true, "funding": [ { @@ -5586,13 +5894,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001517", + "electron-to-chromium": "^1.4.477", + "node-releases": "^2.0.13", + "update-browserslist-db": "^1.0.11" }, "bin": { "browserslist": "cli.js" @@ -6433,9 +6745,9 @@ } }, "node_modules/css-blank-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.1.tgz", - "integrity": "sha512-uEWT+613bR0lxUAz7BDdk4yZJ1BfzIJ9rmyOFj+p53ZP8rm0BC3nA2YsyswyxjFZsrfRDxe2WERDfKiEZNSXag==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.2.tgz", + "integrity": "sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -6485,9 +6797,9 @@ } }, "node_modules/css-has-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.1.tgz", - "integrity": "sha512-zhsGCKVkBohliMlcsZsv5WF/i4FQ3pkVMtl4yYa7Qpv/PVQebTjh7cjMoT5grW+DBZzunmgHe6skdWawgCYuPQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.2.tgz", + "integrity": "sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==", "dev": true, "dependencies": { "@csstools/selector-specificity": "^2.0.1", @@ -6603,9 +6915,9 @@ } }, "node_modules/css-prefers-color-scheme": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.1.tgz", - "integrity": "sha512-RPRyqJsk5KIjP2+WGhcGCaAJB8ojLbX1mVE8fG9127jQmnp1FNMfNMkERk/w6c4smgC/i5KxcY+Rtaa6/bMdKQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.2.tgz", + "integrity": "sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==", "dev": true, "engines": { "node": "^14 || ^16 || >=18" @@ -6666,14 +6978,20 @@ "dev": true }, "node_modules/cssdb": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz", - "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.2.tgz", + "integrity": "sha512-pQPYP7/kch4QlkTcLuUNiNL2v/E+O+VIdotT+ug62/+2B2/jkzs5fMM6RHCzGCZ9C82pODEMSIzRRUzJOrl78g==", "dev": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - } + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + }, + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + } + ] }, "node_modules/cssesc": { "version": "3.0.0", @@ -7273,9 +7591,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "version": "1.4.519", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.519.tgz", + "integrity": "sha512-kqs9oGYL4UFVkLKhqCTgBCYZv+wZ374yABDMqlDda9HvlkQxvSr7kgf4hfWVjMieDbX+1MwPHFBsOGCMIBaFKg==", "dev": true }, "node_modules/emittery": { @@ -8822,16 +9140,16 @@ } }, "node_modules/fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", + "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==", "dev": true, "engines": { "node": "*" }, "funding": { "type": "patreon", - "url": "https://www.patreon.com/infusion" + "url": "https://github.com/sponsors/rawify" } }, "node_modules/fresh": { @@ -12130,9 +12448,9 @@ "dev": true }, "node_modules/node-releases": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", - "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", + "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, "node_modules/nopt": { @@ -12209,7 +12527,7 @@ "node_modules/normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", "dev": true, "engines": { "node": ">=0.10.0" @@ -12801,9 +13119,9 @@ } }, "node_modules/postcss-attribute-case-insensitive": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.1.tgz", - "integrity": "sha512-XNVoIdu/Pskb5OhkM+iHicEVuASeqAjOTCaW8Wcbrd1UVwRukOJr5+zWzFjYxJj55Z/67ViVm9n/1hwF7MGByQ==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz", + "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -12848,28 +13166,35 @@ } }, "node_modules/postcss-color-functional-notation": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.0.1.tgz", - "integrity": "sha512-Q9YDNQddKrl6YBs3229v+ckQINLyAaPfjJqG3jp5NUlP0UMm9+JeuLO1IMpeZy0l+rIE64y4OjUq0o+xhrnnrA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.1.0.tgz", + "integrity": "sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-color-hex-alpha": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.1.tgz", - "integrity": "sha512-1ZTJvmOZXTCsedKeY+Puqwx6AgoyB1KnzSD/CGDIl1NWvDfxi1jYky4R9konw2SAYw0SOeU33EU27ihE59Fp8Q==", + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz", + "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -12886,9 +13211,9 @@ } }, "node_modules/postcss-color-rebeccapurple": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.1.tgz", - "integrity": "sha512-bzZYxBDx/uUGW9HeldOA7J69GdymOZJNz3pG8av27YSgJt9dobl4l+hI/3KAosoRJml/iWceT97pJQj3O/dQDw==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.2.tgz", + "integrity": "sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -12938,75 +13263,93 @@ } }, "node_modules/postcss-custom-media": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.1.tgz", - "integrity": "sha512-veQwzQkHgBkizxYCV/EBsiK8sFIJA0oQMQL9mpQ3gqFGc2dWlNWURHk4J44i9Q0dFeFCK81vV/Xpj7fyfNQKSA==", + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz", + "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/cascade-layer-name-parser": "^1.0.2", + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-custom-properties": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.1.1.tgz", - "integrity": "sha512-FK4dBiHdzWOosLu3kEAHaYpfcrnMfVV4nP6PT6EFIfWXrtHH9LY8idfTYnEDpq/vgE33mr8ykhs7BjlgcT9agg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.0.tgz", + "integrity": "sha512-q4VgtIKSy5+KcUvQ0WxTjDy9DZjQ5VCXAZ9+tT9+aPMbA0z6s2t1nMw0QHszru1ib5ElkXl9JUpYYU37VVUs7g==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", + "@csstools/cascade-layer-name-parser": "^1.0.4", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-custom-selectors": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.1.tgz", - "integrity": "sha512-CPs3BSdQfKqdrJ3d+3In9ppBPA8GpRy4Bd50jU+BDD6WEZOx8TTIB9i67BfRc2AVEAbRZwDMesreF95598dwhw==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.4.tgz", + "integrity": "sha512-TU2xyUUBTlpiLnwyE2ZYMUIYB41MKMkBZ8X8ntkqRDQ8sdBLhFFsPgNcOliBd5+/zcK51C9hRnSE7hKUJMxQSw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "postcss-selector-parser": "^6.0.4" + "@csstools/cascade-layer-name-parser": "^1.0.3", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "postcss-selector-parser": "^6.0.13" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-dir-pseudo-class": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.1.tgz", - "integrity": "sha512-VjiqVOTz1op7bsiw7qd5CjZ0txA5yJY/oo1wb3f37qdleRTZQ9hzhAtLDqXimn0ZKh9XbtYawc4pmVBnV+LyMA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.2.tgz", + "integrity": "sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13071,29 +13414,35 @@ } }, "node_modules/postcss-double-position-gradients": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.1.tgz", - "integrity": "sha512-XE+eKvX96E9cmldwKeRmK8AMxfQfuuHN9Yjerymau5i+fgC/vEY+B+Ke2vnEv4E8EXu8MKdLxi4DzmodusW19Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.4.tgz", + "integrity": "sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, "node_modules/postcss-focus-visible": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.1.tgz", - "integrity": "sha512-azd1NMrLBe5bfKyomui9AMcgIR2zzlqXCTnKjshNDSClmmSO5MauTyflJUqmIwjIhD16+FbPyGV8Nxsly87BjA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.2.tgz", + "integrity": "sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13110,9 +13459,9 @@ } }, "node_modules/postcss-focus-within": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.1.tgz", - "integrity": "sha512-iSpk018Yqn0xwltFR7NHjagyt+e/6u8w50uEnGOcFOddLay5zQFjpJBg6euEZu7wY5WDq83DPpdO99eL+8Er8g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.2.tgz", + "integrity": "sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -13154,9 +13503,9 @@ } }, "node_modules/postcss-image-set-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.1.tgz", - "integrity": "sha512-JnmN9Wo7WjlvM7fg00wzC4d/1kOqau+6v6hteLLqEyBjCuzoFZUU0Te3JphDyxc65RtPNsCujDwYbbs6+vYxCQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.2.tgz", + "integrity": "sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==", "dev": true, "dependencies": { "postcss-value-parser": "^4.2.0" @@ -13182,21 +13531,29 @@ } }, "node_modules/postcss-lab-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.0.1.tgz", - "integrity": "sha512-TuvrxsRIA3oWjjjI9T1ZEAolrtrLzYwYDw14GFivy0BkRqUTi4IithbM1aZkZGbAxV4lLwD6rL7MHhfDslUEzg==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.2.3.tgz", + "integrity": "sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -13269,36 +13626,30 @@ "dev": true }, "node_modules/postcss-logical": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.1.tgz", - "integrity": "sha512-0LIzRgbT42n0q8txcM9SrLkYLjr1LTbRTy80bnKiYXY8tnYGdjkBymwb5XE87o4csW1z8dhKD1VRI6cHBQBQtw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.2.0.tgz", + "integrity": "sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "postcss-value-parser": "^4.2.0" }, "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } }, - "node_modules/postcss-media-minmax": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "postcss": "^8.1.0" - } - }, "node_modules/postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -13468,10 +13819,20 @@ } }, "node_modules/postcss-nesting": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.1.0.tgz", - "integrity": "sha512-TVBCeKlUmMyX3sNeSg10yATb2XmAoosp0E1zdlpjrD+L2FrQPmrRTxlRFQh/R0Y4WlQ0butfDwRhzlYuj7y/TA==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz", + "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], "dependencies": { "@csstools/selector-specificity": "^2.0.0", "postcss-selector-parser": "^6.0.10" @@ -13479,10 +13840,6 @@ "engines": { "node": "^14 || ^16 || >=18" }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, "peerDependencies": { "postcss": "^8.4" } @@ -13626,9 +13983,9 @@ } }, "node_modules/postcss-opacity-percentage": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", - "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz", + "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==", "dev": true, "funding": [ { @@ -13641,7 +13998,7 @@ } ], "engines": { - "node": "^12 || ^14 || >=16" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { "postcss": "^8.2" @@ -13711,113 +14068,89 @@ } }, "node_modules/postcss-preset-env": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.0.1.tgz", - "integrity": "sha512-IUbymw0JlUbyVG+I85963PNWgPp3KhnFa1sxU7M/2dGthxV8e297P0VV5W9XcyypoH4hirH2fp1c6fmqh6YnSg==", - "dev": true, - "dependencies": { - "@csstools/postcss-cascade-layers": "^3.0.0", - "@csstools/postcss-color-function": "^2.0.0", - "@csstools/postcss-font-format-keywords": "^2.0.0", - "@csstools/postcss-hwb-function": "^2.0.0", - "@csstools/postcss-ic-unit": "^2.0.0", - "@csstools/postcss-is-pseudo-class": "^3.0.0", - "@csstools/postcss-logical-float-and-clear": "^1.0.0", - "@csstools/postcss-logical-resize": "^1.0.0", - "@csstools/postcss-logical-viewport-units": "^1.0.0", - "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", - "@csstools/postcss-nested-calc": "^2.0.0", - "@csstools/postcss-normalize-display-values": "^2.0.0", - "@csstools/postcss-oklab-function": "^2.0.0", - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "@csstools/postcss-scope-pseudo-class": "^2.0.0", - "@csstools/postcss-stepped-value-functions": "^2.0.0", - "@csstools/postcss-text-decoration-shorthand": "^2.0.0", - "@csstools/postcss-trigonometric-functions": "^2.0.0", - "@csstools/postcss-unset-value": "^2.0.0", - "autoprefixer": "^10.4.13", - "browserslist": "^4.21.4", - "css-blank-pseudo": "^5.0.0", - "css-has-pseudo": "^5.0.0", - "css-prefers-color-scheme": "^8.0.0", - "cssdb": "^7.4.0", - "postcss-attribute-case-insensitive": "^6.0.0", - "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^5.0.0", - "postcss-color-hex-alpha": "^9.0.0", - "postcss-color-rebeccapurple": "^8.0.0", - "postcss-custom-media": "^9.1.0", - "postcss-custom-properties": "^13.1.0", - "postcss-custom-selectors": "^7.1.0", - "postcss-dir-pseudo-class": "^7.0.0", - "postcss-double-position-gradients": "^4.0.0", - "postcss-focus-visible": "^8.0.0", - "postcss-focus-within": "^7.0.0", - "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^4.0.0", - "postcss-image-set-function": "^5.0.0", - "postcss-initial": "^4.0.1", - "postcss-lab-function": "^5.0.0", - "postcss-logical": "^6.0.0", - "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^11.0.0", - "postcss-opacity-percentage": "^1.1.3", - "postcss-overflow-shorthand": "^4.0.0", - "postcss-page-break": "^3.0.4", - "postcss-place": "^8.0.0", - "postcss-pseudo-class-any-link": "^8.0.0", - "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^7.0.0", - "postcss-value-parser": "^4.2.0" - }, - "engines": { - "node": "^14 || ^16 || >=18" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/csstools" - }, - "peerDependencies": { - "postcss": "^8.4" - } - }, - "node_modules/postcss-preset-env/node_modules/autoprefixer": { - "version": "10.4.13", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", - "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.1.tgz", + "integrity": "sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==", "dev": true, "funding": [ { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" + "type": "github", + "url": "https://github.com/sponsors/csstools" }, { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" + "type": "opencollective", + "url": "https://opencollective.com/csstools" } ], "dependencies": { - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001426", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", + "@csstools/postcss-cascade-layers": "^3.0.1", + "@csstools/postcss-color-function": "^2.2.3", + "@csstools/postcss-color-mix-function": "^1.0.3", + "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.6", + "@csstools/postcss-hwb-function": "^2.2.2", + "@csstools/postcss-ic-unit": "^2.0.4", + "@csstools/postcss-is-pseudo-class": "^3.2.1", + "@csstools/postcss-logical-float-and-clear": "^1.0.1", + "@csstools/postcss-logical-resize": "^1.0.1", + "@csstools/postcss-logical-viewport-units": "^1.0.3", + "@csstools/postcss-media-minmax": "^1.0.4", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.4", + "@csstools/postcss-nested-calc": "^2.0.2", + "@csstools/postcss-normalize-display-values": "^2.0.1", + "@csstools/postcss-oklab-function": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", + "@csstools/postcss-relative-color-syntax": "^1.0.2", + "@csstools/postcss-scope-pseudo-class": "^2.0.2", + "@csstools/postcss-stepped-value-functions": "^2.1.1", + "@csstools/postcss-text-decoration-shorthand": "^2.2.4", + "@csstools/postcss-trigonometric-functions": "^2.1.1", + "@csstools/postcss-unset-value": "^2.0.1", + "autoprefixer": "^10.4.14", + "browserslist": "^4.21.9", + "css-blank-pseudo": "^5.0.2", + "css-has-pseudo": "^5.0.2", + "css-prefers-color-scheme": "^8.0.2", + "cssdb": "^7.6.0", + "postcss-attribute-case-insensitive": "^6.0.2", + "postcss-clamp": "^4.1.0", + "postcss-color-functional-notation": "^5.1.0", + "postcss-color-hex-alpha": "^9.0.2", + "postcss-color-rebeccapurple": "^8.0.2", + "postcss-custom-media": "^9.1.5", + "postcss-custom-properties": "^13.2.0", + "postcss-custom-selectors": "^7.1.3", + "postcss-dir-pseudo-class": "^7.0.2", + "postcss-double-position-gradients": "^4.0.4", + "postcss-focus-visible": "^8.0.2", + "postcss-focus-within": "^7.0.2", + "postcss-font-variant": "^5.0.0", + "postcss-gap-properties": "^4.0.1", + "postcss-image-set-function": "^5.0.2", + "postcss-initial": "^4.0.1", + "postcss-lab-function": "^5.2.3", + "postcss-logical": "^6.2.0", + "postcss-nesting": "^11.3.0", + "postcss-opacity-percentage": "^2.0.0", + "postcss-overflow-shorthand": "^4.0.1", + "postcss-page-break": "^3.0.4", + "postcss-place": "^8.0.1", + "postcss-pseudo-class-any-link": "^8.0.2", + "postcss-replace-overflow-wrap": "^4.0.0", + "postcss-selector-not": "^7.0.1", "postcss-value-parser": "^4.2.0" }, - "bin": { - "autoprefixer": "bin/autoprefixer" - }, "engines": { - "node": "^10 || ^12 || >=14" + "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "postcss": "^8.1.0" + "postcss": "^8.4" } }, "node_modules/postcss-pseudo-class-any-link": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.1.tgz", - "integrity": "sha512-CYcLGofbGDhx6BmNFQGFH0cqW+qlXVk9PR4LZ8Y7g24m6TopYKt6FSwhMGAIyme6lQxgB32XMhpYRwZAcPnMXA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.2.tgz", + "integrity": "sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==", "dev": true, "dependencies": { "postcss-selector-parser": "^6.0.10" @@ -14002,15 +14335,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -17178,9 +17511,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", + "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", "dev": true, "funding": [ { @@ -17190,6 +17523,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { @@ -17197,7 +17534,7 @@ "picocolors": "^1.0.0" }, "bin": { - "browserslist-lint": "cli.js" + "update-browserslist-db": "cli.js" }, "peerDependencies": { "browserslist": ">= 4.21.0" @@ -19765,29 +20102,52 @@ } }, "@csstools/cascade-layer-name-parser": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.1.tgz", - "integrity": "sha512-SAAi5DpgJJWkfTvWSaqkgyIsTawa83hMwKrktkj6ra2h+q6ZN57vOGZ6ySHq6RSo+CbP64fA3aPChPBRDDUgtw==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-1.0.4.tgz", + "integrity": "sha512-zXMGsJetbLoXe+gjEES07MEGjL0Uy3hMxmnGtVBrRpVKr5KV9OgCB09zr/vLrsEtoVQTgJFewxaU8IYSAE4tjg==", + "dev": true, + "requires": {} + }, + "@csstools/color-helpers": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-3.0.2.tgz", + "integrity": "sha512-NMVs/l7Y9eIKL5XjbCHEgGcG8LOUT2qVcRjX6EzkCdlvftHVKr2tHIPzHavfrULRZ5Q2gxrJ9f44dAlj6fX97Q==", + "dev": true + }, + "@csstools/css-calc": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.1.3.tgz", + "integrity": "sha512-7mJZ8gGRtSQfQKBQFi5N0Z+jzNC0q8bIkwojP1W0w+APzEqHu5wJoGVsvKxVnVklu9F8tW1PikbBRseYnAdv+g==", "dev": true, "requires": {} }, + "@csstools/css-color-parser": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-1.3.1.tgz", + "integrity": "sha512-cehc/DQCyb4hL4fspvyL7WiY+uAy8Iuaz0yTyndC/AyBmxkNpgtSgCSsr0aR4vkaSFVZfNNVlKbjHFwOsPGB1Q==", + "dev": true, + "requires": { + "@csstools/color-helpers": "^3.0.2", + "@csstools/css-calc": "^1.1.3" + } + }, "@csstools/css-parser-algorithms": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.0.tgz", - "integrity": "sha512-dTKSIHHWc0zPvcS5cqGP+/TPFUJB0ekJ9dGKvMAFoNuBFhDPBt9OMGNZiIA5vTiNdGHHBeScYPXIGBMnVOahsA==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.1.tgz", + "integrity": "sha512-xrvsmVUtefWMWQsGgFffqWSK03pZ1vfDki4IVIIUxxDKnGBzqNgv0A7SB1oXtVNEkcVO8xi1ZrTL29HhSu5kGA==", "dev": true, "requires": {} }, "@csstools/css-tokenizer": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz", - "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.0.tgz", + "integrity": "sha512-wErmsWCbsmig8sQKkM6pFhr/oPha1bHfvxsUY5CYSQxwyhA9Ulrs8EqCgClhg4Tgg2XapVstGqSVcz0xOYizZA==", "dev": true }, "@csstools/media-query-list-parser": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.2.tgz", - "integrity": "sha512-M8cFGGwl866o6++vIY7j1AKuq9v57cf+dGepScwCcbut9ypJNr4Cj+LLTWligYUZ0uyhEoJDKt5lvyBfh2L3ZQ==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.4.tgz", + "integrity": "sha512-V/OUXYX91tAC1CDsiY+HotIcJR+vPtzrX8pCplCpT++i8ThZZsq5F5dzZh/bDM3WUOjrvC1ljed1oSJxMfjqhw==", "dev": true, "requires": {} }, @@ -19802,47 +20162,75 @@ } }, "@csstools/postcss-color-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.0.1.tgz", - "integrity": "sha512-d7379loVBgIiKTQMOUduUctq3CWMeqNpGkLhzuejvuGyA+bWYT1p7n2GzmIwgXwP0CF8DIFtDgvrsvHn3i+tWw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-2.2.3.tgz", + "integrity": "sha512-b1ptNkr1UWP96EEHqKBWWaV5m/0hgYGctgA/RVZhONeP1L3T/8hwoqDm9bB23yVCfOgE9U93KI9j06+pEkJTvw==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, + "@csstools/postcss-color-mix-function": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-1.0.3.tgz", + "integrity": "sha512-QGXjGugTluqFZWzVf+S3wCiRiI0ukXlYqCi7OnpDotP/zaVTyl/aqZujLFzTOXy24BoWnu89frGMc79ohY5eog==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "@csstools/postcss-font-format-keywords": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.1.tgz", - "integrity": "sha512-NRwT5g/L+lDkridDiHfjNGyHvdSHJOdcXPPZXZOpSfr/AwRxTJ+wsbKAzyBb1stalkr9KjICDr+ofpkk96r0Wg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-2.0.2.tgz", + "integrity": "sha512-iKYZlIs6JsNT7NKyRjyIyezTCHLh4L4BBB3F5Nx7Dc4Z/QmBgX+YJFuUSar8IM6KclGiAUFGomXFdYxAwJydlA==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, + "@csstools/postcss-gradients-interpolation-method": { + "version": "3.0.6", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-3.0.6.tgz", + "integrity": "sha512-rBOBTat/YMmB0G8VHwKqDEx+RZ4KCU9j42K8LwS0IpZnyThalZZF7BCSsZ6TFlZhcRZKlZy3LLFI2pLqjNVGGA==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, "@csstools/postcss-hwb-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.0.1.tgz", - "integrity": "sha512-IYoJZ/lDgbXr5iRxlIYdTirWRerrcpezfpP6Xr+bfu8KJRgSMQVOxmXpfJwEXQuTBiX+DyVcAz+IbDdOexHq9g==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-2.2.2.tgz", + "integrity": "sha512-W5Y5oaJ382HSlbdGfPf60d7dAK6Hqf10+Be1yZbd/TNNrQ/3dDdV1c07YwOXPQ3PZ6dvFMhxbIbn8EC3ki3nEg==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-ic-unit": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.1.tgz", - "integrity": "sha512-718aUIKZJDkbQrINOv6B0I70EZpTB9LzPykGVE/U3gnlXc4tjgvr6/r/G3Hopyn1D5R4BJYcMPI06tVzAgLSMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-2.0.4.tgz", + "integrity": "sha512-9W2ZbV7whWnr1Gt4qYgxMWzbevZMOvclUczT5vk4yR6vS53W/njiiUhtm/jh/BKYwQ1W3PECZjgAd2dH4ebJig==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "@csstools/postcss-is-pseudo-class": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.0.1.tgz", - "integrity": "sha512-N0GC8eRkHDsI8Y3AZ6HLJol1YANNk8PFWsUHOzuDkQW0zbrPL9arYpPTw4cr8yq0rkY/9TRaBDU74QA4ULmKHQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-3.2.1.tgz", + "integrity": "sha512-AtANdV34kJl04Al62is3eQRk/BfOfyAvEmRJvbt+nx5REqImLC+2XhuE6skgkcPli1l8ONS67wS+l1sBzySc3Q==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.0", @@ -19866,29 +20254,41 @@ } }, "@csstools/postcss-logical-viewport-units": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.2.tgz", - "integrity": "sha512-nnKFywBqRMYjv5jyjSplD/nbAnboUEGFfdxKw1o34Y1nvycgqjQavhKkmxbORxroBBIDwC5y6SfgENcPPUcOxQ==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-1.0.3.tgz", + "integrity": "sha512-6zqcyRg9HSqIHIPMYdt6THWhRmE5/tyHKJQLysn2TeDf/ftq7Em9qwMTx98t2C/7UxIsYS8lOiHHxAVjWn2WUg==", + "dev": true, + "requires": { + "@csstools/css-tokenizer": "^2.1.1" + } + }, + "@csstools/postcss-media-minmax": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-1.0.7.tgz", + "integrity": "sha512-5LGLdu8cJgRPmvkjUNqOPKIKeHbyQmoGKooB5Rh0mp5mLaNI9bl+IjFZ2keY0cztZYsriJsGf6Lu8R5XetuwoQ==", "dev": true, "requires": { - "@csstools/css-tokenizer": "^2.0.0" + "@csstools/css-calc": "^1.1.3", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", + "@csstools/media-query-list-parser": "^2.1.4" } }, "@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.1.tgz", - "integrity": "sha512-V9yQqXdje6OfqDf6EL5iGOpi6N0OEczwYK83rql9UapQwFEryXlAehR5AqH8QqLYb6+y31wUXK6vMxCp0920Zg==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-1.0.4.tgz", + "integrity": "sha512-IwyTbyR8E2y3kh6Fhrs251KjKBJeUPV5GlnUKnpU70PRFEN2DolWbf2V4+o/B9+Oj77P/DullLTulWEQ8uFtAA==", "dev": true, "requires": { - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" } }, "@csstools/postcss-nested-calc": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.1.tgz", - "integrity": "sha512-6C5yoF99zFb/C2Sa9Y5V0Y/2dnrjK5xe+h59L0LfdVhfanmJPrttwmfTua9etFRA1TGV46aoVMLEZ1NoHjWikg==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-nested-calc/-/postcss-nested-calc-2.0.2.tgz", + "integrity": "sha512-jbwrP8rN4e7LNaRcpx3xpMUjhtt34I9OV+zgbcsYAAk6k1+3kODXJBf95/JMYWhu9g1oif7r06QVUgfWsKxCFw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -19904,58 +20304,85 @@ } }, "@csstools/postcss-oklab-function": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.0.1.tgz", - "integrity": "sha512-MTj3w6G1TYW0k43sXjw25fY/S+LHXpFIym5NW0oO/hjHFzuz5Uwz93aUvdo/UrrFmxSQeQAYCxmq6NlH3Pf1Hw==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-2.2.3.tgz", + "integrity": "sha512-AgJ2rWMnLCDcbSMTHSqBYn66DNLBym6JpBpCaqmwZ9huGdljjDRuH3DzOYzkgQ7Pm2K92IYIq54IvFHloUOdvA==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "@csstools/postcss-progressive-custom-properties": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.0.1.tgz", - "integrity": "sha512-ImgaFLEOhH/EdcrqDF8GSYSlsVR8EQBJ1p9ZhzoHgDkL7/uuzvSZOlRw5dFGFGnjdi7EXK4gsUjy2HU7ChHh3w==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-2.3.0.tgz", + "integrity": "sha512-Zd8ojyMlsL919TBExQ1I0CTpBDdyCpH/yOdqatZpuC3sd22K4SwC7+Yez3Q/vmXMWSAl+shjNeFZ7JMyxMjK+Q==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, + "@csstools/postcss-relative-color-syntax": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz", + "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==", + "dev": true, + "requires": { + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" + } + }, "@csstools/postcss-scope-pseudo-class": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.1.tgz", - "integrity": "sha512-wf2dcsqSQlBHc4HMMqdXdxDx4uYuqH+L08kKj+pmT+743C06STcUEu7ORFFEnqGWlOJ1kmA5BJ3pQU0EdMuA+w==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-scope-pseudo-class/-/postcss-scope-pseudo-class-2.0.2.tgz", + "integrity": "sha512-6Pvo4uexUCXt+Hz5iUtemQAcIuCYnL+ePs1khFR6/xPgC92aQLJ0zGHonWoewiBE+I++4gXK3pr+R1rlOFHe5w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" } }, "@csstools/postcss-stepped-value-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.0.1.tgz", - "integrity": "sha512-VimD+M69GsZF/XssivjUwo6jXLgi86ar/gRSH7bautnCULSLxCr/HuY32N4rLRUr7qWF8oF/JTv06ceb66Q1jA==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-2.1.1.tgz", + "integrity": "sha512-YCvdF0GCZK35nhLgs7ippcxDlRVe5QsSht3+EghqTjnYnyl3BbWIN6fYQ1dKWYTJ+7Bgi41TgqQFfJDcp9Xy/w==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-text-decoration-shorthand": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.1.0.tgz", - "integrity": "sha512-ARU7Oh9nplxt99cDONVrDt/c1osWRCtgAzegtvmkn6ed7wfmjeNOlXogK1SlAIfHl6X116kPTuFL7vuyDmlPQw==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-2.2.4.tgz", + "integrity": "sha512-zPN56sQkS/7YTCVZhOBVCWf7AiNge8fXDl7JVaHLz2RyT4pnyK2gFjckWRLpO0A2xkm1lCgZ0bepYZTwAVd/5A==", "dev": true, "requires": { + "@csstools/color-helpers": "^2.1.0", "postcss-value-parser": "^4.2.0" + }, + "dependencies": { + "@csstools/color-helpers": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-2.1.0.tgz", + "integrity": "sha512-OWkqBa7PDzZuJ3Ha7T5bxdSVfSCfTq6K1mbAhbO1MD+GSULGjrp45i5RudyJOedstSarN/3mdwu9upJE7gDXfw==", + "dev": true + } } }, "@csstools/postcss-trigonometric-functions": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.0.1.tgz", - "integrity": "sha512-uGmmVWGHozyWe6+I4w321fKUC034OB1OYW0ZP4ySHA23n+r9y93K+1yrmW+hThpSfApKhaWySoD4I71LLlFUYQ==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-2.1.1.tgz", + "integrity": "sha512-XcXmHEFfHXhvYz40FtDlA4Fp4NQln2bWTsCwthd2c+MCnYArUYU3YaMqzR5CrKP3pMoGYTBnp5fMqf1HxItNyw==", "dev": true, "requires": { - "postcss-value-parser": "^4.2.0" + "@csstools/css-calc": "^1.1.1", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1" } }, "@csstools/postcss-unset-value": { @@ -21980,6 +22407,20 @@ "integrity": "sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA=", "dev": true }, + "autoprefixer": { + "version": "10.4.15", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.15.tgz", + "integrity": "sha512-KCuPB8ZCIqFdA4HwKXsvz7j6gvSDNhDP7WnUjBleRkKjPdvCmHFuQ77ocavI8FT6NdvlBnE2UFr2H4Mycn8Vew==", + "dev": true, + "requires": { + "browserslist": "^4.21.10", + "caniuse-lite": "^1.0.30001520", + "fraction.js": "^4.2.0", + "normalize-range": "^0.1.2", + "picocolors": "^1.0.0", + "postcss-value-parser": "^4.2.0" + } + }, "available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -22300,15 +22741,15 @@ "dev": true }, "browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.21.10", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz", + "integrity": "sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ==", "dev": true, "requires": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001517", + "electron-to-chromium": "^1.4.477", + "node-releases": "^2.0.13", + "update-browserslist-db": "^1.0.11" } }, "bser": { @@ -22970,9 +23411,9 @@ } }, "css-blank-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.1.tgz", - "integrity": "sha512-uEWT+613bR0lxUAz7BDdk4yZJ1BfzIJ9rmyOFj+p53ZP8rm0BC3nA2YsyswyxjFZsrfRDxe2WERDfKiEZNSXag==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-5.0.2.tgz", + "integrity": "sha512-aCU4AZ7uEcVSUzagTlA9pHciz7aWPKA/YzrEkpdSopJ2pvhIxiQ5sYeMz1/KByxlIo4XBdvMNJAVKMg/GRnhfw==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -23000,9 +23441,9 @@ "dev": true }, "css-has-pseudo": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.1.tgz", - "integrity": "sha512-zhsGCKVkBohliMlcsZsv5WF/i4FQ3pkVMtl4yYa7Qpv/PVQebTjh7cjMoT5grW+DBZzunmgHe6skdWawgCYuPQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-5.0.2.tgz", + "integrity": "sha512-q+U+4QdwwB7T9VEW/LyO6CFrLAeLqOykC5mDqJXc7aKZAhDbq7BvGT13VGJe+IwBfdN2o3Xdw2kJ5IxwV1Sc9Q==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.1", @@ -23067,9 +23508,9 @@ } }, "css-prefers-color-scheme": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.1.tgz", - "integrity": "sha512-RPRyqJsk5KIjP2+WGhcGCaAJB8ojLbX1mVE8fG9127jQmnp1FNMfNMkERk/w6c4smgC/i5KxcY+Rtaa6/bMdKQ==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-8.0.2.tgz", + "integrity": "sha512-OvFghizHJ45x7nsJJUSYLyQNTzsCU8yWjxAc/nhPQg1pbs18LMoET8N3kOweFDPy0JV0OSXN2iqRFhPBHYOeMA==", "dev": true, "requires": {} }, @@ -23109,9 +23550,9 @@ "dev": true }, "cssdb": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.4.1.tgz", - "integrity": "sha512-0Q8NOMpXJ3iTDDbUv9grcmQAfdDx4qz+fN/+Md2FGbevT+6+bJNQ2LjB2YIUlLbpBTM32idU1Sb+tb/uGt6/XQ==", + "version": "7.7.2", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-7.7.2.tgz", + "integrity": "sha512-pQPYP7/kch4QlkTcLuUNiNL2v/E+O+VIdotT+ug62/+2B2/jkzs5fMM6RHCzGCZ9C82pODEMSIzRRUzJOrl78g==", "dev": true }, "cssesc": { @@ -23580,9 +24021,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "version": "1.4.519", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.519.tgz", + "integrity": "sha512-kqs9oGYL4UFVkLKhqCTgBCYZv+wZ374yABDMqlDda9HvlkQxvSr7kgf4hfWVjMieDbX+1MwPHFBsOGCMIBaFKg==", "dev": true }, "emittery": { @@ -24695,9 +25136,9 @@ "dev": true }, "fraction.js": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz", - "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==", + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.6.tgz", + "integrity": "sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==", "dev": true }, "fresh": { @@ -27167,9 +27608,9 @@ "dev": true }, "node-releases": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", - "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "version": "2.0.13", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.13.tgz", + "integrity": "sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==", "dev": true }, "nopt": { @@ -27227,7 +27668,7 @@ "normalize-range": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=", + "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", "dev": true }, "normalize-url": { @@ -27645,9 +28086,9 @@ } }, "postcss-attribute-case-insensitive": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.1.tgz", - "integrity": "sha512-XNVoIdu/Pskb5OhkM+iHicEVuASeqAjOTCaW8Wcbrd1UVwRukOJr5+zWzFjYxJj55Z/67ViVm9n/1hwF7MGByQ==", + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-6.0.2.tgz", + "integrity": "sha512-IRuCwwAAQbgaLhxQdQcIIK0dCVXg3XDUnzgKD8iwdiYdwU4rMWRWyl/W9/0nA4ihVpq5pyALiHB2veBJ0292pw==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27673,27 +28114,28 @@ } }, "postcss-color-functional-notation": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.0.1.tgz", - "integrity": "sha512-Q9YDNQddKrl6YBs3229v+ckQINLyAaPfjJqG3jp5NUlP0UMm9+JeuLO1IMpeZy0l+rIE64y4OjUq0o+xhrnnrA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-5.1.0.tgz", + "integrity": "sha512-w2R4py6zrVE1U7FwNaAc76tNQlG9GLkrBbcFw+VhUjyDDiV28vfZG+l4LyPmpoQpeSJVtu8VgNjE8Jv5SpC7dQ==", "dev": true, "requires": { + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "postcss-color-hex-alpha": { - "version": "9.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.1.tgz", - "integrity": "sha512-1ZTJvmOZXTCsedKeY+Puqwx6AgoyB1KnzSD/CGDIl1NWvDfxi1jYky4R9konw2SAYw0SOeU33EU27ihE59Fp8Q==", + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-9.0.2.tgz", + "integrity": "sha512-SfPjgr//VQ/DOCf80STIAsdAs7sbIbxATvVmd+Ec7JvR8onz9pjawhq3BJM3Pie40EE3TyB0P6hft16D33Nlyg==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, "postcss-color-rebeccapurple": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.1.tgz", - "integrity": "sha512-bzZYxBDx/uUGW9HeldOA7J69GdymOZJNz3pG8av27YSgJt9dobl4l+hI/3KAosoRJml/iWceT97pJQj3O/dQDw==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-8.0.2.tgz", + "integrity": "sha512-xWf/JmAxVoB5bltHpXk+uGRoGFwu4WDAR7210el+iyvTdqiKpDhtcT8N3edXMoVJY0WHFMrKMUieql/wRNiXkw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -27721,45 +28163,45 @@ } }, "postcss-custom-media": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.1.tgz", - "integrity": "sha512-veQwzQkHgBkizxYCV/EBsiK8sFIJA0oQMQL9mpQ3gqFGc2dWlNWURHk4J44i9Q0dFeFCK81vV/Xpj7fyfNQKSA==", + "version": "9.1.5", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-9.1.5.tgz", + "integrity": "sha512-GStyWMz7Qbo/Gtw1xVspzVSX8eipgNg4lpsO3CAeY4/A1mzok+RV6MCv3fg62trWijh/lYEj6vps4o8JcBBpDA==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "@csstools/media-query-list-parser": "^2.0.0" + "@csstools/cascade-layer-name-parser": "^1.0.2", + "@csstools/css-parser-algorithms": "^2.2.0", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/media-query-list-parser": "^2.1.1" } }, "postcss-custom-properties": { - "version": "13.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.1.1.tgz", - "integrity": "sha512-FK4dBiHdzWOosLu3kEAHaYpfcrnMfVV4nP6PT6EFIfWXrtHH9LY8idfTYnEDpq/vgE33mr8ykhs7BjlgcT9agg==", + "version": "13.3.0", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-13.3.0.tgz", + "integrity": "sha512-q4VgtIKSy5+KcUvQ0WxTjDy9DZjQ5VCXAZ9+tT9+aPMbA0z6s2t1nMw0QHszru1ib5ElkXl9JUpYYU37VVUs7g==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", + "@csstools/cascade-layer-name-parser": "^1.0.4", + "@csstools/css-parser-algorithms": "^2.3.1", + "@csstools/css-tokenizer": "^2.2.0", "postcss-value-parser": "^4.2.0" } }, "postcss-custom-selectors": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.1.tgz", - "integrity": "sha512-CPs3BSdQfKqdrJ3d+3In9ppBPA8GpRy4Bd50jU+BDD6WEZOx8TTIB9i67BfRc2AVEAbRZwDMesreF95598dwhw==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-7.1.4.tgz", + "integrity": "sha512-TU2xyUUBTlpiLnwyE2ZYMUIYB41MKMkBZ8X8ntkqRDQ8sdBLhFFsPgNcOliBd5+/zcK51C9hRnSE7hKUJMxQSw==", "dev": true, "requires": { - "@csstools/cascade-layer-name-parser": "^1.0.0", - "@csstools/css-parser-algorithms": "^2.0.0", - "@csstools/css-tokenizer": "^2.0.0", - "postcss-selector-parser": "^6.0.4" + "@csstools/cascade-layer-name-parser": "^1.0.3", + "@csstools/css-parser-algorithms": "^2.3.0", + "@csstools/css-tokenizer": "^2.1.1", + "postcss-selector-parser": "^6.0.13" } }, "postcss-dir-pseudo-class": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.1.tgz", - "integrity": "sha512-VjiqVOTz1op7bsiw7qd5CjZ0txA5yJY/oo1wb3f37qdleRTZQ9hzhAtLDqXimn0ZKh9XbtYawc4pmVBnV+LyMA==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-7.0.2.tgz", + "integrity": "sha512-cMnslilYxBf9k3qejnovrUONZx1rXeUZJw06fgIUBzABJe3D2LiLL5WAER7Imt3nrkaIgG05XZBztueLEf5P8w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27794,28 +28236,28 @@ "requires": {} }, "postcss-double-position-gradients": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.1.tgz", - "integrity": "sha512-XE+eKvX96E9cmldwKeRmK8AMxfQfuuHN9Yjerymau5i+fgC/vEY+B+Ke2vnEv4E8EXu8MKdLxi4DzmodusW19Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-4.0.4.tgz", + "integrity": "sha512-nUAbUXURemLXIrl4Xoia2tiu5z/n8sY+BVDZApoeT9BlpByyrp02P/lFCRrRvZ/zrGRE+MOGLhk8o7VcMCtPtQ==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", "postcss-value-parser": "^4.2.0" } }, "postcss-focus-visible": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.1.tgz", - "integrity": "sha512-azd1NMrLBe5bfKyomui9AMcgIR2zzlqXCTnKjshNDSClmmSO5MauTyflJUqmIwjIhD16+FbPyGV8Nxsly87BjA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-8.0.2.tgz", + "integrity": "sha512-f/Vd+EC/GaKElknU59esVcRYr/Y3t1ZAQyL4u2xSOgkDy4bMCmG7VP5cGvj3+BTLNE9ETfEuz2nnt4qkZwTTeA==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" } }, "postcss-focus-within": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.1.tgz", - "integrity": "sha512-iSpk018Yqn0xwltFR7NHjagyt+e/6u8w50uEnGOcFOddLay5zQFjpJBg6euEZu7wY5WDq83DPpdO99eL+8Er8g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-7.0.2.tgz", + "integrity": "sha512-AHAJ89UQBcqBvFgQJE9XasGuwMNkKsGj4D/f9Uk60jFmEBHpAL14DrnSk3Rj+SwZTr/WUG+mh+Rvf8fid/346w==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -27836,9 +28278,9 @@ "requires": {} }, "postcss-image-set-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.1.tgz", - "integrity": "sha512-JnmN9Wo7WjlvM7fg00wzC4d/1kOqau+6v6hteLLqEyBjCuzoFZUU0Te3JphDyxc65RtPNsCujDwYbbs6+vYxCQ==", + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-5.0.2.tgz", + "integrity": "sha512-Sszjwo0ubETX0Fi5MvpYzsONwrsjeabjMoc5YqHvURFItXgIu3HdCjcVuVKGMPGzKRhgaknmdM5uVWInWPJmeg==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" @@ -27852,13 +28294,15 @@ "requires": {} }, "postcss-lab-function": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.0.1.tgz", - "integrity": "sha512-TuvrxsRIA3oWjjjI9T1ZEAolrtrLzYwYDw14GFivy0BkRqUTi4IithbM1aZkZGbAxV4lLwD6rL7MHhfDslUEzg==", + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-5.2.3.tgz", + "integrity": "sha512-fi32AYKzji5/rvgxo5zXHFvAYBw0u0OzELbeCNjEZVLUir18Oj+9RmNphtM8QdLUaUnrfx8zy8vVYLmFLkdmrQ==", "dev": true, "requires": { - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "postcss-value-parser": "^4.2.0" + "@csstools/css-color-parser": "^1.2.0", + "@csstools/css-parser-algorithms": "^2.1.1", + "@csstools/css-tokenizer": "^2.1.1", + "@csstools/postcss-progressive-custom-properties": "^2.3.0" } }, "postcss-less": { @@ -27906,21 +28350,14 @@ } }, "postcss-logical": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.0.1.tgz", - "integrity": "sha512-0LIzRgbT42n0q8txcM9SrLkYLjr1LTbRTy80bnKiYXY8tnYGdjkBymwb5XE87o4csW1z8dhKD1VRI6cHBQBQtw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-6.2.0.tgz", + "integrity": "sha512-aqlfKGaY0nnbgI9jwUikp4gJKBqcH5noU/EdnIVceghaaDPYhZuyJVxlvWNy55tlTG5tunRKCTAX9yljLiFgmw==", "dev": true, "requires": { "postcss-value-parser": "^4.2.0" } }, - "postcss-media-minmax": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz", - "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==", - "dev": true, - "requires": {} - }, "postcss-media-query-parser": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz", @@ -28031,9 +28468,9 @@ } }, "postcss-nesting": { - "version": "11.1.0", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.1.0.tgz", - "integrity": "sha512-TVBCeKlUmMyX3sNeSg10yATb2XmAoosp0E1zdlpjrD+L2FrQPmrRTxlRFQh/R0Y4WlQ0butfDwRhzlYuj7y/TA==", + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz", + "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==", "dev": true, "requires": { "@csstools/selector-specificity": "^2.0.0", @@ -28126,9 +28563,9 @@ } }, "postcss-opacity-percentage": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.3.tgz", - "integrity": "sha512-An6Ba4pHBiDtyVpSLymUUERMo2cU7s+Obz6BTrS+gxkbnSBNKSuD0AVUc+CpBMrpVPKKfoVz0WQCX+Tnst0i4A==", + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-opacity-percentage/-/postcss-opacity-percentage-2.0.0.tgz", + "integrity": "sha512-lyDrCOtntq5Y1JZpBFzIWm2wG9kbEdujpNt4NLannF+J9c8CgFIzPa80YQfdza+Y+yFfzbYj/rfoOsYsooUWTQ==", "dev": true, "requires": {} }, @@ -28168,86 +28605,73 @@ } }, "postcss-preset-env": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.0.1.tgz", - "integrity": "sha512-IUbymw0JlUbyVG+I85963PNWgPp3KhnFa1sxU7M/2dGthxV8e297P0VV5W9XcyypoH4hirH2fp1c6fmqh6YnSg==", - "dev": true, - "requires": { - "@csstools/postcss-cascade-layers": "^3.0.0", - "@csstools/postcss-color-function": "^2.0.0", - "@csstools/postcss-font-format-keywords": "^2.0.0", - "@csstools/postcss-hwb-function": "^2.0.0", - "@csstools/postcss-ic-unit": "^2.0.0", - "@csstools/postcss-is-pseudo-class": "^3.0.0", - "@csstools/postcss-logical-float-and-clear": "^1.0.0", - "@csstools/postcss-logical-resize": "^1.0.0", - "@csstools/postcss-logical-viewport-units": "^1.0.0", - "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0", - "@csstools/postcss-nested-calc": "^2.0.0", - "@csstools/postcss-normalize-display-values": "^2.0.0", - "@csstools/postcss-oklab-function": "^2.0.0", - "@csstools/postcss-progressive-custom-properties": "^2.0.0", - "@csstools/postcss-scope-pseudo-class": "^2.0.0", - "@csstools/postcss-stepped-value-functions": "^2.0.0", - "@csstools/postcss-text-decoration-shorthand": "^2.0.0", - "@csstools/postcss-trigonometric-functions": "^2.0.0", - "@csstools/postcss-unset-value": "^2.0.0", - "autoprefixer": "^10.4.13", - "browserslist": "^4.21.4", - "css-blank-pseudo": "^5.0.0", - "css-has-pseudo": "^5.0.0", - "css-prefers-color-scheme": "^8.0.0", - "cssdb": "^7.4.0", - "postcss-attribute-case-insensitive": "^6.0.0", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.1.tgz", + "integrity": "sha512-qhWnJJjP6ArLUINWJ38t6Aftxnv9NW6cXK0NuwcLCcRilbuw72dSFLkCVUJeCfHGgJiKzX+pnhkGiki0PEynWg==", + "dev": true, + "requires": { + "@csstools/postcss-cascade-layers": "^3.0.1", + "@csstools/postcss-color-function": "^2.2.3", + "@csstools/postcss-color-mix-function": "^1.0.3", + "@csstools/postcss-font-format-keywords": "^2.0.2", + "@csstools/postcss-gradients-interpolation-method": "^3.0.6", + "@csstools/postcss-hwb-function": "^2.2.2", + "@csstools/postcss-ic-unit": "^2.0.4", + "@csstools/postcss-is-pseudo-class": "^3.2.1", + "@csstools/postcss-logical-float-and-clear": "^1.0.1", + "@csstools/postcss-logical-resize": "^1.0.1", + "@csstools/postcss-logical-viewport-units": "^1.0.3", + "@csstools/postcss-media-minmax": "^1.0.4", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.4", + "@csstools/postcss-nested-calc": "^2.0.2", + "@csstools/postcss-normalize-display-values": "^2.0.1", + "@csstools/postcss-oklab-function": "^2.2.3", + "@csstools/postcss-progressive-custom-properties": "^2.3.0", + "@csstools/postcss-relative-color-syntax": "^1.0.2", + "@csstools/postcss-scope-pseudo-class": "^2.0.2", + "@csstools/postcss-stepped-value-functions": "^2.1.1", + "@csstools/postcss-text-decoration-shorthand": "^2.2.4", + "@csstools/postcss-trigonometric-functions": "^2.1.1", + "@csstools/postcss-unset-value": "^2.0.1", + "autoprefixer": "^10.4.14", + "browserslist": "^4.21.9", + "css-blank-pseudo": "^5.0.2", + "css-has-pseudo": "^5.0.2", + "css-prefers-color-scheme": "^8.0.2", + "cssdb": "^7.6.0", + "postcss-attribute-case-insensitive": "^6.0.2", "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^5.0.0", - "postcss-color-hex-alpha": "^9.0.0", - "postcss-color-rebeccapurple": "^8.0.0", - "postcss-custom-media": "^9.1.0", - "postcss-custom-properties": "^13.1.0", - "postcss-custom-selectors": "^7.1.0", - "postcss-dir-pseudo-class": "^7.0.0", - "postcss-double-position-gradients": "^4.0.0", - "postcss-focus-visible": "^8.0.0", - "postcss-focus-within": "^7.0.0", + "postcss-color-functional-notation": "^5.1.0", + "postcss-color-hex-alpha": "^9.0.2", + "postcss-color-rebeccapurple": "^8.0.2", + "postcss-custom-media": "^9.1.5", + "postcss-custom-properties": "^13.2.0", + "postcss-custom-selectors": "^7.1.3", + "postcss-dir-pseudo-class": "^7.0.2", + "postcss-double-position-gradients": "^4.0.4", + "postcss-focus-visible": "^8.0.2", + "postcss-focus-within": "^7.0.2", "postcss-font-variant": "^5.0.0", - "postcss-gap-properties": "^4.0.0", - "postcss-image-set-function": "^5.0.0", + "postcss-gap-properties": "^4.0.1", + "postcss-image-set-function": "^5.0.2", "postcss-initial": "^4.0.1", - "postcss-lab-function": "^5.0.0", - "postcss-logical": "^6.0.0", - "postcss-media-minmax": "^5.0.0", - "postcss-nesting": "^11.0.0", - "postcss-opacity-percentage": "^1.1.3", - "postcss-overflow-shorthand": "^4.0.0", + "postcss-lab-function": "^5.2.3", + "postcss-logical": "^6.2.0", + "postcss-nesting": "^11.3.0", + "postcss-opacity-percentage": "^2.0.0", + "postcss-overflow-shorthand": "^4.0.1", "postcss-page-break": "^3.0.4", - "postcss-place": "^8.0.0", - "postcss-pseudo-class-any-link": "^8.0.0", + "postcss-place": "^8.0.1", + "postcss-pseudo-class-any-link": "^8.0.2", "postcss-replace-overflow-wrap": "^4.0.0", - "postcss-selector-not": "^7.0.0", + "postcss-selector-not": "^7.0.1", "postcss-value-parser": "^4.2.0" - }, - "dependencies": { - "autoprefixer": { - "version": "10.4.13", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", - "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", - "dev": true, - "requires": { - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001426", - "fraction.js": "^4.2.0", - "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" - } - } } }, "postcss-pseudo-class-any-link": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.1.tgz", - "integrity": "sha512-CYcLGofbGDhx6BmNFQGFH0cqW+qlXVk9PR4LZ8Y7g24m6TopYKt6FSwhMGAIyme6lQxgB32XMhpYRwZAcPnMXA==", + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-8.0.2.tgz", + "integrity": "sha512-FYTIuRE07jZ2CW8POvctRgArQJ43yxhr5vLmImdKUvjFCkR09kh8pIdlCwdx/jbFm7MiW4QP58L4oOUv3grQYA==", "dev": true, "requires": { "postcss-selector-parser": "^6.0.10" @@ -28365,9 +28789,9 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", + "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", "dev": true }, "pretty-error": { @@ -30763,9 +31187,9 @@ "dev": true }, "update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", + "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", "dev": true, "requires": { "escalade": "^3.1.1", diff --git a/package.json b/package.json index 2eb9a0ecb1..65c1f774ed 100644 --- a/package.json +++ b/package.json @@ -92,11 +92,11 @@ "node-fetch": "^3.3.0", "postcss-less": "^6.0.0", "postcss-loader": "^7.0.2", - "postcss-preset-env": "^8.0.1", - "prettier": "2.8.8", + "postcss-preset-env": "^8.5.1", + "prettier": "^3.0.1", "react-test-renderer": "^18.2.0", "style-loader": "^3.3.1", - "stylelint": "^15.5.0", + "stylelint": "^15.9.0", "stylelint-config-recommended-less": "^1.0.4", "stylelint-config-standard": "^33.0.0", "stylelint-declaration-block-no-ignored-properties": "^2.6.0", diff --git a/src/App/AppHeader/index.js b/src/App/AppHeader/index.js index 0a13f812ed..592b7eb7cd 100644 --- a/src/App/AppHeader/index.js +++ b/src/App/AppHeader/index.js @@ -9,46 +9,110 @@ import SearchBox from "../utils/SearchBox"; const basename = process.env.basename; const brand = process.env.brand; +// feature toggle. Switch once we switch default to topbar v2 (and update rest of docs and code) +// other corresponding feature toggle for topbar at "src/App/utils/SelectPanel/index.js" +const useTopbarLegacy = true; + // mobile & tablet topbar and hamburger menu -const AppHeader = () => ( -
- - - - {"\n"} - {`${brand}-logo`}{" "} - {"\n"} - - - -
-); + + ) : ( +
+ + + + {"\n"} + {`${brand}-logo`}{" "} + {"\n"} + + + +
+ ); export default AppHeader; diff --git a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap index 74d557872b..f3f020458d 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap +++ b/src/App/ComponentsDocumentation/components/Topbar/__snapshots__/index.test.js.snap @@ -161,6 +161,8 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` + + @@ -370,6 +374,12 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` 31 + 32 + + + 33 + + + + @@ -799,6 +1002,126 @@ exports[`Components: Topbar DeveloperDocumentation renders 1`] = ` 33 + 34 + + + 35 + + + 36 + + + 37 + + + 38 + + + 39 + + + 40 + + + 41 + + + 42 + + + 43 + + + 44 + + + 45 + + + 46 + + + 47 + + + 48 + + + 49 + + + 50 + + + 51 + + + 52 + + + 53 + + + 54 + + + 55 + + + 56 + + + 57 + + + 58 + + + 59 + + + 60 + + + 61 + + + 62 + + + 63 + + + 64 + + + 65 + + + 66 + + + 67 + + + 68 + + + 69 + + + 70 + + + 71 + + + 72 + + + 73 + + +
+

+ Migrating to the new Topbar ( ⚠️experimental🧪 ) +

+

+ A future version of the topbar can be used. It is in experimental state. Things can be modified and depending of your use some features might still be missing. +
+ This is done by appending the class + + + .experimental + + to the element with class + + .topbar + + . +

+

+ There is several breaking changes (details are following lower down) +

+ +

+ To do the migration please follow instructions on + + + the migration page + + . +

+

Javascript methods diff --git a/src/App/ComponentsDocumentation/components/Topbar/constants.js b/src/App/ComponentsDocumentation/components/Topbar/constants.js index 76f876a962..191930391d 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/constants.js +++ b/src/App/ComponentsDocumentation/components/Topbar/constants.js @@ -1,9 +1,71 @@ -import React from "react"; +import React, { useEffect } from "react"; import TopbarComponent from "@components/Topbar"; +import { topbar } from "@src/scripts/main"; import CodeTags from "@components/CodeTags"; -const menu = { +export const menu = { + items: [ + { + name: "Home", + pinned: true, + }, + { + name: "Merchant details", + selected: true, + pinned: true, + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Transactions", + }, + { + name: "User profile", + }, + { + name: "Statistics", + }, + { + name: "Users", + pinned: true, + }, + { + name: "Access tokens", + }, + { + name: "Contact us", + }, + { + name: "Switch to acquiring", + icon: "sync_alt", + pinned: true, + firstPushRight: true, + }, + { + name: "Change company", + icon: "arrow_forward", + }, + ], +}; + +export const menuLegacy = { btn: { name: "Menu", icon: "menu", @@ -24,18 +86,25 @@ const menu = { ], }; -const Topbar = ({ sticky, wide, logout }) => ( -
- -
-
-); +const Topbar = ({ sticky, wide, logout, legacy }) => { + useEffect(() => { + topbar.init(); + }, [legacy]); + + return ( +
+ +
+
+ ); +}; export const topbarShowcase = { id: "overviewTopbar", @@ -44,7 +113,7 @@ export const topbarShowcase = { elements: [ { tab: "Desktop", - component: , + component: , title: "Desktop", description: (

@@ -58,7 +127,7 @@ export const topbarShowcase = { }, { tab: "Mobile/tablet", - component: , + component: , title: "Mobile/tablet", description: ( <> @@ -78,5 +147,27 @@ export const topbarShowcase = { ), }, + { + tab: "🧪 experimental Desktop", + component: , + title: "Desktop", + description: ( +

+ The experimental desktop topbar involves breaking changes. Make sure + to check them out before switching. +

+ ), + }, + { + tab: "🧪 experimental Mobile/tablet", + component: , + title: "Mobile/tablet", + description: ( + <> + The experimental desktop topbar involves breaking changes. Make sure + to check them out before switching. + + ), + }, ], }; diff --git a/src/App/ComponentsDocumentation/components/Topbar/index.js b/src/App/ComponentsDocumentation/components/Topbar/index.js index 93b17934c5..f3e7971d4a 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/index.js +++ b/src/App/ComponentsDocumentation/components/Topbar/index.js @@ -4,33 +4,12 @@ import { Link } from "react-router-dom"; import { ComponentPreview, DocContainer } from "@docutils"; import TopbarComponent from "@components/Topbar"; import CodeTags from "@components/CodeTags"; -import { topbarShowcase } from "./constants"; +import { menu, menuLegacy, topbarShowcase } from "./constants"; import { topbar, sidebar } from "@src/scripts/main"; import NpmInformation from "@docutils/NpmInformation"; const basename = process.env.basename; -const menu = { - btn: { - name: "Menu", - icon: "menu", - }, - items: [ - { - name: "Home", - icon: "home", - }, - { - name: "Purchases", - icon: "shopping_cart", - }, - { - name: "Settings", - icon: "settings", - }, - ], -}; - const Overview = () => (

Overview

@@ -104,7 +83,7 @@ const DeveloperDocumentation = () => (
@@ -128,6 +107,37 @@ const DeveloperDocumentation = () => (
+
+

Migrating to the new Topbar ( ⚠️experimental🧪 )

+

+ A future version of the topbar can be used. It is in experimental state. + Things can be modified and depending of your use some features might + still be missing. +
+ This is done by appending the class{" "} + to the element with + class . +

+

+ There is several breaking changes (details are following lower down) +

+
    +
  • order of elements in the topbar
    • +
  • + container links content is modified (added a header & footer to the + topbar, and links are grouped in a specific container) +
    • +
  • logo used in the topbar is different
    • +
  • + links need to have a `.pinned` class to be visible in the topbar +
    • +
+

+ To do the migration please follow instructions on{" "} + the migration page. +

+
+

Javascript methods

diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js index 9612da40a2..aacfcd08ca 100644 --- a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js +++ b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js @@ -8,9 +8,9 @@ test("Topbar page exist", async ({ page }) => { name: "Components Find all currently available components here", }) .click(); - await expect(page.getByRole("link", { name: "Topbar" })).toHaveCount( - page.viewportSize().width < 991 ? 1 : 2 - ); + await expect( + page.getByRole("link", { name: "Topbar", exact: true }) + ).toHaveCount(page.viewportSize().width < 991 ? 1 : 2); await page.getByText("call_to_actionTopbararrow_forward").click(); await expect(page).toHaveTitle(/Topbar/); await expect( diff --git a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png index ab2736b89f..9cac506809 100644 Binary files a/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png and b/src/App/ComponentsDocumentation/components/Topbar/topbar.e2e.spec.js-snapshots/SwedbankPay-topbar-legacy-mobile-opened-webkit-darwin.png differ diff --git a/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js new file mode 100644 index 0000000000..d1d70fd7af --- /dev/null +++ b/src/App/ComponentsDocumentation/components/TopbarMigratingToV2/index.js @@ -0,0 +1,471 @@ +import React from "react"; + +import { EditableComponentPreview, DocContainer } from "@docutils"; +import CodeTags from "@components/CodeTags"; + +export const Overview = () => ( +

+

Intro

+
    +
  • + The migration should be part of a larger effort to rethink the + information structure. Try to simplify the navigation. Projects with an + allocated designer should collaborate with them to achieve this.{" "} +
    • +
  • + the new topbar is opt-in. By default nothing changes. The new style will + only be applied if you add the + class{" "} +
    • +
  • + There is several breaking changes (details are following lower down){" "} +
    • +
      +
    • order of elements in the topbar
      • +
    • + container links content is modified (added a header & footer to the + topbar, and links are grouped in a specific container){" "} +
      • +
    • logo used in the topbar is different
      • +
    • + links need to have a + class to be visible in + the topbar{" "} +
      • +
    +
  • + no change JS wise needed (no new method to call, etc). Things should + keep working{" "} +
    • +
  • + This is still an experimental phase. Please rise up any issue + you're finding out. +
    • +
+
+); + +export const Migration = () => ( +
+

Migrating to Topbar v2

+

Experimental

+
    +
  • + this is an opt-in. By default, if you do not modify + anything, things should remain as they were 😉 +
    • +
  • + to enable the new topbar you need to add the CSS class `experimental` to + the Topbar +
    • +
  • + e.g.{" "} + +
    • +
+

Breaking changes

+

Order of the elements inside the topbar

+

the order of the topbar is modified:

+
    +
  • +

    + BEFORE +

    + +
    + {"\n"} +
    + {"\n"} + {"// open/close menu button "} + {"\n"} + + {"\n"} + + {"\n"} + {"// logo link to homepage "} + {"\n"} + + {"\n"} + {"// topbar/modal content "} + {"\n"} + + {"\n"} +
    + {"\n"} +
    +     +
    • +
  • +

    + NOW +

    + + +
    + {"\n"} +
    + {"\n"} + {"// logo link to homepage "} + {"\n"} + + {"\n"} + + {"// topbar/modal content "} + {"\n"} + + {"\n"} + + {"// open menu button "} + {"\n"} + + {"\n"} +
    + {"\n"} +
    +     +
    • + +

    Logo/link to homepage

    +

    + we switch the SwedbankPay logo from the vertical version to the + horizontal one +

    +
      +
    • +

      + BEFORE +

      + + + swedbankpay logo + +
      • +
    • +

      + NOW +

      + + + swedbankpay logo + +
      • +
    + +

    the button to open the menu

    +

    + we used to have two buttons, one top open the menu modal & the other one + to close it. We now only have the one to open it. The button to close it + is inside the modal (in + ) +

    +

    + buttons are NOT modified. The only change is that we + remove the close button +

    +
      +
    • +

      + BEFORE +

      + + + + {"\n"} + + {"\n"} + +
      • +
    • +

      + NOW +

      + + + + +
      • +
    + +

    the structure of the “`.topbar-link-container`” is modified:

    +

    +

    +
      +
    • +

      + BEFORE +

      + +
        +
      • it used to have all links as direct children
        • +
      +
      • +
    • +

      + NOW +

      +
        +
      • it now contains only 3 direct children
        • +
          +
        • + +
          • +
        • + +
          • +
        • + +
          • +
        + +
      • + all links should be contained inside + +
        • +
      • + so far only normal links can be contained inside it (no nesting, + no dropdowns, no sidebar) +
        • +
      +
        +
      • + in the future we plan to support nested links (2-3 levels of + nesting) +
        • +
      • + in the future we plan to replace the language dropdown by a + language button displaying a specific language selection modal +
        • +
      +
      • +
    +

    Links in topbar

    +
      +
    • + max 5 short/medium length links in topbar (or less if long words). No + dynamic hiding, you're responsible to select which links you want + to keep “pinned” to the topbar on desktop and which ones can be + visible only in modal when it's opened +
      • +
    • still no links visible on mobile view (no breaking change)
      • +
    • + new +
      • +
        +
      • + add the CSS class + to the links you want + to keep “pinned” to the topbar +
        • +
      • + any links without the + class will be hidden on + the topbar but visible inside the modal +
        • +
      +
    +

    Topbar modal header

    + +
    + {"\n"} + + {"\n"} +
    +     +
      +
    • + mandatory to be used +
      • +
    • for now it contains only the close button (to close the modal)
      • +
    • + in the future it will eventually contain a header for the modal. (i.e. + for the language modal) +
      • +
    + +

    Topbar modal footer

    + + +
    + {"\n"} + + {"\n"} +
    +     +
      +
    • initially it will be mandatory to be used BUT it can be empty:
      • +
    • + +
      • +
    • in the future we'll make it optional
      • +
    +
+
+); + +export const CurrentState = () => ( +
+

Current state of experimental

+

For now:

+
    +
  • + No plan of supporting dropdown and or custom items in the topbar/modal +
    • +
  • Not ready for production yet
    • +
+
+); + +export const Roadmap = () => ( +
+

Roadmap

+

Future iterations:

+
    +
  • language selector (button visible in topbar + display a modal)
    • +
  • nested levels (2-3 levels nesting)
    • +
+
+); + +export const MigratingToNewTopbar = () => ( + +
+

+ How to migrate to the new Topbar (under experimental stage) +

+ + + + +
+ +); + +export default MigratingToNewTopbar; diff --git a/src/App/components/Topbar/__snapshots__/index.test.js.snap b/src/App/components/Topbar/__snapshots__/index.test.js.snap index 977b968290..58ab8135de 100644 --- a/src/App/components/Topbar/__snapshots__/index.test.js.snap +++ b/src/App/components/Topbar/__snapshots__/index.test.js.snap @@ -113,6 +113,8 @@ exports[`Component: Topbar - props topbarContent renders a sidebar in topbar-lin + + @@ -580,6 +584,8 @@ exports[`Component: Topbar - props topbarContent renders a topbar menu without m + + @@ -709,6 +711,8 @@ exports[`Component: Topbar - props topbarContent renders a topbar menuopen and c + + @@ -853,6 +859,8 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a + + @@ -1019,6 +1029,8 @@ exports[`Component: Topbar - props topbarContent renders topbar-link-container a + + diff --git a/src/App/components/Topbar/index.js b/src/App/components/Topbar/index.js index fc6e997ce9..dd1050458e 100644 --- a/src/App/components/Topbar/index.js +++ b/src/App/components/Topbar/index.js @@ -1,18 +1,27 @@ import React, { Fragment } from "react"; import PropTypes from "prop-types"; -import swedbankpayLogo from "@src/img/swedbankpay/logo/swedbankpay-logo-v.svg"; +import swedbankpayLogoHorizontal from "@src/img/swedbankpay/logo/swedbankpay-logo-h.svg"; +import swedbankpayLogoVertical from "@src/img/swedbankpay/logo/swedbankpay-logo-v.svg"; import payexLogo from "@src/img/payex/logo/payex-logo.svg"; import SidebarComponent from "@components/Sidebar"; import { SidebarNavList } from "../../ComponentsDocumentation/components/Sidebar/constants"; +import ButtonComponent from "@components/Button"; const brand = process.env.brand; -const devLogo = brand === "swedbankpay" ? swedbankpayLogo : payexLogo; - const isDev = process.env.version === "LOCAL_DEV"; +const getDevLogo = (legacy) => { + if (brand === "swedbankpay" && !legacy) { + return swedbankpayLogoHorizontal; + } else if (brand === "swedbankpay" && legacy) { + return swedbankpayLogoVertical; + } else { + return payexLogo; + } +}; -const TopbarBtn = () => ( +const TopbarBtn = ({ legacy = true }) => ( <> - + {legacy && ( + + )} ); -const TopbarMenu = ({ menu, logout, sidebar }) => { +const ConditionalWrapper = ({ condition, wrapper, children }) => + condition ? wrapper(children) : children; + +const TopbarMenu = ({ menu, logout, sidebar, legacy }) => { const { items } = menu; return ( ); }; const TopbarLogout = () => ( +
+ {"\n"} + + {"\n"} +
+); + +const TopbarLogoutLegacy = () => ( <> ( ); -const TopbarLogo = ({ png }) => ( +const TopbarLogo = ({ png, legacy }) => ( <> ( {brand === "swedbankpay" && png ? ( {`${brand} ) : ( {`${brand} )} {"\n"} @@ -119,26 +197,51 @@ const TopbarLogo = ({ png }) => ( ); -const Topbar = ({ topbarContent, wide, logout, id, png, sticky, sidebar }) => ( +const Topbar = ({ + topbarContent, + wide, + logout, + id, + png, + sticky, + sidebar, + legacy = true, +}) => (
{"\n"} {topbarContent ? (
+ {legacy && ( + <> + {"\n"} + + + )} {"\n"} - + {"\n"} - - + + {!legacy && ( + <> + {"\n"} + + + )}
) : ( <> - - {logout ? : null} + + {logout ? legacy ? : : null} )}
@@ -151,6 +254,7 @@ Topbar.propTypes = { png: PropTypes.bool, sticky: PropTypes.bool, sidebar: PropTypes.bool, + legacy: PropTypes.bool, }; export default Topbar; diff --git a/src/App/docutils/DocContainer/index.js b/src/App/docutils/DocContainer/index.js index b2c5b70a80..488fd6129f 100644 --- a/src/App/docutils/DocContainer/index.js +++ b/src/App/docutils/DocContainer/index.js @@ -10,11 +10,13 @@ const DocContainer = ({ children }) => { ); useEffect(() => { - sidebar.populateSidebarTertiary( - "doc-sidebar", - document.querySelector(".doc-body").querySelectorAll("h2[id]") - ); - sidebar.initScrollListener("doc-sidebar", "doc-body", "h2"); + if (document?.querySelector(".doc-body")) { + sidebar.populateSidebarTertiary( + "doc-sidebar", + document.querySelector(".doc-body").querySelectorAll("h2[id]"), + ); + sidebar.initScrollListener("doc-sidebar", "doc-body", "h2"); + } }, []); return ( diff --git a/src/App/index.js b/src/App/index.js index b1ed65ef94..81b926334c 100644 --- a/src/App/index.js +++ b/src/App/index.js @@ -111,7 +111,6 @@ const App = () => {
{" "} - {/* desktop sidebar nav */}
diff --git a/src/App/routes/all.test.js b/src/App/routes/all.test.js index b18797a44c..4a63007d87 100644 --- a/src/App/routes/all.test.js +++ b/src/App/routes/all.test.js @@ -1,7 +1,10 @@ import allRoutes from "./all"; describe("Routes: all", () => { - const pathFormat = new RegExp("^([a-z]+([-a-z]+)?)+$"); + // match any string that starts with a lowercase letter, + // followed by zero or more lowercase letters or digits, + // followed by an optional hyphen and one or more lowercase letters or digits + const pathFormat = new RegExp("^[a-z][a-z0-9]*([-a-z0-9]+)?$"); it("is defined", () => { expect(allRoutes).toBeDefined(); diff --git a/src/App/routes/components.js b/src/App/routes/components.js index 425de950bd..120d261517 100644 --- a/src/App/routes/components.js +++ b/src/App/routes/components.js @@ -333,6 +333,15 @@ module.exports = [ outlined: true, statusBadges: ["javascript"], }, + { + title: "Topbar Migrating to v2", + path: "topbar-migrating-to-v2", + rootPath: "/components/TopbarMigratingToV2", + componentPath: "components/TopbarMigratingToV2", + icon: "call_to_action", + outlined: true, + statusBadges: ["javascript", "new"], + }, ], }, ]; diff --git a/src/App/routes/components.test.js b/src/App/routes/components.test.js index 55c30f748e..234318b90a 100644 --- a/src/App/routes/components.test.js +++ b/src/App/routes/components.test.js @@ -1,7 +1,7 @@ import componentRoutes from "./components"; describe("Routes: components", () => { - const pathFormat = new RegExp("^([a-z]+([-a-z]+)?)+$"); + const pathFormat = new RegExp("^[a-z][a-z0-9]*([-a-z0-9]+)?$"); it("is defined", () => { expect(componentRoutes).toBeDefined(); diff --git a/src/App/utils/SelectPanel/index.js b/src/App/utils/SelectPanel/index.js index 8eafee8371..aa4ae39a24 100644 --- a/src/App/utils/SelectPanel/index.js +++ b/src/App/utils/SelectPanel/index.js @@ -15,7 +15,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => { const location = useLocation(); const [isActive, setIsActive] = useState( - location.pathname.includes(route.path) + location.pathname.includes(route.path), ); useEffect(() => { @@ -25,7 +25,7 @@ const MobileNavGroup = ({ route, index, sidebarId }) => { childRoute: childRoute.path, })) .filter((childRouteObject) => - location.pathname.includes(childRouteObject.childRoute) + location.pathname.includes(childRouteObject.childRoute), ); isActive && @@ -89,24 +89,37 @@ const SelectPanel = ({ id, routes, topbarId, topbarSidebar }) => { const _activeSecondaryLi = (secondaryRoute) => location.pathname.includes(secondaryRoute.path); + const useLegacyTopbar = true; + return ( <> {topbarId ? ( - // mobile & tablet hamburger menu sidebar -
- -
+ !useLegacyTopbar ? ( + // mobile & tablet hamburger menu sidebar + routes.map((route, i) => ( + + )) + ) : ( +
+ +
+ ) ) : ( // desktop
@@ -208,9 +221,9 @@ SelectPanel.propTypes = { title: PropTypes.string.isRequired, path: PropTypes.string.isRequired, componentPath: PropTypes.string.isRequired, - }) + }), ).isRequired, - }) + }), ).isRequired, id: PropTypes.string.isRequired, topbarId: PropTypes.string, diff --git a/src/less/components/button.less b/src/less/components/button.less index f5d384170e..c1e7d59d15 100644 --- a/src/less/components/button.less +++ b/src/less/components/button.less @@ -2,6 +2,7 @@ .btn { display: inline-flex; + justify-content: center; align-items: center; position: relative; font-weight: var(--font-weight-normal); diff --git a/src/less/components/topbar-experimental.less b/src/less/components/topbar-experimental.less new file mode 100644 index 0000000000..40cdfff640 --- /dev/null +++ b/src/less/components/topbar-experimental.less @@ -0,0 +1,522 @@ +@import "../global.less"; + +.topbar.experimental { + --topbar-height: 60px; + --topbar-border-width: 0.5rem; + --topbar-opened-padding: 24px; + --topbar-opened-padding-body: 30px; + --topbar-spacing-horizontal: 32px; + --topbar-links-container-spacing: 60px; + --topbar-max-width: 960px; + --border-radius-topbar: 24px; + --border-radius-topbar-nav: 32px; + + // TODO: once color-mix get enough support we can replace this by CSS var. Postcss does not parse a color-mix fallback if css-var (since cannot predict ahead of time the dynamic aspect of it) + height: var(--topbar-height); + width: calc(100% - 2 * var(--topbar-spacing-horizontal, 32px)); + max-width: var(--topbar-max-width, 960px); + z-index: calc(var(--topbar-z-index, 400) - 1); + display: flex; + justify-content: center; + align-items: center; + padding: 0 1.5rem; + position: relative; + border-radius: 0 0 var(--border-radius-topbar, 24px) + var(--border-radius-topbar, 24px); + margin: 0 auto; + + &::before { + content: ""; + position: absolute; + width: 100%; + height: 100%; + backdrop-filter: blur(10px) brightness(1.1); + z-index: -1; + background-color: color-mix(in srgb, @brand-bg-gray, transparent 35%); + border-radius: 0 0 var(--border-radius-topbar, 24px) + var(--border-radius-topbar, 24px); + } + + .nav-container { + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + } + + &.topbar-sticky { + position: sticky; + top: 0; + } + + .topbar-nav-closing + :is(.topbar-modal-header, .topbar-link-container, .topbar-modal-footer) { + visibility: hidden; + } + + // LESS func to generate classes for triggering sticky starting from a breakpoints + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-min-@{infix}-sticky { + @media screen and (min-width: @min-width) { + .topbar-sticky(); + } + } + }); + + // LESS func to generate classes for triggering sticky ending at a breakpoint + each(@grid-breakpoints-max, .(@max-width, @infix) { + &.topbar-max-@{infix}-sticky { + @media screen and (max-width: @max-width) { + .topbar-sticky(); + } + } + }); + + .topbar-logo { + background-size: cover; + border: none; + display: flex; + + & img { + height: 32px; + width: 67px; + } + } + + & .topbar-btn { + user-select: none; + background: none; + padding: 0; + border: 0; + align-self: center; + font-weight: bold; + + &:focus { + border-radius: 0.125rem; + box-shadow: 0 0 0 2px @black; + outline: none; + } + } + + // once :has() is supported, we can remove the script that add inline-style display: none/flex to .topbar-btn when open & close + &:has(.topbar-nav-open) .topbar-btn { + display: none; + } + + // hamburger menu btn to open the topbar-nav dialog + .topbar-btn { + display: flex; + outline: 1px solid transparent; + + &:hover { + cursor: pointer; + } + } + + // topbar-link-right is the class for the first link aligned on the right side + > .topbar-link-right { + display: none; + } + + // topbar-nav is the container for links in both topbar up top and when dialog opened + .topbar-nav { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + background: transparent; + display: none; + + &.topbar-nav-closing { + animation: fade-out ease-in-out 0.3s forwards; + } + + // topbar when dialog is opened + &.topbar-nav-open { + animation: fade-in ease-in-out 0.3s forwards; + position: fixed; + display: flex; + justify-content: flex-end; + + .topbar-link-container { + animation-name: slide-in-from-right; + animation-duration: 0.4s; + animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); + position: relative; + padding: 0; + border-width: 0; + display: flex; + flex-direction: column; + align-items: stretch; + width: calc(100% - var(--topbar-links-container-spacing, 60px)); + + > .topbar-modal-body { + background-color: var(--white, #ffffff); + flex-direction: column; + align-items: stretch; + padding: var(--topbar-opened-padding, 24px) + calc(var(--topbar-opened-padding-body, 30px) - 10px) + var(--topbar-opened-padding, 24px) + var(--topbar-opened-padding-body, 30px); + flex: 1; + border-top: 1px solid var(--gray); + border-bottom: 1px solid var(--gray); + + .topbar-link-right { + margin: initial; + + .material-icons { + margin: 0; + } + } + + // links in open modal + > a { + font-size: 1.125rem; + padding: 1rem 0; + border-bottom: 1px solid + color-mix(in srgb, @brand-secondary, transparent 60%); + + &:first-of-type { + padding-top: 0; + } + } + + > button { + margin-top: 0.75rem; + + &:first-of-type { + margin-top: auto; + } + } + } + + > :is(.topbar-modal-header, .topbar-modal-footer) { + display: flex; + background-color: var(--white, #ffffff); + padding: var(--topbar-opened-padding, 24px); + } + + .topbar-modal-header { + justify-content: flex-end; + border-radius: var(--border-radius-topbar-nav, 32px) 0 0 0; + + & > button.topbar-close { + height: var(--topbar-spacing-horizontal, 32px); + width: var(--topbar-spacing-horizontal, 32px); + background-color: var(--gray); + border: transparent; + + > i { + font-size: 24px; + } + } + } + + .topbar-modal-footer { + justify-content: center; + border-radius: 0 0 0 var(--border-radius-topbar-nav, 32px); + + > button { + width: 220px; + } + } + } + } + + .topbar-link-container { + z-index: var(--topbar-z-index, 400); + width: 100%; + + .topbar-modal-body { + display: flex; + justify-items: center start; + top: 0; + bottom: 0; + background-color: var(--white); + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + + > a { + font-size: 1rem; + color: @brand-secondary; + cursor: pointer; + text-decoration: none; + display: flex; + gap: 0.5rem; + line-height: 1; + align-items: center; + + > span { + font-family: var(--brand-headline); + font-weight: var(--font-weight-normal); + + // for :before underline effect + position: relative; + + // :before underline effect + &:before { + content: ""; + position: absolute; + background-color: currentcolor; + height: 3px; + bottom: -4px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 0; + } + } + + // :hover underline expand width effects in non-opened topbar links + &:hover { + > span { + &:before { + display: block; + width: 100%; + transition: width 0.4s; + } + + text-decoration: none; + } + } + + // :active underline permanently displayed primary color + &.active { + > span { + &:before { + width: 100%; + background-color: var(--brand-primary); + } + + text-decoration: none; + color: @black; + } + } + + &:last-of-type { + border-bottom: none; + } + } + + @supports not selector(:has(a)) { + > .topbar-link-right { + margin-left: auto; + } + } + + @supports selector(:has(a)) { + > .topbar-link-right, + &:not(&:has(.topbar-link-right)) button:first-of-type { + margin-left: auto; + } + } + } + } + } + + /* + LESS mixin function scoped for the topbar on wider viewport, generated by the topbar mixin + 1. Create a mixin called .topbar-@{infix}-wide + 2. For each breakpoint in @grid-breakpoints, create a selector called .topbar-@{infix}-wide + 3. For each selector, create a media query for the breakpoint + 4. Inside each media query, call the mixin .topbar-wide() + */ + // TODO: try to refactor it to make it more readable and not use LESS mixin, but native CSS + + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-@{infix}-wide:not(.legacy) { + @media screen and (min-width: @min-width) { + .topbar-wide(); + } + } + }); + + .topbar-wide { + --topbar-height: 88px; + --modal-nav-width: 480px; + + padding: 0 var(--topbar-spacing-horizontal); + + .topbar-logo img { + height: var(--topbar-spacing-horizontal); + width: auto; + } + + .topbar-nav { + display: flex; + position: static; + flex-grow: 1; + height: 100%; + + &.topbar-nav-open { + width: 100vw; + height: 100vh; + position: fixed; + justify-content: center; + align-items: center; + + .topbar-link-container { + width: var(--modal-nav-width, 480px); + height: max-content; + max-height: calc( + 100% - 2 * var(--topbar-links-container-spacing, 60px) + ); + margin: var(--topbar-links-container-spacing, 60px); + padding: 0; + + .topbar-modal-body { + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: var(--brown-soft) transparent; + scrollbar-gutter: stable; + + &::-webkit-scrollbar { + background-color: transparent; + width: 10px; + } + + &::-webkit-scrollbar-thumb { + background: var(--brown-soft); + border-radius: 5rem; + } + + > a, + > a:not(.pinned) { + display: flex; + font-size: 1.25rem; + padding: 1.5rem 0; + + &:first-of-type { + padding-top: 0; + } + &:last-of-type { + padding-bottom: 0; + } + } + } + + :is(.topbar-modal-header, .topbar-modal-footer) { + } + + .topbar-modal-header { + border-radius: var(--border-radius-topbar-nav, 32) + var(--border-radius-topbar-nav, 32) 0 0; + } + + .topbar-modal-footer { + border-radius: 0 0 var(--border-radius-topbar-nav, 32) + var(--border-radius-topbar-nav, 32); + } + } + } + + // links container when in topbar only, not opened in dialog + &:not(.topbar-nav-open) .topbar-link-container { + .topbar-modal-body { + position: static; + background-color: transparent; + width: 100%; + display: flex; + justify-content: flex-start; + gap: 2rem; + padding: 0 2rem 0 3rem; + overflow: visible; + + :is(a, button):not(.pinned) { + display: none; + } + } + + :is(.topbar-modal-header, .topbar-modal-footer) { + display: none; + } + } + } + } + + @keyframes fade-in { + 0% { + backdrop-filter: blur(0); + background-color: transparent; + } + + 33% { + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + + 100% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + } + + @keyframes fade-out { + 0% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + } + + 1% { + backdrop-filter: blur(20px); + } + + 33% { + backdrop-filter: blur(20px); + background-color: color-mix(in srgb, @brand-primary, transparent 40%); + } + + 99% { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + background: transparent; + } + + 100% { + backdrop-filter: blur(0); + background-color: transparent; + } + } + + @keyframes slide-in-from-right { + from { + transform: translateX(100%); + } + + to { + transform: translateX(0); + } + } + + @media (prefers-reduced-motion) { + // TODO: once finish animations / transition -> go through each & disable any animation/transition here + .topbar:not(.legacy) + nav.topbar-nav:is(.topbar-nav-open, .topbar-nav-closing) { + animation-duration: 0ms; + + & > .topbar-link-container { + animation-duration: 0ms; + } + } + } + + @media (forced-colors: active) { + a { + border-bottom: 1px solid; + + &:focus, + &:hover, + &.active { + border-bottom: 4px solid; + } + } + } +} diff --git a/src/less/components/topbar.less b/src/less/components/topbar.less index 6b461b6765..bffc0a3e00 100644 --- a/src/less/components/topbar.less +++ b/src/less/components/topbar.less @@ -1,4 +1,5 @@ @import "../global.less"; +@import "./topbar-experimental.less"; @topbar-height: 80px; @topbar-border-width: 0.5rem; @@ -6,7 +7,7 @@ @topbar-border-top: @topbar-border-width solid @brand-primary; @topbar-link-container-width: 288px; -.topbar { +.topbar:not(.experimental) { border-top: @topbar-border-top; background-color: @white; margin: 0 auto; @@ -356,11 +357,11 @@ } &.topbar-nav-open { - animation: fade-in 0.5s forwards; + animation: fade-in-legacy 0.5s forwards; border-top: solid 1px @brand-bg-gray; .topbar-link-container { - animation: slide-in 0.5s ease forwards; + animation: slide-in-legacy 0.5s ease forwards; .sidebar { display: block; @@ -399,10 +400,10 @@ } &.topbar-nav-closing { - animation: fade-out 0.3s forwards; + animation: fade-out-legacy 0.3s forwards; .topbar-link-container { - animation: slide-out 0.3s ease alternate; + animation: slide-out-legacy 0.3s ease alternate; > a:first-of-type { margin-top: 1rem; @@ -486,235 +487,234 @@ &.topbar-xl-wide { padding: 0 1.5rem; } -} - -.topbar-wide { - .topbar-btn { - display: none; - } - - .topbar-logo { - margin-top: 0; - margin-right: 2rem; - } - - .topbar-link-right { - margin-left: auto; - padding: 0; - align-items: center; - font-family: var(--brand-headline); - font-weight: var(--font-weight-normal); - color: var(--brand-secondary); - cursor: pointer; - text-decoration: none; - display: flex; - } + .topbar-wide { + .topbar-btn { + display: none; + } - .topbar-nav { - display: flex; - position: static; - flex-grow: 1; - height: 100%; + .topbar-logo { + margin-top: 0; + margin-right: 2rem; + } - .topbar-close { - display: none; + .topbar-link-right { + margin-left: auto; + padding: 0; + align-items: center; + font-family: var(--brand-headline); + font-weight: var(--font-weight-normal); + color: var(--brand-secondary); + cursor: pointer; + text-decoration: none; + display: flex; } - .topbar-link-container { - position: static; - background-color: transparent; - width: 100%; + .topbar-nav { display: flex; - padding: 0; - overflow: visible; - transform: translateX(0%); + position: static; + flex-grow: 1; + height: 100%; - > a:not(.close-topbar-nav) { - margin-top: 8px; + .topbar-close { + display: none; + } - &:hover { - > span { - &:before { - display: block; - width: 100%; - transition: width 0.4s; + .topbar-link-container { + position: static; + background-color: transparent; + width: 100%; + display: flex; + padding: 0; + overflow: visible; + transform: translateX(0%); + + > a:not(.close-topbar-nav) { + margin-top: 8px; + + &:hover { + > span { + &:before { + display: block; + width: 100%; + transition: width 0.4s; + } + + text-decoration: none; } + } + + &.active { + > span { + &:before { + width: 100%; + } - text-decoration: none; + text-decoration: none; + color: @black; + } } - } - &.active { > span { + position: relative; + &:before { - width: 100%; + content: ""; + position: absolute; + background-color: @brand-primary; + height: 4px; + bottom: -4px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + width: 0; } - - text-decoration: none; - color: @black; } - } - > span { - position: relative; - - &:before { - content: ""; - position: absolute; - background-color: @brand-primary; - height: 4px; - bottom: -4px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - width: 0; + &:not(.topbar-link-right) { + .material-icons, + &.material-icons { + display: none; + } } } - &:not(.topbar-link-right) { - .material-icons, - &.material-icons { - display: none; - } + > *:not(.close-topbar-nav):not(.topbar-link-right) { + text-decoration: none; + margin-left: 1rem; + margin-right: 1rem; } - } - - > *:not(.close-topbar-nav):not(.topbar-link-right) { - text-decoration: none; - margin-left: 1rem; - margin-right: 1rem; - } - .close-topbar-nav { - display: none; + .close-topbar-nav { + display: none; + } } } } -} -each(@grid-breakpoints, .(@min-width, @infix) { - .topbar-@{infix}-wide { - @media screen and (min-width: @min-width) { - .topbar-wide(); - } - } -}); + each(@grid-breakpoints, .(@min-width, @infix) { + &.topbar-@{infix}-wide { + @media screen and (min-width: @min-width) { + .topbar-wide(); + } + } + }); -// Keyframe animations -@keyframes slide-in { - 100% { - transform: translateX(0%); + // Keyframe animations + @keyframes slide-in-legacy { + 100% { + transform: translateX(0%); + } } -} -@keyframes slide-out { - 0% { - transform: translateX(0%); - } + @keyframes slide-out-legacy { + 0% { + transform: translateX(0%); + } - 100% { - transform: translateX(-100%); + 100% { + transform: translateX(-100%); + } } -} -@keyframes fade-in { - 0% { - background: transparent; - } + @keyframes fade-in-legacy { + 0% { + background: transparent; + } - 100% { - background: fade(@black, 50%); + 100% { + background: fade(@black, 50%); + } } -} -@keyframes fade-out { - 0% { - background: fade(@black, 50%); - } + @keyframes fade-out-legacy { + 0% { + background: fade(@black, 50%); + } - 100% { - background: transparent; + 100% { + background: transparent; + } } -} -@media (prefers-reduced-motion) { - .topbar { - .topbar-nav { - .sidebar { - .sidebar-nav { - .main-nav-ul { - .nav-group { - .nav-ul-active() { - > .nav-ul { - transition: max-height 0s ease-in-out; + @media (prefers-reduced-motion) { + .topbar { + .topbar-nav { + .sidebar { + .sidebar-nav { + .main-nav-ul { + .nav-group { + .nav-ul-active() { + > .nav-ul { + transition: max-height 0s ease-in-out; + } } } } } } - } - &.topbar-nav-open { - animation: fade-in 0s forwards; + &.topbar-nav-open { + animation: fade-in-legacy 0s forwards; - .topbar-link-container { - animation: slide-in 0s ease forwards; + .topbar-link-container { + animation: slide-in-legacy 0s ease forwards; + } } - } - &.topbar-nav-closing { - animation: fade-out 0s forwards; + &.topbar-nav-closing { + animation: fade-out-legacy 0s forwards; - .topbar-link-container { - animation: slide-out 0s ease alternate; + .topbar-link-container { + animation: slide-out-legacy 0s ease alternate; + } } } } } -} - -@media (forced-colors: active) { - #dg-topbar { - border-bottom: 3px solid; - } - .topbar-link-container { - border: 10px solid; - } + @media (forced-colors: active) { + #dg-topbar { + border-bottom: 3px solid; + } - .topbar { - .topbar-close { - outline: 2px solid; + .topbar-link-container { + border: 10px solid; + } - &:hover, - &:focus, - &.focus { + .topbar { + .topbar-close { outline: 2px solid; - } - &[active], - &:active, - &.active { - outline: 2px solid; - } + &:hover, + &:focus, + &.focus { + outline: 2px solid; + } - &:focus, - &.focus { - outline: 2px solid; + &[active], + &:active, + &.active { + outline: 2px solid; + } + + &:focus, + &.focus { + outline: 2px solid; + } } } - } - .nav-group { - .nav-leaf { - a { - border-bottom: 1px solid; + .nav-group { + .nav-leaf { + a { + border-bottom: 1px solid; - &:focus, - &:hover, - &.active { - border-bottom: 4px solid; + &:focus, + &:hover, + &.active { + border-bottom: 4px solid; + } } } } diff --git a/src/less/core/grid.less b/src/less/core/grid.less index 7db51bb58c..40676b0207 100644 --- a/src/less/core/grid.less +++ b/src/less/core/grid.less @@ -165,10 +165,6 @@ .container-fluid { .make-container(); - - > .topbar { - padding: 0; - } } .grid-guide { diff --git a/src/less/documentation-swedbankpay.less b/src/less/documentation-swedbankpay.less index 93dbf2cd40..988fecfe13 100644 --- a/src/less/documentation-swedbankpay.less +++ b/src/less/documentation-swedbankpay.less @@ -1170,11 +1170,16 @@ right: 56px; // width of options-open icon height: 39px; } + + &:has(.options-open.d-none):after { + right: 0; // no need to shift left when options sidebar button is not displayed + } } &.tabs-fade-left { &:before { height: 39px; + left: 0; } } @@ -1229,6 +1234,21 @@ } } } + + // TODO: delete once support for has() is good enough + // which means probably around mid-January 2024 for FF support on FF v.120 (Nov 2023) + 2 versions + @supports not selector(:has(a, b)) { + + div.d-flex > div.d-flex { + max-width: 100%; + } + } + + // prevents components inside doc component preview to overflow outside the component-preview container + @supports selector(:has(a, b)) { + + div > div:has(> .component-preview) { + max-width: 100%; + } + } } .component-preview { @@ -2002,11 +2022,15 @@ } .topbar { - z-index: calc(var(--sidebar-z-index, 400) - 1); + z-index: calc(var(--sidebar-z-index, 400)); - + main { - height: 10rem; - background-color: @light-gray; + &:not(.experimental) { + z-index: calc(var(--sidebar-z-index, 400) - 1); + + & + main { + height: 10rem; + background-color: @light-gray; + } } } } diff --git a/src/less/global.less b/src/less/global.less index dd7be51ff6..86b98e7bc9 100644 --- a/src/less/global.less +++ b/src/less/global.less @@ -165,6 +165,9 @@ --base-padding-xl: calc(var(--base-padding) * 2); --base-padding-xxl: calc(var(--base-padding) * 4); + // misc paddings + --vscroll-padding-right: 17px; + /* Forms spacing */ --input-padding-x: 16px; --input-padding-y: 12px; @@ -243,14 +246,10 @@ body { overflow: hidden; @media screen and (min-width: @screen-sm-min) { - padding-right: 17px; + padding-right: var(--vscroll-padding-right, 17px); .dialog { - padding-right: 17px; - } - - .topbar { - padding: 0 20px; + padding-right: var(--vscroll-padding-right, 17px); } } } diff --git a/src/less/variables-swedbankpay.less b/src/less/variables-swedbankpay.less index fe73349e88..3abaffb627 100644 --- a/src/less/variables-swedbankpay.less +++ b/src/less/variables-swedbankpay.less @@ -190,6 +190,7 @@ --text-disabled: #c0bebe; // Background colors + --brand-bg-gray: var(--gray, #ebe7e2); // System colors --brand-error: #b5111a; diff --git a/src/scripts/main/sidebar/index.js b/src/scripts/main/sidebar/index.js index 42dfd21b15..af7eddf96e 100644 --- a/src/scripts/main/sidebar/index.js +++ b/src/scripts/main/sidebar/index.js @@ -24,20 +24,20 @@ class TopbarSidebar { navGroup .querySelector(".nav-group-heading") .addEventListener("click", () => - this._setActiveStatus(navGroup, SELECTORS.NAVGROUP) - ) + this._setActiveStatus(navGroup, SELECTORS.NAVGROUP), + ), ); [...navSubGroups].map((navSubGroup) => navSubGroup .querySelector(".nav-subgroup-heading") .addEventListener("click", () => - this._setActiveStatus(navSubGroup, SELECTORS.NAVSUBGROUP) - ) + this._setActiveStatus(navSubGroup, SELECTORS.NAVSUBGROUP), + ), ); [...navLeaves].map((navLeaf) => navLeaf.addEventListener("click", () => - this._setActiveStatus(navLeaf, SELECTORS.NAVLEAF) - ) + this._setActiveStatus(navLeaf, SELECTORS.NAVLEAF), + ), ); } @@ -45,18 +45,18 @@ class TopbarSidebar { element.classList.remove("active"); const activeSubGroups = element.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.ACTIVE + SELECTORS.NAVSUBGROUP + SELECTORS.ACTIVE, ); activeSubGroups.length > 0 && [...activeSubGroups].map((activeSubGroup) => - activeSubGroup.classList.remove("active") + activeSubGroup.classList.remove("active"), ); } _setActiveStatus(element, selector) { const activeElements = this.el.querySelectorAll( - selector + SELECTORS.ACTIVE + selector + SELECTORS.ACTIVE, ); element.classList.add("active"); @@ -67,7 +67,7 @@ class TopbarSidebar { } else { activeElement !== element && [...activeElement.querySelectorAll(SELECTORS.NAVSUBGROUP)].filter( - (activeElementChild) => activeElementChild === element + (activeElementChild) => activeElementChild === element, ).length === 0 && activeElement.classList.remove("active"); } @@ -82,13 +82,13 @@ class TopbarSidebar { return () => { const scrollNumber = [...headers].filter( - (header) => header.offsetTop <= content.scrollTop + scrollBuffer + (header) => header.offsetTop <= content.scrollTop + scrollBuffer, ).length - 1; const activeLeaf = this.el.querySelector( - SELECTORS.NAVLEAF + SELECTORS.ACTIVE + SELECTORS.NAVLEAF + SELECTORS.ACTIVE, ); const leaves = activeLeaf.parentElement.querySelectorAll( - SELECTORS.NAVLEAF + SELECTORS.NAVLEAF, ); if (scrollNumber === -1) { @@ -143,24 +143,24 @@ class Sidebar { window.addEventListener("popstate", this._popStateListener); [...liList].map((li) => - li.querySelector("a").addEventListener("click", () => this._activate(li)) + li.querySelector("a").addEventListener("click", () => this._activate(li)), ); Array.from(this.el.querySelectorAll("ul")).map((ul) => ul.parentElement.classList.contains("active") ? ul.setAttribute("aria-expanded", "true") - : ul.setAttribute("aria-expanded", "false") + : ul.setAttribute("aria-expanded", "false"), ); [...previousNavs].map((previousNav) => previousNav.addEventListener("click", () => - this._setPreviousNav(previousNav) - ) + this._setPreviousNav(previousNav), + ), ); [...secondaryNavLI].map((secNavLi) => secNavLi.addEventListener("keyup", (e) => { if (e.keyCode === 13) { skipLink.focus(); } - }) + }), ); } @@ -218,7 +218,7 @@ class Sidebar { _setActiveStatus(element, selector) { const activeElements = this.el.querySelectorAll( - selector + SELECTORS.ACTIVE + selector + SELECTORS.ACTIVE, ); element.classList.add("active"); @@ -254,10 +254,10 @@ class Sidebar { _contentScrollListener() { const scrollNumber = [...this.headers].filter( - (header) => header.offsetTop <= window.pageYOffset + (header) => header.offsetTop <= window.pageYOffset, ).length - 1; const activeSecondaryNavLi = this.el.querySelector( - `.secondary-nav-li${SELECTORS.ACTIVE}` + `.secondary-nav-li${SELECTORS.ACTIVE}`, ); const leaves = activeSecondaryNavLi ? activeSecondaryNavLi.querySelectorAll(SELECTORS.NAVLEAF) @@ -301,7 +301,7 @@ const setActiveState = (id, group, subGroup, leaf) => { subGroup < activeGroup.querySelectorAll(SELECTORS.NAVSUBGROUP).length ) { const activeSubGroup = activeGroup.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.NAVSUBGROUP, )[subGroup]; activeSubGroup.classList.add("active"); @@ -318,7 +318,7 @@ const setActiveState = (id, group, subGroup, leaf) => { return active; } else { console.warn( - "sidebar.setActiveState: The group parameter must be provided" + "sidebar.setActiveState: The group parameter must be provided", ); return null; @@ -331,7 +331,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { if (!sidebar) { console.warn( - `sidebar.removeActiveState: No sidebar with id ${id} found.` + `sidebar.removeActiveState: No sidebar with id ${id} found.`, ); return null; @@ -343,7 +343,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { if (subGroup !== null) { const activeSubGroup = activeGroup.querySelectorAll( - SELECTORS.NAVSUBGROUP + SELECTORS.NAVSUBGROUP, )[subGroup]; active = activeSubGroup; @@ -355,7 +355,7 @@ const removeActiveState = (id, group, subGroup, leaf) => { active.classList.remove("active"); } else { console.warn( - "sidebar.removeActiveState: The group parameter must be provided" + "sidebar.removeActiveState: The group parameter must be provided", ); return null; @@ -367,6 +367,14 @@ const initScrollListener = (id, contentId, headerType) => { const sidebar = _sidebars.filter((sidebar) => sidebar.id === id)[0]; + if (!sidebar) { + console.warn( + `sidebar.initScrollListener: Cannot find sidebar with id ${id}`, + ); + + return false; + } + const content = document.getElementById(contentId); if (content) { @@ -382,12 +390,15 @@ const initScrollListener = (id, contentId, headerType) => { .querySelectorAll(SELECTORS.NAVLEAF); [...leaves].map((leaf, i) => - leaf.addEventListener("click", sidebar._navLeafScrollListener(headers[i])) + leaf.addEventListener( + "click", + sidebar._navLeafScrollListener(headers[i]), + ), ); sidebar._contentScrollListener(); } else { console.warn( - `sidebar.initScrollListener: Cannot find main content with id ${contentId}` + `sidebar.initScrollListener: Cannot find main content with id ${contentId}`, ); } }; @@ -395,6 +406,14 @@ const initScrollListener = (id, contentId, headerType) => { const removeScrollListener = (id) => { const sidebar = _sidebars.filter((sidebar) => sidebar.id === id)[0]; + if (!sidebar) { + console.warn( + `sidebar.removeScrollListener: Cannot find sidebar with id ${id}`, + ); + + return false; + } + window.removeEventListener("scroll", sidebar._contentScrollListener); }; @@ -403,7 +422,7 @@ const _createTopbarSidebar = (sidebarQuery) => { _sidebars.filter((sidebar) => sidebar.id === sidebarQuery.id).length > 0 ) { const updatedSidebarObject = _sidebars.filter( - (sidebar) => sidebar.id === sidebarQuery.id + (sidebar) => sidebar.id === sidebarQuery.id, )[0]; updatedSidebarObject.constructSidebar(sidebarQuery); @@ -423,7 +442,7 @@ const _createSidebar = (sidebarQuery) => { _sidebars.filter((sidebar) => sidebar.id === sidebarQuery.id).length > 0 ) { const updatedSidebarObject = _sidebars.filter( - (sidebar) => sidebar.id === sidebarQuery.id + (sidebar) => sidebar.id === sidebarQuery.id, )[0]; updatedSidebarObject.constructSidebar(sidebarQuery); @@ -441,7 +460,17 @@ const _createSidebar = (sidebarQuery) => { const populateSidebarTertiary = (id, leafList) => { const sidebar = document.getElementById(id); - const activeTertiaryUl = sidebar.querySelector(".secondary-nav-li.active ul"); + const activeTertiaryUl = sidebar?.querySelector( + ".secondary-nav-li.active ul", + ); + + if (!sidebar) { + console.warn( + `sidebar.populateSidebarTertiary: Cannot find sidebar with id ${id}`, + ); + + return false; + } activeTertiaryUl.innerHTML = ""; @@ -486,7 +515,7 @@ const init = (id, topbarSidebar) => { } const sidebarObjects = [...sidebars].map((sidebar) => - _createSidebar(sidebar) + _createSidebar(sidebar), ); return sidebarObjects; diff --git a/src/scripts/main/topbar/NavMenu.js b/src/scripts/main/topbar/NavMenu.js index db9d24ad45..c116769a7d 100644 --- a/src/scripts/main/topbar/NavMenu.js +++ b/src/scripts/main/topbar/NavMenu.js @@ -4,6 +4,7 @@ const SELECTORS = { BTN: ".topbar-btn", ICON: ".topbar-btn-icon", OPEN: "topbar-nav-open", + CLOSING: "topbar-nav-closing", }; const FOCUSELEMENTS = @@ -16,6 +17,9 @@ export default class NavMenu { this._closeHandlerNavMenuElement = this._closeHandlerNavMenuElement.bind(this); this.close = this.close.bind(this); + this._removesNavClosing = this._removesNavClosing.bind(this); + this._safetyClosingCleanIfDidNotReachEnd = + this._safetyClosingCleanIfDidNotReachEnd.bind(this); this.constructNavMenu(topbarComponent, navMenu); } @@ -102,9 +106,12 @@ export default class NavMenu { window.removeEventListener("resize", this.resizeEvent, { passive: true }); this.navMenuElement.classList.remove("topbar-nav-open"); - this.navMenuElement.style.display = "none"; - this.btnElement.style.display = "flex"; - this.closeNavIcon.style.display = "none"; + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "none"; + this.closeNavIcon.style.display = "none"; + this.btnElement.style.display = "flex"; + } } _setFirstTabStop(index) { @@ -120,9 +127,12 @@ export default class NavMenu { this.resizeEvent = this._resizeListener.bind(this); window.addEventListener("resize", this.resizeEvent, { passive: true }); this.navMenuElement.classList.add("topbar-nav-open"); - this.navMenuElement.style.display = "block"; - this.btnElement.style.display = "none"; - this.closeNavIcon.style.display = "flex"; + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "block"; + this.btnElement.style.display = "none"; + this.closeNavIcon.style.display = "flex"; + } this.btnElement.setAttribute("aria-expanded", "true"); @@ -135,16 +145,15 @@ export default class NavMenu { this.isOpen = false; window.removeEventListener("resize", this.resizeEvent, { passive: true }); - this.navMenuElement.classList.remove("topbar-nav-open"); this.navMenuElement.classList.add("topbar-nav-closing"); - setTimeout(() => { - this.focusedElementBeforeNav ? this.focusedElemBeforeNav.focus() : null; + this.navMenuElement.classList.remove("topbar-nav-open"); - this.navMenuElement.classList.remove("topbar-nav-closing"); - this.navMenuElement.style.display = "none"; - this.btnElement.style.display = "flex"; - this.closeNavIcon.style.display = "none"; - }, 300); + this.navMenuElement.addEventListener( + "animationend", + this._removesNavClosing + ); + + this._safetyClosingCleanIfDidNotReachEnd(); this.btnElement.setAttribute("aria-expanded", "false"); @@ -154,4 +163,35 @@ export default class NavMenu { _containsPoint(x, y) { return isWithinBoundingBox(x, y, this.linkContainer); } + + _removesNavClosing() { + this.focusedElementBeforeNav ? this.focusedElemBeforeNav.focus() : null; + + this.navMenuElement.classList.remove("topbar-nav-closing"); + + if (this._isLegacyMenu(this.navMenuElement)) { + this.navMenuElement.style.display = "none"; + this.btnElement.style.display = "flex"; + this.closeNavIcon.style.display = "none"; + } + + this.navMenuElement.removeEventListener( + "animationend", + this._removesNavClosing + ); + } + + _safetyClosingCleanIfDidNotReachEnd() { + setTimeout(() => { + this.navMenuElement.classList.contains(SELECTORS.CLOSING) + ? this._removesNavClosing() + : null; + }, 600); + } + + _isLegacyMenu(navMenu) { + return Boolean( + !navMenu?.closest(".topbar")?.classList.contains("experimental") + ); + } }