[pull] main from mdn:main

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -348,6 +348,20 @@ The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rul
 - `layout.css.attr.enabled`
   - : Set to `true` to enable.
 
+### `field-sizing` property
+
+The {{cssxref("field-sizing")}} CSS property lets you control the sizing behavior of form control elements. This property has two values: `content` allows elements to adjust in size to fit their content, and `fixed` sets a fixed size on elements. ([Firefox bug 1977176](https://bugzil.la/1977176)).
+
+| Release channel   | Version added | Enabled by default? |
+| ----------------- | ------------- | ------------------- |
+| Nightly           | 151           | Yes                 |
+| Developer Edition | 151           | No                  |
+| Beta              | 151           | No                  |
+| Release           | 151           | No                  |
+
+- `layout.css.field-sizing.enabled`
+  - : Set to `true` to enable.
+
 ### Fix for nested scrollable areas
 
 This implementation has been added in order to fix an issue where scrollable content was unreachable. If a scrollbar is set to `display: none;` or `width: 0;` then the scrollbars of nested scrollable areas would be stacked on top of each other meaning that some of the content may well be unreachable. This does however mean that the `@supports selector(::-webkit-scrollbar)` check will return `true` even though the [`::-webkit-scrollbar`](/en-US/docs/Web/CSS/Reference/Selectors/::-webkit-scrollbar) pseudo-element is not truly supported. ([Firefox bug 1977511](https://bugzil.la/1977511)).

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

@@ -112,6 +112,10 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil
 
   The [`@container`](/en-US/docs/Web/CSS/Reference/At-rules/@container) CSS at-rule [`style()`](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#container_style_queries) queries now supports the _range syntax_. This allows you to check if a container has a valid CSS custom property and compare its value with comparison operators like `>`, `<`, `>=`, and `<=` and apply styles to its children accordingly. ([Firefox bug 2024601](https://bugzil.la/2024601)).
 
+- **`field-sizing` property**: `layout.css.field-sizing.enabled`
+
+  The {{cssxref("field-sizing")}} CSS property lets you control the sizing behavior of form control elements. This property has two values: `content` allows elements to adjust in size to fit their content, and `fixed` sets a fixed size on elements. ([Firefox bug 1977176](https://bugzil.la/1977176)).
+
 - **Fix for nested scrollable areas**: `layout.css.fake-webkit-scrollbar.enabled`
 
   This implementation has been added in order to fix an issue where scrollable content was unreachable. If a scrollbar is set to `display: none;` or `width: 0;` then the scrollbars of nested scrollable areas would be stacked on top of each other meaning that some of the content may well be unreachable. ([Firefox bug 1977511](https://bugzil.la/1977511)).

files/en-us/web/css/reference/properties/field-sizing/index.md

@@ -76,16 +76,20 @@ This example illustrates the effect of `field-sizing: content` on single- and mu
 
 #### HTML
 
-The HTML in this example contains three form fields, each with an associated {{htmlelement("label")}}: two `<input>` elements of types [`text`](/en-US/docs/Web/HTML/Reference/Elements/input/text) and [`email`](/en-US/docs/Web/HTML/Reference/Elements/input/email) and a {{htmlelement("textarea")}} element.
+The HTML in this example contains four form fields, each with an associated {{htmlelement("label")}}: three `<input>` elements of types [`text`](/en-US/docs/Web/HTML/Reference/Elements/input/text), [`email`](/en-US/docs/Web/HTML/Reference/Elements/input/email), and [`tel`](/en-US/docs/Web/HTML/Reference/Elements/input/tel), and a {{htmlelement("textarea")}} element.
 
 ```html
 <div>
   <label for="name">Enter name:</label>
-  <input type="text" id="name" maxlength="50" />
+  <input type="text" id="name" />
 </div>
 <div>
   <label for="email">Enter email:</label>
-  <input type="email" id="email" maxlength="50" placeholder="e.g. a@b.com" />
+  <input type="email" id="email" placeholder="e.g. a@b.com" />
+</div>
+<div>
+  <label for="tel">Enter telephone:</label>
+  <input type="tel" id="tel" maxlength="15" />
 </div>
 <div>
   <label for="comment">Enter comment:</label>
@@ -95,7 +99,8 @@ The HTML in this example contains three form fields, each with an associated {{h
 
 Note the following points about the HTML:
 
-- The first two fields have a [`maxlength`](/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) attribute set, which stops the size of the field from increasing when the character limit is reached.
+- The first two fields have no length restrictions set.
+- The third field (of type `tel`) has a [`maxlength`](/en-US/docs/Web/HTML/Reference/Elements/input#maxlength) attribute set, which stops the size of the field from increasing when the character limit is reached.
 - The `<textarea>` will grow in the inline direction until the edge of the {{cssxref("min-width")}} constraint (set in the CSS code below) is reached, then start to add new lines in the block direction to contain subsequent characters.
 - The `email` input has a placeholder set. This causes the field to render big enough to show the entire placeholder. Once the field is focused and the user starts typing, the field changes size to the `min-width` value. The `text` field, which doesn't have a placeholder, renders initially at `min-width`.
 

package.json

@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@apideck/better-ajv-errors": "^0.3.7",
-    "@mdn/fred": "2.6.1",
+    "@mdn/fred": "2.6.2",
     "@octokit/rest": "^22.0.1",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",