[pull] main from mdn:main

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

@@ -28,6 +28,8 @@ Firefox 143 is the current [Beta version of Firefox](https://www.firefox.com/en-
 
 - The {{cssxref("::details-content")}} pseudo-element is now enabled by default. It lets you style the content of the {{htmlElement("details")}} element.
   ([Firefox bug 1941406](https://bugzil.la/1941406)).
+- Multi-pass grid track sizing is now enabled by default and follows the algorithm outlined in the CSS Grid specification. In the multi-pass algorithm, columns are sized first, then rows; percentage values are resolved after the container size is known. With this default support, [percentage-based](/en-US/docs/Web/CSS/grid-template-rows#percentage) row tracks and grid items with aspect ratios will now be sized correctly in more cases.
+  ([Firefox bug 1957244](https://bugzil.la/1957244)).
 
 <!-- #### Removals -->
 

files/en-us/web/accessibility/aria/reference/roles/tooltip_role/index.md

@@ -76,26 +76,34 @@ The tooltip should appear on focus or when the element is hovered on, without ad
 The tooltip can be instantiated with CSS. Change the class name with JavaScript to a class that hides the tooltip if the user hits the <kbd>Escape</kbd> key.
 
 ```css
-[role="tooltip"],
-.hide-tooltip.hide-tooltip.hide-tooltip + [role="tooltip"] {
+[role="tooltip"] {
   visibility: hidden;
   position: absolute;
   top: 2rem;
   left: 2rem;
   background: black;
   color: white;
+  padding: 0.5rem;
+  border-radius: 0.25rem;
+  /* Give some time before hiding so mouse can exit the input
+  and enter the tooltip */
+  transition: visibility 0.5s;
 }
 [aria-describedby]:hover,
 [aria-describedby]:focus {
   position: relative;
 }
 [aria-describedby]:hover + [role="tooltip"],
-[aria-describedby]:focus + [role="tooltip"] {
+[aria-describedby]:focus + [role="tooltip"],
+[role="tooltip"]:hover,
+[role="tooltip"]:focus {
   visibility: visible;
 }
 ```
 
-The above hides the tooltip with CSS in the default state or if the `hide-tooltip` class has been added with JavaScript (when the user hit <kbd>Escape</kbd>), with high specificity to ensure the tooltip doesn't show. When the owning element receives focus, it gets positioned relatively and the tooltip becomes visible.
+{{EmbedLiveSample("examples", "", 300)}}
+
+The above hides the tooltip with CSS in the default state or if the `hide-tooltip` class has been added with JavaScript (when the user hit <kbd>Escape</kbd>), with high specificity to ensure the tooltip doesn't show. When the owning element receives focus, it gets positioned relatively and the tooltip becomes visible. We keep the tooltip visible when hovering over the tooltip, consistent with [WCAG 1.4.13](#accessibility_concerns). Here, we allow the cursor to move from the input to the tooltip without the latter disappearing by waiting 0.5s in between; there are other ways to achieve this, such as filling the gap with a transparent element that also keeps the tooltip visible when hovered over.
 
 ## Accessibility concerns
 

files/en-us/web/css/css_images/using_css_gradients/index.md

@@ -1064,3 +1064,4 @@ div {
 - [CSS Gradients Patterns Gallery, by Lea Verou](https://projects.verou.me/css3patterns/)
 - [Gradient CSS Generator](https://cssgenerator.org/gradient-css-generator.html)
 - [Advanced CSS Gradient Generator](https://colorbeta.com/)
+- [HDR gradient generator](https://gradient.style/)

files/en-us/web/css/css_paged_media/index.md

@@ -6,30 +6,39 @@ spec-urls: https://drafts.csswg.org/css-page/
 sidebar: cssref
 ---
 
-The **CSS paged media** module defines the properties that control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable areas, style left and right pages differently, and control breaks inside elements.
+The **CSS paged media** module defines the properties that control the presentation of content for print or any other media that splits content into discrete pages. It allows you to set page breaks, control printable areas, and style left and right pages differently.
+
+The CSS paged media module specifies how pages are generated and laid out to hold fragmented content in a paged presentation, including content that is printed or represented as a print preview. The module defines functionality for controlling page margins, size, orientation, and headers and footers. It extends [generated content](/en-US/docs/Web/CSS/CSS_generated_content) to provide functionality for generating page numbers and running headers and footers.
+
+The process of paginating content into generated pages and controlling breaks inside elements is covered in the [CSS fragmentation module](/en-US/docs/Web/CSS/CSS_fragmentation).
 
 ## Reference
 
 ### Properties
 
-- {{cssxref('page')}}
+- {{cssxref("page")}}
 
 ### At-rules
 
-- {{cssxref('@page')}}
-  - {{cssxref('@page/page-orientation', 'page-orientation')}} descriptor
-  - {{cssxref('@page/size', 'size')}} descriptor
+- {{cssxref("@page")}}
+  - {{cssxref("@page/page-orientation", "page-orientation")}} descriptor
+  - {{cssxref("@page/size", "size")}} descriptor
   - [Margin descriptors](/en-US/docs/Web/CSS/margin)
 - [Margin at-rules](/en-US/docs/Web/CSS/@page#margin_at-rules)
 
-The CSS paged media module also introduces the `bleeds` and `marks` `@page` descriptors. Currently, no browsers support these features.
+The CSS paged media module also introduces the `bleeds` and `marks` descriptors of the `@page` at-rule. Currently, no browsers support these features.
 
 ### Pseudo-classes
 
-- {{cssxref(':blank')}}
-- {{cssxref(':first')}}
-- {{cssxref(':left')}}
-- {{cssxref(':right')}}
+- {{cssxref(":blank")}}
+- {{cssxref(":first")}}
+- {{cssxref(":left")}}
+- {{cssxref(":right")}}
+
+## Guides
+
+- [Printing](/en-US/docs/Web/CSS/CSS_media_queries/Printing)
+  - : Tips and techniques for helping improve web content printer output.
 
 ## Related concepts
 
@@ -46,6 +55,5 @@ The CSS paged media module also introduces the `bleeds` and `marks` `@page` desc
 
 ## See also
 
-- [Printing](/en-US/docs/Web/CSS/CSS_media_queries/Printing) guide
 - [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) module
 - [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module

files/en-us/web/css/flex-grow/index.md

@@ -11,7 +11,7 @@ The **`flex-grow`** [CSS](/en-US/docs/Web/CSS) property sets the flex grow facto
 When the flex-container's main size is larger than the combined main sizes of its flex items, this positive free space can be distributed among the flex items, with each item's growth being their growth factor value as a proportion of the sum total of all the flex items' flex grow factors.
 
 > [!NOTE]
-> It is recommended to use the {{cssxref("flex")}} shorthand with a keyword value like `auto` or `initial` instead of setting `flex-basis` on its own. The [keyword values](/en-US/docs/Web/CSS/flex#values) expand to reliable combinations of `flex-grow`, {{cssxref("flex-shrink")}}, and {{cssxref("flex-basis")}}, which help to achieve the commonly desired flex behaviors.
+> It is recommended to use the {{cssxref("flex")}} shorthand with a keyword value like `auto` or `initial` instead of setting `flex-grow` on its own. The [keyword values](/en-US/docs/Web/CSS/flex#values) expand to reliable combinations of `flex-grow`, {{cssxref("flex-shrink")}}, and {{cssxref("flex-basis")}}, which help to achieve the commonly desired flex behaviors.
 
 {{InteractiveExample("CSS Demo: flex-grow")}}
 

files/en-us/web/css/grid-template-columns/index.md

@@ -101,8 +101,8 @@ grid-template-columns: unset;
 - {{cssxref("<length>")}}
   - : A non-negative length, giving the width of the column.
 - {{cssxref("<percentage>")}}
-  - : Is a non-negative {{cssxref("percentage", "<percentage>")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto`.
-    The intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.
+  - : A non-negative {{cssxref("percentage", "<percentage>")}} value relative to the inline size of the grid container. If the size of the grid container depends on the size of its tracks, the browser treats the percentage as `auto`.
+    The browser may adjust the intrinsic size contributions of the track to the size of the grid container and may increase the final size of the track by the minimum amount that would result in honoring the percentage.
 - {{cssxref("<flex>")}}
   - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.
 
@@ -115,14 +115,14 @@ grid-template-columns: unset;
 - {{cssxref("minmax", "minmax(min, max)")}}
   - : Is a functional notation that defines a size range greater than or equal to _min_ and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.
 - `auto`
-  - : As a maximum represents the largest {{cssxref("max-content")}} size of the items in that track.
+  - : As a maximum value, it represents the largest {{cssxref("max-content")}} size of the items in that track.
 
-    As a minimum represents the largest minimum size of items in that track (specified by the {{cssxref("min-width")}}/{{cssxref("min-height")}} of the items). This is often, though not always, the {{cssxref("min-content")}} size.
+    As a minimum value, it represents the largest minimum size of items in that track (specified by the {{cssxref("min-width")}}/{{cssxref("min-height")}} properties of the items). This often corresponds to the {{cssxref("min-content")}} size, but not always.
 
-    If used outside of {{cssxref("minmax", "minmax()")}} notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.
+    If used outside of {{cssxref("minmax", "minmax()")}} notation, `auto` represents the range between the minimum and maximum values described above. In most cases, this behaves similarly to `minmax(min-content,max-content)`.
 
     > [!NOTE]
-    > `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.
+    > `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties. Therefore, by default, an `auto`-sized track will take up any remaining space in the grid container.
 
 - {{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : Represents the formula `max(minimum, min(limit, max-content))`, where _minimum_ represents an `auto` minimum (which is often, but not always, equal to a {{cssxref("min-content")}} minimum), and _limit_ is the track sizing function passed as an argument to fit-content(). This is essentially calculated as the smaller of `minmax(auto, max-content)` and `minmax(auto, limit)`.

files/en-us/web/css/grid-template-rows/index.md

@@ -101,39 +101,39 @@ This property may be specified as:
 ### Values
 
 - `none`
-  - : Is a keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-rows")}} property.
+  - : A keyword meaning that there is no explicit grid. Any rows will be implicitly generated and their size will be determined by the {{cssxref("grid-auto-rows")}} property.
 - `[line-name]`
   - : A [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) specifying a name for the line in that location. The ident may be any valid string other than the reserved words `span` and `auto`. Lines may have multiple names separated by a space inside the square brackets, for example `[line-name-a line-name-b]`.
 - {{cssxref("&lt;length&gt;")}}
-  - : Is a non-negative length.
+  - : A non-negative length.
 - {{cssxref("&lt;percentage&gt;")}}
-  - : Is a non-negative {{cssxref("percentage", "&lt;percentage&gt;")}} value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, then the percentage must be treated as `auto` for the purpose of calculating the intrinsic size of the grid container. It must then be resolved against the resulting grid container size for the purpose of laying out the grid and its items. The intrinsic size contributions of the track may be adjusted to the size of the grid container and may increase the final size of the track by the minimum amount that would result in honoring the percentage.
+  - : A non-negative {{cssxref("percentage", "&lt;percentage&gt;")}} value, relative to the block size of the grid container. If the size of the grid container depends on the size of its tracks, the browser treats the percentage as `auto` for the purpose of calculating the intrinsic size of the grid container. The percentage is then resolved against the resulting grid container size for laying out the grid and its items. The browser may adjust the intrinsic size contributions of the track to the size of the grid container and may increase the final size of the track by the minimum amount that would result in honoring the percentage.
 - {{cssxref("&lt;flex_value&gt;","&lt;flex&gt;")}}
-  - : Is a non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e., `minmax(auto, <flex>)`).
+  - : A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor. When appearing outside a `minmax()` notation, it implies an automatic minimum (i.e., `minmax(auto, <flex>)`).
 - {{cssxref("max-content")}}
-  - : Is a keyword representing the largest maximal content contribution of the grid items occupying the grid track.
+  - : A keyword representing the largest maximal content contribution of the grid items occupying the grid track.
 - {{cssxref("min-content")}}
-  - : Is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.
+  - : A keyword representing the largest minimal content contribution of the grid items occupying the grid track.
 - {{cssxref("minmax", "minmax(min, max)")}}
-  - : Is a functional notation that defines a size range, greater than or equal to _min_, and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.
+  - : A functional notation that defines a size range, greater than or equal to _min_, and less than or equal to _max_. If _max_ is smaller than _min_, then _max_ is ignored and the function is treated as _min_. As a maximum, a `<flex>` value sets the track's flex factor. It is invalid as a minimum.
 - `auto`
-  - : As a maximum represents the largest {{cssxref("max-content")}} size of the items in that track.
+  - : As a maximum value, it represents the largest {{cssxref("max-content")}} size of the items in that track.
 
-    As a minimum represents the largest minimum size of items in that track (specified by the {{cssxref("min-width")}}/{{cssxref("min-height")}} of the items). This is often, though not always, the {{cssxref("min-content")}} size.
+    As a minimum value, it represents the largest minimum size of items in that track (specified by the {{cssxref("min-width")}}/{{cssxref("min-height")}} properties of the items). This often corresponds to the {{cssxref("min-content")}} size, but not always.
 
-    If used outside of {{cssxref("minmax", "minmax()")}} notation, `auto` represents the range between the minimum and maximum described above. This behaves similarly to `minmax(min-content,max-content)` in most cases.
+    If used outside of {{cssxref("minmax", "minmax()")}} notation, `auto` represents the range between the minimum and maximum values described above. In most cases, this behaves similarly to `minmax(min-content,max-content)`.
 
     > [!NOTE]
-    > `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties. Therefore by default, an `auto` sized track will take up any remaining space in the grid container.
+    > `auto` track sizes (and only `auto` track sizes) can be stretched by the {{cssxref("align-content")}} and {{cssxref("justify-content")}} properties. Therefore, by default, an `auto`-sized track will take up any remaining space in the grid container.
 
 - {{cssxref("fit-content_function", "fit-content( [ &lt;length&gt; | &lt;percentage&gt; ] )")}}
   - : Represents the formula `min(max-content, max(auto, argument))`, which is calculated similar to `auto` (i.e., `minmax(auto, max-content)`), except that the track size is clamped at _argument_ if it is greater than the `auto` minimum.
 - {{cssxref("repeat", "repeat( [ &lt;positive-integer&gt; | auto-fill | auto-fit ] , &lt;track-list&gt; )")}}
   - : Represents a repeated fragment of the track list, allowing a large number of rows that exhibit a recurring pattern to be written in a more compact form.
 - [`masonry`](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout)
-  - : The masonry value indicates that this axis should be laid out according to the masonry algorithm.
+  - : Indicates that this axis should be laid out according to the masonry algorithm.
 - [`subgrid`](/en-US/docs/Web/CSS/CSS_grid_layout/Subgrid)
-  - : The `subgrid` value indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.
+  - : Indicates that the grid will adopt the spanned portion of its parent grid in that axis. Rather than being specified explicitly, the sizes of the grid rows/columns will be taken from the parent grid's definition.
 
 ## Formal definition
 

package.json

@@ -63,7 +63,7 @@
   "devDependencies": {
     "cspell": "9.2.1",
     "cspell-group-by-file-reporter": "^1.0.1",
-    "jest": "^30.1.2",
+    "jest": "^30.1.3",
     "lefthook": "^1.12.3",
     "markdownlint-cli2": "0.18.1",
     "markdownlint-rule-search-replace": "1.2.0",