[pull] main from mdn:main

files/en-us/mozilla/firefox/releases/147/index.md

@@ -36,6 +36,8 @@ Firefox 147 is the current [Nightly version of Firefox](https://www.firefox.com/
 
 - 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)).
+- [View transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) are now supported, which provide a mechanism by which different **types** can be specified for active view transitions. CSS can then be used to apply animations to DOM elements when their content updates, depending on the transition type specified. Firefox 147 adds support for single-page app (SPA) view transition types only, not cross-document view transition types.
+  ([Firefox bug 2001878](https://bugzil.la/2001878)).
 
 <!-- #### Removals -->
 

files/en-us/web/api/cssviewtransitionrule/index.md

@@ -0,0 +1,60 @@
+---
+title: CSSViewTransitionRule
+slug: Web/API/CSSViewTransitionRule
+page-type: web-api-interface
+browser-compat: api.CSSViewTransitionRule
+---
+
+{{APIRef("CSSOM")}}
+
+The **`CSSViewTransitionRule`** interface represents a CSS {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
+
+{{InheritanceDiagram}}
+
+## Instance properties
+
+_Inherits properties from its ancestor, {{domxref("CSSRule")}}._
+
+- {{domxref("CSSViewTransitionRule.navigation", "navigation")}} {{readonlyinline}}
+  - : Returns the `@view-transition` at-rule's `navigation` descriptor value.
+- {{domxref("CSSViewTransitionRule.types", "types")}} {{readonlyinline}}
+  - : Returns an array containing the `@view-transition` at-rule's `types` descriptor values.
+
+## Instance methods
+
+_Inherits methods from its ancestor, {{domxref("CSSRule")}}._
+
+## Examples
+
+### Basic usage
+
+A stylesheet includes a {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules), with `navigation` and `types` descriptors set:
+
+```css
+@view-transition {
+  navigation: auto;
+  types: slide, rotate;
+}
+```
+
+In script, we grab a reference to the `@view-transition` at-rule using `document.styleSheets[0].cssRules`, then log the corresponding `CSSViewTransitionRule` object and its `navigation` and `types` properties to the console. The `types` property returns an array containing the values set for the `types` descriptor.
+
+```js
+let myRule = document.styleSheets[0].cssRules;
+console.log(myRule[0]); // a CSSViewTransitionRule representing the @view-transition at-rule
+console.log(myRule[0].navigation); // "auto"
+console.log(myRule[0].types); // ["slide", "rotate"]
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("@view-transition")}}
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/cssviewtransitionrule/navigation/index.md

@@ -0,0 +1,34 @@
+---
+title: "CSSViewTransitionRule: navigation property"
+short-title: navigation
+slug: Web/API/CSSViewTransitionRule/navigation
+page-type: web-api-instance-property
+browser-compat: api.CSSViewTransitionRule.navigation
+---
+
+{{APIRef("CSSOM")}}
+
+The **`navigation`** read-only property of the {{domxref("CSSViewTransitionRule")}} interface returns the associated {{cssxref("@view-transition")}} at-rule's `navigation` descriptor value.
+
+## Value
+
+A string.
+
+If no `navigation` descriptor is set on the `@view-transition` at-rule, the `navigation` property is equal to an empty string.
+
+## Examples
+
+See the main {{domxref("CSSViewTransitionRule")}} page for example usage.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("@view-transition")}}
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/cssviewtransitionrule/types/index.md

@@ -0,0 +1,34 @@
+---
+title: "CSSViewTransitionRule: types property"
+short-title: types
+slug: Web/API/CSSViewTransitionRule/types
+page-type: web-api-instance-property
+browser-compat: api.CSSViewTransitionRule.types
+---
+
+{{APIRef("CSSOM")}}
+
+The **`types`** read-only property of the {{domxref("CSSViewTransitionRule")}} interface returns an array containing the associated {{cssxref("@view-transition")}} at-rule's `types` descriptor values.
+
+## Value
+
+An array of strings.
+
+If no `types` descriptor is set on the `@view-transition` at-rule, the `types` property is equal to an empty array.
+
+## Examples
+
+See the main {{domxref("CSSViewTransitionRule")}} page for example usage.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{cssxref("@view-transition")}}
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)

files/en-us/web/api/document/startviewtransition/index.md

@@ -29,15 +29,17 @@ startViewTransition(options)
     - `update` {{optional_inline}}
       - : The same `updateCallback` function described above. Defaults to `null`.
     - `types` {{optional_inline}}
-      - : An array of strings. These strings act as class names or identifiers for the transition, allowing you to selectively apply CSS styles or run different JavaScript logic based on the type of transition occurring. Defaults to an empty sequence.
+      - : An array of strings representing the types applied to the view transition. [View transition types](/en-US/docs/Web/API/View_Transition_API/Using_types) enable selective application of CSS styles or JavaScript logic based on the type of transition occurring. Defaults to an empty sequence.
 
 ### Return value
 
 A {{domxref("ViewTransition")}} object instance.
 
 ## Examples
 
-### Using a same-document view transition
+See [View transition API > Examples](/en-US/docs/Web/API/View_Transition_API#examples) for a list of full examples.
+
+### Basic usage
 
 In this same-document view transition, we check if the browser supports view transitions.
 If there's no support, we set the background color using a fallback method which is applied immediately.
@@ -114,4 +116,7 @@ Otherwise, the background color is set using a fallback method, without any anim
 - {{domxref("Document.activeViewTransition")}}
 - {{CSSXRef(":active-view-transition")}} pseudo-class
 - {{cssxref(":active-view-transition-type", ":active-view-transition-type()")}} pseudo-class
+- [View Transition API](/en-US/docs/Web/API/View_Transition_API)
+- [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Using)
+- [Using view transition types](/en-US/docs/Web/API/View_Transition_API/Using_types)
 - [Smooth transitions with the View Transition API](https://developer.chrome.com/docs/web-platform/view-transitions/)

files/en-us/web/api/view_transition_api/index.md

@@ -5,7 +5,9 @@ page-type: web-api-overview
 browser-compat:
   - api.Document.startViewTransition
   - css.at-rules.view-transition
-spec-urls: https://drafts.csswg.org/css-view-transitions/
+spec-urls:
+  - https://drafts.csswg.org/css-view-transitions-2/
+  - https://drafts.csswg.org/css-view-transitions/
 ---
 
 {{DefaultAPISidebar("View Transition API")}}
@@ -34,8 +36,12 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin
 
 ## Interfaces
 
+- {{domxref("CSSViewTransitionRule")}}
+  - : Represents a {{cssxref("@view-transition")}} [at-rule](/en-US/docs/Web/CSS/Guides/Syntax/At-rules).
 - {{domxref("ViewTransition")}}
   - : Represents a view transition, and provides functionality to react to the transition reaching different states (e.g., ready to run the animation, or animation finished) or skip the transition altogether.
+- {{domxref("ViewTransitionTypeSet")}}
+  - : A [set-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) representing the types of an active view transition, which enables the types to be queried or modified on-the-fly during a transition.
 
 ## Extensions to other interfaces
 
@@ -74,7 +80,7 @@ See [Using the View Transition API](/en-US/docs/Web/API/View_Transition_API/Usin
 - {{cssxref(":active-view-transition")}}
   - : Matches elements when a view transition is in progress.
 - {{cssxref(":active-view-transition-type()")}}
-  - : Matches elements when a view transition of a specific type is in progress.
+  - : Matches elements when a view transition with one or more specific types is in progress.
 
 ### Pseudo-elements