diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml index 4b51647e1c837f5..888970356b7c16e 100644 --- a/.github/workflows/auto-cleanup-bot.yml +++ b/.github/workflows/auto-cleanup-bot.yml @@ -15,12 +15,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" package-manager-cache: false @@ -44,7 +44,7 @@ jobs: - name: Create PR with only fixable issues if: success() - uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9 + uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11 with: commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues" branch: markdownlint-auto-cleanup @@ -61,7 +61,7 @@ jobs: - name: Create PR with notice on unfixed issues if: failure() - uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9 + uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11 with: commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues" branch: markdownlint-auto-cleanup diff --git a/.github/workflows/interfacedata-updater.yml b/.github/workflows/interfacedata-updater.yml index 09b9ba10a242d1e..b19f06819404791 100644 --- a/.github/workflows/interfacedata-updater.yml +++ b/.github/workflows/interfacedata-updater.yml @@ -16,20 +16,20 @@ jobs: steps: - name: Checkout content - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: path: mdn-content ref: main persist-credentials: false - name: Setup node.js - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: "mdn-content/.nvmrc" package-manager-cache: false - name: Checkout webref - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: repository: w3c/webref path: webref @@ -41,7 +41,7 @@ jobs: run: node scripts/update-interface-data.js ../webref/ - name: Create pull request - uses: peter-evans/create-pull-request@84ae59a2cdc2258d6fa0732dd66352dddae2a412 # v7.0.9 + uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11 with: path: mdn-content token: ${{ secrets.AUTOMERGE_TOKEN }} diff --git a/.github/workflows/markdown-lint.yml b/.github/workflows/markdown-lint.yml index ee36314873d86b7..2ef1ae0cc8442e0 100644 --- a/.github/workflows/markdown-lint.yml +++ b/.github/workflows/markdown-lint.yml @@ -19,12 +19,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check-lint_content.yml b/.github/workflows/pr-check-lint_content.yml index 16f78fa56de8d8c..a27a4b916f90427 100644 --- a/.github/workflows/pr-check-lint_content.yml +++ b/.github/workflows/pr-check-lint_content.yml @@ -21,7 +21,7 @@ jobs: steps: - name: Checkout BASE - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false @@ -55,7 +55,7 @@ jobs: - name: Checkout HEAD if: steps.check.outputs.HAS_FILES == 'true' - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: ref: ${{ github.event.pull_request.head.sha }} path: pr_head @@ -79,7 +79,7 @@ jobs: - name: Setup Node.js environment if: steps.check.outputs.HAS_FILES == 'true' - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_cspell_lists.yml b/.github/workflows/pr-check_cspell_lists.yml index 13dd2c1dff94be8..66d9e0814a067ee 100644 --- a/.github/workflows/pr-check_cspell_lists.yml +++ b/.github/workflows/pr-check_cspell_lists.yml @@ -12,7 +12,7 @@ jobs: docs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: sparse-checkout-cone-mode: false sparse-checkout: | @@ -23,7 +23,7 @@ jobs: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" diff --git a/.github/workflows/pr-check_javascript.yml b/.github/workflows/pr-check_javascript.yml index 9b0c7213dd08e1b..fb0e086f27f5a33 100644 --- a/.github/workflows/pr-check_javascript.yml +++ b/.github/workflows/pr-check_javascript.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_json.yml b/.github/workflows/pr-check_json.yml index 5d8030d72c4ab5c..6908687864342b2 100644 --- a/.github/workflows/pr-check_json.yml +++ b/.github/workflows/pr-check_json.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_redirects.yml b/.github/workflows/pr-check_redirects.yml index b588a187352a9f1..f334ed8e9b56a38 100644 --- a/.github/workflows/pr-check_redirects.yml +++ b/.github/workflows/pr-check_redirects.yml @@ -11,12 +11,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_scripts.yml b/.github/workflows/pr-check_scripts.yml index d297dbf58180ff0..c78c5b67a9ea936 100644 --- a/.github/workflows/pr-check_scripts.yml +++ b/.github/workflows/pr-check_scripts.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm @@ -37,12 +37,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm @@ -80,12 +80,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm @@ -101,12 +101,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm @@ -126,12 +126,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_url-issues.yml b/.github/workflows/pr-check_url-issues.yml index e3e21c52422fa98..edab54c49a38f61 100644 --- a/.github/workflows/pr-check_url-issues.yml +++ b/.github/workflows/pr-check_url-issues.yml @@ -14,13 +14,13 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: fetch-depth: 0 persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-check_yml.yml b/.github/workflows/pr-check_yml.yml index 24e1a154dea56e9..1b335f603535d64 100644 --- a/.github/workflows/pr-check_yml.yml +++ b/.github/workflows/pr-check_yml.yml @@ -16,12 +16,12 @@ jobs: runs-on: ubuntu-latest steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/pr-review-companion.yml b/.github/workflows/pr-review-companion.yml index 431c766cdb94928..6bb957de5fd487b 100644 --- a/.github/workflows/pr-review-companion.yml +++ b/.github/workflows/pr-review-companion.yml @@ -93,14 +93,14 @@ jobs: process_gcloudignore: false - name: Checkout (mdn/content) - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 if: steps.check.outputs.HAS_ARTIFACT with: path: content persist-credentials: false - name: Setup (mdn/content) - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 if: steps.check.outputs.HAS_ARTIFACT with: node-version-file: "content/.nvmrc" diff --git a/.github/workflows/pr-test.yml b/.github/workflows/pr-test.yml index 431c2ed17866169..467d7229a3e639c 100644 --- a/.github/workflows/pr-test.yml +++ b/.github/workflows/pr-test.yml @@ -27,7 +27,7 @@ jobs: BUILD_OUT_ROOT: build steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false @@ -78,7 +78,7 @@ jobs: - name: Setup Node.js environment if: steps.check.outputs.HAS_FILES == 'true' - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" cache: npm diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index ff190b7653d523c..6978ed65a0bc4da 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -18,12 +18,12 @@ jobs: timeout-minutes: 5 steps: - - uses: actions/checkout@1af3b93b6815bc44a9784bd300feb67ff0d1eeb3 # v6.0.0 + - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - name: Setup Node.js environment - uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0 + uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0 with: node-version-file: ".nvmrc" package-manager-cache: false diff --git a/files/en-us/mozilla/firefox/releases/147/index.md b/files/en-us/mozilla/firefox/releases/147/index.md index 2dc3ac9cac11ea6..4b6fe6d65ca7532 100644 --- a/files/en-us/mozilla/firefox/releases/147/index.md +++ b/files/en-us/mozilla/firefox/releases/147/index.md @@ -32,7 +32,10 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/ - +### CSS + +- The `-webkit-` prefixed version of the {{cssxref("perspective")}} property is now supported with unitless values — for example `-webkit-perspective: 800` — for increased compatibility. + ([Firefox bug 1362499](https://bugzil.la/1362499)). @@ -50,7 +53,9 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/ - +### APIs + +- The {{domxref("Document.activeViewTransition")}} property is now supported, which returns a {{domxref("ViewTransition")}} instance representing the [view transition](/en-US/docs/Web/API/View_Transition_API) currently active on the document. This provides a consistent way to access an active view transition in any context without having to manually store a reference to it for later use. ([Firefox bug 2001836](https://bugzil.la/2001836)). diff --git a/files/en-us/web/api/sanitizerconfig/index.md b/files/en-us/web/api/sanitizerconfig/index.md index f70f4a506685fc4..83cb5d8bed92610 100644 --- a/files/en-us/web/api/sanitizerconfig/index.md +++ b/files/en-us/web/api/sanitizerconfig/index.md @@ -195,7 +195,7 @@ const sanitizer1 = new Sanitizer({ }); ``` -Invalid because {{htmlelement("span")}} is in both `elements` and `removeElements`. +Invalid because {{htmlelement("span")}} is in both `elements` and `replaceWithChildrenElements`: ```js const sanitizer2 = new Sanitizer({ @@ -213,7 +213,7 @@ const sanitizer3 = new Sanitizer({ }); ``` -Invalid because it has `removeAttributes` and `dataAttributes` defined. +Invalid because it has `removeAttributes` and `dataAttributes` defined: ```js const sanitizer4 = new Sanitizer({ diff --git a/files/en-us/web/css/reference/properties/animation-range-end/index.md b/files/en-us/web/css/reference/properties/animation-range-end/index.md index 97a5330ce32f924..16d87df0d730cef 100644 --- a/files/en-us/web/css/reference/properties/animation-range-end/index.md +++ b/files/en-us/web/css/reference/properties/animation-range-end/index.md @@ -6,12 +6,7 @@ browser-compat: css.properties.animation-range-end sidebar: cssref --- -The **`animation-range-end`** [CSS](/en-US/docs/Web/CSS) property is used to set the end of an animation's attachment range along its timeline, i.e., where along the timeline an animation will end. - -The `animation-range-end` and {{cssxref("animation-range-start")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property. - -> [!NOTE] -> `animation-range-end` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-end` value to `normal`, but a specific value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare `animation-range-end` after declaring any `animation` shorthand for it to take effect. +The **`animation-range-end`** [CSS](/en-US/docs/Web/CSS) property sets the point on the timeline where an animation should end. ## Syntax @@ -26,13 +21,35 @@ animation-range-end: cover; animation-range-end: contain; animation-range-end: cover 80%; animation-range-end: contain 700px; + +/* Global values */ +animation-range-end: inherit; +animation-range-end: initial; +animation-range-end: revert; +animation-range-end: revert-layer; +animation-range-end: unset; ``` ### Values -Allowed values for `animation-range-end` are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` with a `` following it. See {{cssxref("animation-range")}} for a detailed description of the available values. +- `normal` + - : Represents the end of the timeline. This is the default value. +- {{cssxref("length-percentage")}} + - : Specifies a length or percentage value measured from the beginning of the timeline. +- [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) + - : Specifies a named timeline range within the overall timeline. The range starts at `0%`. +- ` ` + - : Specifies a length or percentage value measured from the beginning of the specified named timeline range. + +## Description -Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows exactly what the different values mean in an easy visual format. +The `animation-range-end` property specifies the end of the animation's attachment range. Changing the end of the attachment range can potentially shift the end of the animation, that is, the point where keyframes mapped to `100%` progress land when the iteration count is `1`, and can also reduce the effective duration of the animation. + +The property value can be `normal`, a ``, or a {{cssxref("timeline-range-name")}} with an optional ``. If the `` value does not include a ``, the percentage defaults to `100%`. + +The `animation-range-end` property is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-end` value to `normal`; the shorthand cannot be used to set a new `animation-range-end` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-end` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`. + +The `animation-range-end` property, along with the {{cssxref("animation-range-start")}} property, can also be set by using the {{cssxref("animation-range")}} shorthand. ## Formal definition @@ -44,18 +61,13 @@ Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-anima ## Examples -### Creating a named view progress timeline with range end - -A view progress timeline named `--subject-reveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`. -This is then set as the timeline for the same element using `animation-timeline: --subject-reveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled. +### Creating a view progress timeline with a range end -An `animation-range-end` declaration is also set to make the animation end earlier than expected. +In this example, the `animation-range-end` is applied to an element animated via a view progress timeline. This makes the animation reach its last keyframe well before the element reaches the end of it's containing viewport. #### HTML -The HTML for the example is shown below. - -```html +```html hidden

Content

@@ -74,34 +86,93 @@ The HTML for the example is shown below. Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit.

+
+``` -
+In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity. -

- Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu - cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet - dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non - tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam - vel quam elementum. Nibh praesent tristique magna sit amet purus gravida - quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat - imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi - scelerisque. Netus et malesuada fames ac. +```html +

+``` + +```html hidden +

+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu + cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet + dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non tellus + orci ac auctor augue mauris. Risus quis varius quam quisque id diam vel quam + elementum. Nibh praesent tristique magna sit amet purus gravida quis. Duis + ultricies lacus sed turpis tincidunt id aliquet. In egestas erat imperdiet sed + euismod nisi. Eget egestas purus viverra accumsan in nisl nisi scelerisque. + Netus et malesuada fames ac. +

+

+``` + +We've also included a checkbox that will toggle the {{cssxref("animation-fill-mode")}} property, so you can see how this property affects animations with shortened timelines. + +```html + +``` + +```html hidden

``` #### CSS -The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings: +We've defined a view progress timeline by setting a [`view()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/view) function as the value of the {{cssxref("animation-timeline")}} property. This is declared **after** the {{cssxref("animation")}} shorthand to avoid resetting the longhand property value. + +We've also set `animation-range-end` to make the animation end earlier than expected. + +```css +.animatedElement { + background-color: deeppink; + animation: appear 1ms linear; + animation-timeline: view(); + animation-range-end: exit 25%; +} + +@keyframes appear { + from { + background-color: rebeccapurple; + opacity: 0; + transform: scaleX(0); + } + + to { + background-color: darkturquoise; + opacity: 0.75; + transform: scaleX(0.75); + } +} +``` + +When the checkbox is checked, the `animation-fill-mode` property gets applied to the animated element: ```css -.subject { +:has(:checked) .animatedElement { + animation-fill-mode: forwards; +} +``` + +The other styles applied in this example has been hidden here for brevity. + +```css hidden +.animatedElement { width: 300px; height: 200px; margin: 0 auto; background-color: deeppink; } +:has(:checked) .animatedElement { + animation-fill-mode: both; +} + .content { width: 75%; max-width: 800px; @@ -121,41 +192,23 @@ p { font-size: 1.5rem; line-height: 1.5; } -``` - -The `
` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range-end` declaration to make the animation end earlier than expected. - -Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller. - -```css -.animation { - view-timeline: --subject-reveal block; - animation-timeline: --subject-reveal; - - animation-name: appear; - animation-range-end: contain 50%; - animation-fill-mode: both; - animation-duration: 1ms; /* Firefox requires this to apply the animation */ -} - -@keyframes appear { - from { - opacity: 0; - transform: scaleX(0); - } - - to { - opacity: 1; - transform: scaleX(1); +@supports not (animation-range-end: normal) { + body::before { + content: "Your browser does not support the 'animation-range-end' property."; + color: black; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; } } ``` #### Result -Scroll to see the subject element being animated. +Scroll to see the element animate. Then toggle the checkbox at the end of the block of text and scroll again. Notice how the element finishes animating when it is 75% of the way through the viewport, and how it returns to its default state at that point when the `animation-fill-mode` property is not applied. -{{EmbedLiveSample("Creating a named view progress timeline with range end", "100%", "480px")}} +{{EmbedLiveSample("Creating a view progress timeline with a range end", "100%", "480px")}} ## Specifications @@ -168,9 +221,10 @@ Scroll to see the subject element being animated. ## See also - {{cssxref("animation-timeline")}} -- {{cssxref("animation-range")}}, {{cssxref("animation-range-start")}} -- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}} -- {{cssxref("timeline-scope")}} +- {{cssxref("animation-range")}} +- {{cssxref("animation-range-start")}} - {{cssxref("view-timeline-inset")}} -- The JavaScript equivalent: The `rangeEnd` property available in {{domxref("Element.animate()")}} calls -- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) +- {{domxref("Element.animate()")}} `rangeStart` property +- [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines) +- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module +- [View progress timeline: Ranges and animation progress visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) diff --git a/files/en-us/web/css/reference/properties/animation-range-start/index.md b/files/en-us/web/css/reference/properties/animation-range-start/index.md index 92d8afc66fcc7f4..26e011a282172b4 100644 --- a/files/en-us/web/css/reference/properties/animation-range-start/index.md +++ b/files/en-us/web/css/reference/properties/animation-range-start/index.md @@ -6,12 +6,7 @@ browser-compat: css.properties.animation-range-start sidebar: cssref --- -The **`animation-range-start`** [CSS](/en-US/docs/Web/CSS) property is used to set the start of an animation's attachment range along its timeline, i.e., where along the timeline an animation will start. - -The `animation-range-start` and {{cssxref("animation-range-end")}} properties can also be set using the {{cssxref("animation-range")}} shorthand property. - -> [!NOTE] -> `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that including `animation` resets a previously-declared `animation-range-start` value to `normal`, but a specific value cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare `animation-range-start` after declaring any `animation` shorthand for it to take effect. +The **`animation-range-start`** [CSS](/en-US/docs/Web/CSS) property sets the point on the timeline where an animation should start. ## Syntax @@ -26,13 +21,35 @@ animation-range-start: cover; animation-range-start: contain; animation-range-start: cover 20%; animation-range-start: contain 100px; + +/* Global values */ +animation-range-start: inherit; +animation-range-start: initial; +animation-range-start: revert; +animation-range-start: revert-layer; +animation-range-start: unset; ``` ### Values -Allowed values for `animation-range-start` are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` with a `` following it. See {{cssxref("animation-range")}} for a detailed description of the available values. +- `normal` + - : Represents the start of the timeline. This is the default value. +- {{cssxref("length-percentage")}} + - : Specifies a length or percentage value measured from the beginning of the timeline. +- [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) + - : Specifies a named timeline range within the overall timeline. The range starts at `0%`. +- ` ` + - : Specifies a length or percentage value measured from the beginning of the specified named timeline range. + +## Description + +Allowed values for the `animation-range-start` property are `normal`, a {{cssxref("length-percentage")}}, a ``, or a `` followed by a ``. If the [``](/en-US/docs/Web/CSS/Reference/Values/timeline-range-name) value does not include a ``, the percentage defaults to `0%`. +See [`animation-range`](/en-US/docs/Web/CSS/animation-range) for a detailed description of the available values. +Also check out the [View progress timeline visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows what the different values mean in an easy-to-follow visual format. + +The `animation-range-start` is included in the {{cssxref("animation")}} shorthand as a reset-only value. This means that using the `animation` shorthand resets any previously declared `animation-range-start` value of equal or lower specificity to `normal`; the shorthand cannot be used to set a new `animation-range-start` value. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you should declare `animation-range-start` _after_ declaring any `animation` shorthand to avoid resetting the value to `normal`. -Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/), which shows exactly what the different values mean in an easy visual format. +The `animation-range-start`, along with the {{cssxref("animation-range-end")}} property, can also be set using the {{cssxref("animation-range")}} shorthand. ## Formal definition @@ -44,18 +61,13 @@ Also check out the [View Timeline Ranges Visualizer](https://scroll-driven-anima ## Examples -### Creating a named view progress timeline with range start +### Creating a scroll view progress timeline with range start -A view progress timeline named `--subject-reveal` is defined using the `view-timeline` property on a subject element with a `class` of `animation`. -This is then set as the timeline for the same element using `animation-timeline: --subject-reveal;`. The result is that the subject element animates as it moves upwards through the document as it is scrolled. - -An `animation-range-start` declaration is also set to make the animation begin later than expected. +In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation start well before the element enters the scrollport. #### HTML -The HTML for the example is shown below. - -```html +```html hidden

Content

@@ -74,29 +86,64 @@ The HTML for the example is shown below. Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit.

+
+``` -
+In the middle of a long block of text, we've included an element that we'll animate. We've added a lot of text to ensure that the content overflows its container; the extra text is hidden here for brevity. -

- Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu - cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet - dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non - tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam - vel quam elementum. Nibh praesent tristique magna sit amet purus gravida - quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat - imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi - scelerisque. Netus et malesuada fames ac. -

+```html +
+``` + +```html hidden +

+ Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu + cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet + dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non + tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam + vel quam elementum. Nibh praesent tristique magna sit amet purus gravida + quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat + imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi + scelerisque. Netus et malesuada fames ac. +

``` #### CSS -The `subject` element and its containing `content` element are styled minimally, and the text content is given some basic font settings: +A scroll progress timeline is defined using setting a [`scroll()`](/en-US/docs/Web/CSS/Reference/Properties/animation-timeline/scroll) function as the value of the {{cssxref("animation-timeline")}} property. This is declared **after** the {{cssxref("animation")}} shorthand to avoid resetting the longhand property value. + +We've also set `animation-range-start` to make the animation start earlier than expected. ```css -.subject { - width: 300px; +.animatedElement { + background-color: deeppink; + + animation: appear 1ms linear; + + animation-timeline: scroll(); + animation-range-start: -25%; +} + +@keyframes appear { + from { + background-color: rebeccapurple; + opacity: 0; + transform: scaleX(0); + } + + to { + background-color: darkturquoise; + opacity: 0.75; + transform: scaleX(0.75); + } +} +``` + +Other styles applied in this example have been hidden here for brevity. + +```css hidden +.animatedElement { height: 200px; margin: 0 auto; background-color: deeppink; @@ -121,39 +168,22 @@ p { font-size: 1.5rem; line-height: 1.5; } -``` - -The `
` with the class of `subject` is also given a class of `animation` — this is where `view-timeline` is set to define a named view progress timeline. It is also given an `animation-timeline` name with the same value to declare that this will be the element animated as the view progress timeline is progressed. We also give it an `animation-range-start` declaration to make the animation begin later than expected. -Last, an animation is specified on the element that animates its opacity and scale, causing it to fade in and size up as it moves up the scroller. - -```css -.animation { - view-timeline: --subject-reveal block; - animation-timeline: --subject-reveal; - - animation-name: appear; - animation-range-start: entry 25%; - animation-fill-mode: both; - animation-duration: 1ms; /* Firefox requires this to apply the animation */ -} - -@keyframes appear { - from { - opacity: 0; - transform: scaleX(0); - } - - to { - opacity: 1; - transform: scaleX(1); +@supports not (animation-range-start: normal) { + body::before { + content: "Your browser does not support the 'animation-range-start' property."; + color: black; + background-color: wheat; + display: block; + text-align: center; + padding: 1rem 0; } } ``` #### Result -Scroll to see the subject element being animated. +Scroll to see the element animate. Notice how the element is already scaled and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport. {{EmbedLiveSample("Creating a named view progress timeline with range start", "100%", "480px")}} @@ -168,9 +198,10 @@ Scroll to see the subject element being animated. ## See also - {{cssxref("animation-timeline")}} -- {{cssxref("animation-range")}}, {{cssxref("animation-range-end")}} -- {{cssxref("scroll-timeline")}}, {{cssxref("scroll-timeline-axis")}}, {{cssxref("scroll-timeline-name")}} -- {{cssxref("timeline-scope")}} +- {{cssxref("animation-range")}} +- {{cssxref("animation-range-end")}} - {{cssxref("view-timeline-inset")}} -- The JavaScript equivalent: The `rangeStart` property available in {{domxref("Element.animate()")}} calls -- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) +- {{domxref("Element.animate()")}} `rangeStart` property +- [Scroll-driven animation timelines](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines) +- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module +- [View progress timeline: Ranges and animation progress visualizer](https://scroll-driven-animations.style/tools/view-timeline/ranges/) diff --git a/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md b/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md index 0b45280f2a5cc43..f97aa6067c6e96c 100644 --- a/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md +++ b/files/en-us/web/css/reference/selectors/_doublecolon_details-content/index.md @@ -39,10 +39,12 @@ selector::details-content ### Basic example -In this example the `::details-content` pseudo-element is used to set a {{cssxref("background-color")}} on the content of the {{HTMLElement("details")}} element. +This example demonstrates basic usage of the `::details-content` pseudo-element to style the content of a {{HTMLElement("details")}} element. #### HTML +Our `
` element includes a {{HTMLElement("summary")}} element, whose contents will always be visible. The details content includes a {{HTMLElement("p")}} element. + ```html
Click me @@ -52,6 +54,8 @@ In this example the `::details-content` pseudo-element is used to set a {{cssxre #### CSS +We set a {{cssxref("background-color")}} on the `::details-content` pseudo-element: + ```css details::details-content { background-color: #a29bfe; @@ -60,17 +64,18 @@ details::details-content { #### Result +Click on the summary to view the detail contents. + {{EmbedLiveSample("Basic_example", "100%", 150)}} ### Transition example -In this example the `::details-content` pseudo-element is used to set a {{cssxref("transition")}} on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed. To achieve this, two separate transitions are specified inside the `transition` shorthand property: - -- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect. -- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `
` content is expanded/collapsed) is also given a basic `600ms` transition, but with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `
` content was collapsed — you wouldn't see the smooth fade-out. +In this example the `::details-content` pseudo-element is used to set a transition on the content of the {{HTMLElement("details")}} element so that it smoothly fades into view when expanded, and fades out again when collapsed. #### HTML +The HTML is the same as in the previous example. + ```html
Click me @@ -80,6 +85,11 @@ In this example the `::details-content` pseudo-element is used to set a {{cssxre #### CSS +To achieve our transition, we specify two separate transitions inside the {{cssxref("transition")}} shorthand property: + +- The {{cssxref("opacity")}} property is given a basic transition over `600ms` to create the fade-in/fade-out effect. +- The {{cssxref("content-visibility")}} property (which is toggled between `hidden` and `visible` when the `
` content is expanded/collapsed) is given a `600ms` transition with the {{cssxref("transition-behavior")}} value `allow-discrete` specified. This opts the browser into having a transition started on `content-visibility`, the animation behavior of which is [discrete](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). The effect is that the content is visible for the entire duration of the transition, allowing other transitions to be seen. If this transition was not included, the content would immediately disappear when the `
` content was collapsed — you wouldn't see the smooth fade-out. + ```css details::details-content { opacity: 0; @@ -95,6 +105,8 @@ details[open]::details-content { #### Result +To see the animation, toggle the visibility of the detail contents by clicking on the summary. + {{EmbedLiveSample("Transition_example", "100%", 150)}} ## Specifications diff --git a/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md b/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md index a5e4a7690093561..fa6c1b622e23b4d 100644 --- a/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md +++ b/files/en-us/web/css/reference/values/gradient/conic-gradient/index.md @@ -116,7 +116,7 @@ The conic-gradient syntax is similar to the radial-gradient syntax, but the colo ![color stops along the circumference of a conic gradient and the axis of a radial gradient.](screenshot_2018-11-29_21.09.19.png) -A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a {{cssxref("length")}}, the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/Reference/Values/angle). Units include `deg` for degrees, `grad` for gradients, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. +A conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. Unlike linear and radial gradients, whose color-stops are placed by specifying a {{cssxref("length")}}, the color-stops of a conic gradient are specified with an [angle](/en-US/docs/Web/CSS/Reference/Values/angle). Units include `deg` for degrees, `grad` for gradians, `rad` for radians, and `turn` for turns. There are 360 degrees, 400 gradians, 2π radians, and 1 turn in a circle. Browsers supporting conic gradients also accept percent values, with 100% equaling 360 degrees, but this is not in the specification. Similar to radial gradients, the conic gradient syntax provides for positioning the center of the gradient anywhere within, or even outside, the image. The values for the position are similar to the syntax for 2-value background-position. diff --git a/package-lock.json b/package-lock.json index 46a14192f02f0ad..a3fd7e14acebe29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,8 +34,8 @@ "imagemin-pngquant": "^10.0.0", "imagemin-svgo": "^11.0.1", "is-svg": "^6.1.0", - "lefthook": "^2.0.8", - "markdownlint-cli2": "0.19.1", + "lefthook": "^2.0.9", + "markdownlint-cli2": "0.20.0", "markdownlint-rule-search-replace": "1.2.0", "node-html-parser": "^7.0.1", "parse-diff": "^0.11.1", @@ -1537,6 +1537,19 @@ } } }, + "node_modules/ansi-regex": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", + "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, "node_modules/ansi-styles": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", @@ -2367,19 +2380,6 @@ "node": ">=20" } }, - "node_modules/cliui/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, "node_modules/cliui/node_modules/ansi-styles": { "version": "6.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", @@ -3069,19 +3069,6 @@ "node": ">=20" } }, - "node_modules/cspell/node_modules/ansi-regex": { - "version": "6.2.2", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz", - "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, "node_modules/cspell/node_modules/commander": { "version": "14.0.2", "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.2.tgz", @@ -3212,9 +3199,9 @@ } }, "node_modules/decode-named-character-reference": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz", - "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.2.0.tgz", + "integrity": "sha512-c6fcElNV6ShtZXmsgNgFFV5tVX2PaV4g+MOAkb8eXHvn6sryJBrZa9r0zV6+dtTyoCKxtDy5tyQ5ZwQuidtd+Q==", "dev": true, "license": "MIT", "dependencies": { @@ -6055,9 +6042,9 @@ } }, "node_modules/katex": { - "version": "0.16.21", - "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.21.tgz", - "integrity": "sha512-XvqR7FgOHtWupfMiigNzmh+MgUVmDGU2kXZm899ZkPfcuoPuFxyHmXsgATDpFZDAXCI8tvinaVcDo8PIIJSo4A==", + "version": "0.16.27", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.27.tgz", + "integrity": "sha512-aeQoDkuRWSqQN6nSvVCEFvfXdqo1OQiCmmW1kc9xSdjutPv7BGO7pqY9sQRJpMOGrEdfDgF2TfRXe5eUAD2Waw==", "dev": true, "funding": [ "https://opencollective.com/katex", @@ -6101,9 +6088,9 @@ } }, "node_modules/lefthook": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-2.0.8.tgz", - "integrity": "sha512-FozDCKeSI+m3BP0cvyPgHch+yf7ClS3hDy1JsRUrbNmlyjqBcmlygnRXsZzpH+wHoNnF2fmfhJhkx/7S7IpaVw==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook/-/lefthook-2.0.9.tgz", + "integrity": "sha512-SiHbJzS6QCp9UlYh4QZ2Bu+zSNEIFTASXz03hTNL5G6frZeXH56831DDqcPEy+729eA05po3n9ByJ0cAv4yQdw==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -6111,22 +6098,22 @@ "lefthook": "bin/index.js" }, "optionalDependencies": { - "lefthook-darwin-arm64": "2.0.8", - "lefthook-darwin-x64": "2.0.8", - "lefthook-freebsd-arm64": "2.0.8", - "lefthook-freebsd-x64": "2.0.8", - "lefthook-linux-arm64": "2.0.8", - "lefthook-linux-x64": "2.0.8", - "lefthook-openbsd-arm64": "2.0.8", - "lefthook-openbsd-x64": "2.0.8", - "lefthook-windows-arm64": "2.0.8", - "lefthook-windows-x64": "2.0.8" + "lefthook-darwin-arm64": "2.0.9", + "lefthook-darwin-x64": "2.0.9", + "lefthook-freebsd-arm64": "2.0.9", + "lefthook-freebsd-x64": "2.0.9", + "lefthook-linux-arm64": "2.0.9", + "lefthook-linux-x64": "2.0.9", + "lefthook-openbsd-arm64": "2.0.9", + "lefthook-openbsd-x64": "2.0.9", + "lefthook-windows-arm64": "2.0.9", + "lefthook-windows-x64": "2.0.9" } }, "node_modules/lefthook-darwin-arm64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-darwin-arm64/-/lefthook-darwin-arm64-2.0.8.tgz", - "integrity": "sha512-Nu52qmqhSP+DKKuKYKDkMkPbgvgTZv+ueEo1LVXidTcgxEwvrbe2balcdqdulQTsPfYtm3pCPvv8ikalHrH+Qg==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-darwin-arm64/-/lefthook-darwin-arm64-2.0.9.tgz", + "integrity": "sha512-DRDqDiDWvQ8CAW7c5o90yApxBu5Pe958Ya2OmgTNLKOEw2tSIlz3YPc0AqWlXxp2KkB6RLv0ottLyJFFRmQBtQ==", "cpu": [ "arm64" ], @@ -6138,9 +6125,9 @@ ] }, "node_modules/lefthook-darwin-x64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-2.0.8.tgz", - "integrity": "sha512-EGNBw1vuXzphs/KyDchkglwnYNkKQH3EpptIPXcQCRC3WKiz87PSrwkOxjGtgDg6nLYWru3YUzgcFrIGUXjWPw==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-darwin-x64/-/lefthook-darwin-x64-2.0.9.tgz", + "integrity": "sha512-Onx2QNWjeVbkDRIbfajcj0U73W51xbhalqRj7yT0JMIIzmyVafnEN2KRrd4i0/UnrquyY2mfrQlVjDM1DoMvCg==", "cpu": [ "x64" ], @@ -6152,9 +6139,9 @@ ] }, "node_modules/lefthook-freebsd-arm64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-2.0.8.tgz", - "integrity": "sha512-ZPua6y7y7l/0PpMJhU1ZAt4jl0dC3F+EGlSzy9v0vqzyoixk0HRqsz9nxN7wmJo/5vHhHJBjsE5/sEYS9Z8tsQ==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-freebsd-arm64/-/lefthook-freebsd-arm64-2.0.9.tgz", + "integrity": "sha512-0Ew0kabZkl9uid7sz9DxeFjQSI0oBWwMA8eyeQf4z0FWQ1iMay+TSgV8WOSN0OAiS6QECmrl7J+5/S8z4t2XYQ==", "cpu": [ "arm64" ], @@ -6166,9 +6153,9 @@ ] }, "node_modules/lefthook-freebsd-x64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-2.0.8.tgz", - "integrity": "sha512-ab9M5gCsMeYzOeBoHIOz+zyVSnEZowwV2jn3Am+x625ZNcqU0T3eNf+a7ppopvkQjrehfmO3y5HiMVAkSAs1Vw==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-freebsd-x64/-/lefthook-freebsd-x64-2.0.9.tgz", + "integrity": "sha512-bCqj0+bKzMenYkpJty7ZDGR8+RT/PxoYkt5QqIhxCj1b+DjFyOiMAbMiWr7vRm8tLiYK6ieVr5xsvjYPCXAsdA==", "cpu": [ "x64" ], @@ -6180,9 +6167,9 @@ ] }, "node_modules/lefthook-linux-arm64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-2.0.8.tgz", - "integrity": "sha512-BaoUKmwnAbWssSwVHoA0HyJFX3m+Mp6xJhxD4YAu8H1mo8DNOWBG5J7DGXJRIiBTm6YjAXlerq8Pjfx4lycfYQ==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-linux-arm64/-/lefthook-linux-arm64-2.0.9.tgz", + "integrity": "sha512-jSE+ZIxz++5JkU9vTY0ZCz7VijUvPw9rUXu/ufGq7HYHaxkQlgqGY9p9H9y10Oh1EahWiC3jGlForx5JhHDrCg==", "cpu": [ "arm64" ], @@ -6194,9 +6181,9 @@ ] }, "node_modules/lefthook-linux-x64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-linux-x64/-/lefthook-linux-x64-2.0.8.tgz", - "integrity": "sha512-oNXcoGWsGy/U9gqE6PJpLtiNlGlAgoYtVmfc2gauNPRJehaQBaifD5/5aXPiWhRukUTQ1p9kuShFDpT2jOYn5Q==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-linux-x64/-/lefthook-linux-x64-2.0.9.tgz", + "integrity": "sha512-Xwqew12w+9HiR0bBetTgaRuR9MdHnoe8gnluUSaH/wuGhC9ChEnxRu4ckahll4/Xl75TntlkOZOMDpnYU5YeEQ==", "cpu": [ "x64" ], @@ -6208,9 +6195,9 @@ ] }, "node_modules/lefthook-openbsd-arm64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-2.0.8.tgz", - "integrity": "sha512-pxUgnilqsnDEWF7J5uNViHJ+Q4gSEQbRbrcIEdluBzjW34E20WK4UPk0bxZDQZAeaXTubNQEvyafmfY7dWe4Gg==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-openbsd-arm64/-/lefthook-openbsd-arm64-2.0.9.tgz", + "integrity": "sha512-5ErPjbzu2623TKPM1lOcsjzswYeEA1u1f8qPp1uvR8QgWDJlx4xdbOQErF5OsYSWhqAegxQITmrJgdPBvjWuFg==", "cpu": [ "arm64" ], @@ -6222,9 +6209,9 @@ ] }, "node_modules/lefthook-openbsd-x64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-2.0.8.tgz", - "integrity": "sha512-p50cpkWImLwU330JJuJaioNVT1X/Z56iqPOLEgBt2+1BlljmPe/eGrMArF4iIKfdZ4wFJ9f2h0gq+jyvQGFjSg==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-openbsd-x64/-/lefthook-openbsd-x64-2.0.9.tgz", + "integrity": "sha512-DhFRJZamG3I+nTPTZV0N3N5VmB4FJSbT/oG4JYDqkvxtqwb3zAL6Q/868uVEgdZl9USxu2yRKI7RnKdllDvdzQ==", "cpu": [ "x64" ], @@ -6236,9 +6223,9 @@ ] }, "node_modules/lefthook-windows-arm64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-2.0.8.tgz", - "integrity": "sha512-dStshOCvmg9sQSUmWNiLMLv52HFTVxC9JE2HGxCiHcK5oqVZS2v9cCZdFdiDZ1Xldi3ozLi2y7/Xpzul8Oqv5Q==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-windows-arm64/-/lefthook-windows-arm64-2.0.9.tgz", + "integrity": "sha512-zp3mLv67+NBPuX9YrYk3CArkREoko1txAsEPyiB/NXGH3QgLHw9HbR+IeY1TslGlXvzQTBrJaiNcmsQWLFFvAQ==", "cpu": [ "arm64" ], @@ -6250,9 +6237,9 @@ ] }, "node_modules/lefthook-windows-x64": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-2.0.8.tgz", - "integrity": "sha512-2YgT6feliy6CCDwbkT3pg1ylKD1b9lj+O5NdLsrxvZGRmO6ftXleWB4xfWKGGY8FrzAD2Y3eEVDv5n3NvGHDzw==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/lefthook-windows-x64/-/lefthook-windows-x64-2.0.9.tgz", + "integrity": "sha512-1TMNYvsW4D7MD66CRXkvcVTbNCq93wTH5IjTlSSn5CtJer9PFwBMWZfeFeEBU0c0gGAUq4NmkYN2pS8RZfISvA==", "cpu": [ "x64" ], @@ -6399,9 +6386,9 @@ } }, "node_modules/markdownlint": { - "version": "0.39.0", - "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.39.0.tgz", - "integrity": "sha512-Xt/oY7bAiHwukL1iru2np5LIkhwD19Y7frlsiDILK62v3jucXCD6JXlZlwMG12HZOR+roHIVuJZrfCkOhp6k3g==", + "version": "0.40.0", + "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.40.0.tgz", + "integrity": "sha512-UKybllYNheWac61Ia7T6fzuQNDZimFIpCg2w6hHjgV1Qu0w1TV0LlSgryUGzM0bkKQCBhy2FDhEELB73Kb0kAg==", "dev": true, "license": "MIT", "dependencies": { @@ -6412,7 +6399,8 @@ "micromark-extension-gfm-footnote": "2.1.0", "micromark-extension-gfm-table": "2.1.1", "micromark-extension-math": "3.1.0", - "micromark-util-types": "2.0.2" + "micromark-util-types": "2.0.2", + "string-width": "8.1.0" }, "engines": { "node": ">=20" @@ -6422,9 +6410,9 @@ } }, "node_modules/markdownlint-cli2": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.19.1.tgz", - "integrity": "sha512-p3JTemJJbkiMjXEMiFwgm0v6ym5g8K+b2oDny+6xdl300tUKySxvilJQLSea48C6OaYNmO30kH9KxpiAg5bWJw==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.20.0.tgz", + "integrity": "sha512-esPk+8Qvx/f0bzI7YelUeZp+jCtFOk3KjZ7s9iBQZ6HlymSXoTtWGiIRZP05/9Oy2ehIoIjenVwndxGtxOIJYQ==", "dev": true, "license": "MIT", "peer": true, @@ -6433,7 +6421,7 @@ "js-yaml": "4.1.1", "jsonc-parser": "3.3.1", "markdown-it": "14.1.0", - "markdownlint": "0.39.0", + "markdownlint": "0.40.0", "markdownlint-cli2-formatter-default": "0.0.6", "micromatch": "4.0.8" }, @@ -6496,57 +6484,38 @@ "node": ">=16" } }, - "node_modules/markdownlint/node_modules/micromark-core-commonmark": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz", - "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==", + "node_modules/markdownlint/node_modules/string-width": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.1.0.tgz", + "integrity": "sha512-Kxl3KJGb/gxkaUMOjRsQ8IrXiGW75O4E3RPjFIINOVH8AMl2SQ/yWdTzWwF3FevIX9LcMAjJW+GRwAlAbTSXdg==", "dev": true, - "funding": [ - { - "type": "GitHub Sponsors", - "url": "https://github.com/sponsors/unifiedjs" - }, - { - "type": "OpenCollective", - "url": "https://opencollective.com/unified" - } - ], "license": "MIT", "dependencies": { - "decode-named-character-reference": "^1.0.0", - "devlop": "^1.0.0", - "micromark-factory-destination": "^2.0.0", - "micromark-factory-label": "^2.0.0", - "micromark-factory-space": "^2.0.0", - "micromark-factory-title": "^2.0.0", - "micromark-factory-whitespace": "^2.0.0", - "micromark-util-character": "^2.0.0", - "micromark-util-chunked": "^2.0.0", - "micromark-util-classify-character": "^2.0.0", - "micromark-util-html-tag-name": "^2.0.0", - "micromark-util-normalize-identifier": "^2.0.0", - "micromark-util-resolve-all": "^2.0.0", - "micromark-util-subtokenize": "^2.0.0", - "micromark-util-symbol": "^2.0.0", - "micromark-util-types": "^2.0.0" + "get-east-asian-width": "^1.3.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/markdownlint/node_modules/micromark-util-types": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz", - "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==", + "node_modules/markdownlint/node_modules/strip-ansi": { + "version": "7.1.2", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.2.tgz", + "integrity": "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA==", "dev": true, - "funding": [ - { - "type": "GitHub Sponsors", - "url": "https://github.com/sponsors/unifiedjs" - }, - { - "type": "OpenCollective", - "url": "https://opencollective.com/unified" - } - ], - "license": "MIT" + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.0.1" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } }, "node_modules/math-intrinsics": { "version": "1.1.0", @@ -6646,9 +6615,9 @@ } }, "node_modules/micromark-core-commonmark": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.2.tgz", - "integrity": "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.3.tgz", + "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==", "dev": true, "funding": [ { @@ -7089,9 +7058,9 @@ } }, "node_modules/micromark-util-subtokenize": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.4.tgz", - "integrity": "sha512-N6hXjrin2GTJDe3MVjf5FuXpm12PGm80BrUAeub9XFXca8JZbP+oIwY4LJSVwFUCL1IPm/WwSVUN7goFHmSGGQ==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.1.0.tgz", + "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==", "dev": true, "funding": [ { @@ -7129,9 +7098,9 @@ "license": "MIT" }, "node_modules/micromark-util-types": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.1.tgz", - "integrity": "sha512-534m2WhVTddrcKVepwmVEVnUAmtrx9bfIjNoQHRqfnvdaHQiFytEhJoTgpWJvDEXCO5gLTQh3wYC1PgOJA4NSQ==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.2.tgz", + "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA==", "dev": true, "funding": [ { @@ -9721,19 +9690,6 @@ "node": "^20.19.0 || ^22.12.0 || >=23" } }, - "node_modules/yargs/node_modules/ansi-regex": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", - "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/chalk/ansi-regex?sponsor=1" - } - }, "node_modules/yargs/node_modules/emoji-regex": { "version": "10.4.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.4.0.tgz", diff --git a/package.json b/package.json index 27a4c612b069bb0..9e0175225c24af0 100644 --- a/package.json +++ b/package.json @@ -68,8 +68,8 @@ "imagemin-pngquant": "^10.0.0", "imagemin-svgo": "^11.0.1", "is-svg": "^6.1.0", - "lefthook": "^2.0.8", - "markdownlint-cli2": "0.19.1", + "lefthook": "^2.0.9", + "markdownlint-cli2": "0.20.0", "markdownlint-rule-search-replace": "1.2.0", "node-html-parser": "^7.0.1", "parse-diff": "^0.11.1",