@webref/css 6.20.9 → 6.21.0

package/css-anchor-position.json

@@ -57,14 +57,14 @@
         },
         {
           "name": "all",
-          "prose": "Specifies that all anchor names defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match anchor names to anchor elements within this subtree.",
+          "prose": "Specifies that all anchor names defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match anchor names to anchor elements within this subtree. This value only affects anchor names in the same tree scope, as if it were a tree-scoped name. (That is, anchor-scope: all acts identically to anchor-scope: --foo, --bar, ..., listing all relevant anchor names.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-scope-all",
           "type": "value",
           "value": "all"
         },
         {
           "name": "<dashed-ident>",
-          "prose": "Specifies that a matching anchor name defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match these anchor names to anchor elements within this subtree.",
+          "prose": "Specifies that a matching anchor name defined by this element or its descendants—​whose scope is not already limited by a descendant using anchor-scope—​to be in scope only for this element’s descendants; and limits descendants to only match these anchor names to anchor elements within this subtree. The <dashed-ident> is a tree-scoped name.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-anchor-scope-dashed-ident",
           "type": "value",
           "value": "<dashed-ident>"
@@ -115,7 +115,7 @@
       "appliesTo": "positioned boxes with a default anchor box",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "as specified",
+      "computedValue": "the keyword none or a pair of keywords, see § 3.1.3 Computed Value and Serialization of <position-area>",
       "canonicalOrder": "per grammar",
       "animationType": "TBD",
       "values": [
@@ -128,7 +128,7 @@
         },
         {
           "name": "<position-area>",
-          "prose": "If the box does not have a default anchor box, or is not an absolutely positioned box, this value has no effect. Otherwise, it has the following effects: The property selects a region of the position-area grid, and makes that the box’s containing block. See § 3.1.1 Resolving <position-area>s for details. Note: This means that the inset properties specify offsets from the position-area, and some property values, like max-height: 100%, will be relative to the position-area as well. The normal value for the self-alignment properties behaves as either start, end, or anchor-center, depending on the positioning of the region, to give a good default alignment for the positioned box. Again, see § 3.1.1 Resolving <position-area>s for details. Any auto inset properties resolve to 0. The box is not considered to be in a legacy alignment mode in either axis.",
+          "prose": "If the box does not have a default anchor box, or is not an absolutely positioned box, this value has no effect. Otherwise, selects a region of the position-area grid, and makes that the box’s containing block.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-position-area",
           "type": "value",
           "value": "<position-area>"
@@ -139,34 +139,6 @@
         "positionArea"
       ]
     },
-    {
-      "name": "top",
-      "newValues": "<anchor()> | <anchor-size()>",
-      "styleDeclaration": [
-        "top"
-      ]
-    },
-    {
-      "name": "left",
-      "newValues": "<anchor()> | <anchor-size()>",
-      "styleDeclaration": [
-        "left"
-      ]
-    },
-    {
-      "name": "right",
-      "newValues": "<anchor()> | <anchor-size()>",
-      "styleDeclaration": [
-        "right"
-      ]
-    },
-    {
-      "name": "bottom",
-      "newValues": "<anchor()> | <anchor-size()>",
-      "styleDeclaration": [
-        "bottom"
-      ]
-    },
     {
       "name": "justify-self",
       "newValues": "anchor-center",
@@ -235,6 +207,34 @@
         "alignItems"
       ]
     },
+    {
+      "name": "top",
+      "newValues": "<anchor()> | <anchor-size()>",
+      "styleDeclaration": [
+        "top"
+      ]
+    },
+    {
+      "name": "left",
+      "newValues": "<anchor()> | <anchor-size()>",
+      "styleDeclaration": [
+        "left"
+      ]
+    },
+    {
+      "name": "right",
+      "newValues": "<anchor()> | <anchor-size()>",
+      "styleDeclaration": [
+        "right"
+      ]
+    },
+    {
+      "name": "bottom",
+      "newValues": "<anchor()> | <anchor-size()>",
+      "styleDeclaration": [
+        "bottom"
+      ]
+    },
     {
       "name": "position-visibility",
       "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-position-visibility",
@@ -256,21 +256,21 @@
         },
         {
           "name": "anchors-valid",
-          "prose": "If any of the box’s required anchor references do not resolve to a target anchor element, the box is strongly hidden. What is a required anchor reference? anchor() functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here. Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow?",
+          "prose": "If any of the box’s required anchor references do not resolve to a target anchor element, the box’s visibility property computes to force-hidden. What is a required anchor reference? anchor() functions that don’t have a fallback value; the default anchor *sometimes*? Need more detail here. Any anchors are missing, or all anchors are missing? I can see use-cases for either, potentially. Do we want to make a decision here, or make it controllable somehow?",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-visibility-anchors-valid",
           "type": "value",
           "value": "anchors-valid"
         },
         {
           "name": "anchors-visible",
-          "prose": "If the box has a default anchor box but that anchor box is clipped by intervening boxes, this box is also strongly hidden.",
+          "prose": "If the box has a default anchor box but that anchor box is invisible or clipped by intervening boxes, the box’s visibility property computes to force-hidden.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-visibility-anchors-visible",
           "type": "value",
           "value": "anchors-visible"
         },
         {
           "name": "no-overflow",
-          "prose": "If the box overflows its inset-modified containing block even after applying position-try, then the box is strongly hidden.",
+          "prose": "If the box overflows its inset-modified containing block even after applying position-try, the box’s visibility property computes to force-hidden.",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-visibility-no-overflow",
           "type": "value",
           "value": "no-overflow"
@@ -652,18 +652,18 @@
           "value": "block-end"
         },
         {
-          "name": "block-self-start",
+          "name": "self-block-start",
           "prose": "The single corresponding row or column, depending on which axis this keyword is specifying. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the box’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The self-* logical keywords (self-start, x-self-end, etc) are identical, but refer to the box’s own writing mode.",
-          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-block-self-start",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-self-block-start",
           "type": "value",
-          "value": "block-self-start"
+          "value": "self-block-start"
         },
         {
-          "name": "block-self-end",
+          "name": "self-block-end",
           "prose": "The single corresponding row or column, depending on which axis this keyword is specifying. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the box’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The self-* logical keywords (self-start, x-self-end, etc) are identical, but refer to the box’s own writing mode.",
-          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-block-self-end",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-self-block-end",
           "type": "value",
-          "value": "block-self-end"
+          "value": "self-block-end"
         },
         {
           "name": "inline-start",
@@ -680,18 +680,18 @@
           "value": "inline-end"
         },
         {
-          "name": "inline-self-start",
+          "name": "self-inline-start",
           "prose": "The single corresponding row or column, depending on which axis this keyword is specifying. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the box’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The self-* logical keywords (self-start, x-self-end, etc) are identical, but refer to the box’s own writing mode.",
-          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-inline-self-start",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-self-inline-start",
           "type": "value",
-          "value": "inline-self-start"
+          "value": "self-inline-start"
         },
         {
-          "name": "inline-self-end",
+          "name": "self-inline-end",
           "prose": "The single corresponding row or column, depending on which axis this keyword is specifying. Like in anchor(), the plain logical keywords (start, end, etc) refer to the writing mode of the box’s containing block. The x-start/etc determine their direction in the same way, but in the specified physical axis. The self-* logical keywords (self-start, x-self-end, etc) are identical, but refer to the box’s own writing mode.",
-          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-inline-self-end",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-self-inline-end",
           "type": "value",
-          "value": "inline-self-end"
+          "value": "self-inline-end"
         },
         {
           "name": "center",
@@ -702,88 +702,158 @@
         },
         {
           "name": "span-start",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-start",
           "type": "value",
           "value": "span-start"
         },
         {
           "name": "span-end",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-end",
           "type": "value",
           "value": "span-end"
         },
+        {
+          "name": "span-self-start",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-start",
+          "type": "value",
+          "value": "span-self-start"
+        },
+        {
+          "name": "span-self-end",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-end",
+          "type": "value",
+          "value": "span-self-end"
+        },
         {
           "name": "span-top",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-top",
           "type": "value",
           "value": "span-top"
         },
         {
           "name": "span-bottom",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-bottom",
           "type": "value",
           "value": "span-bottom"
         },
         {
           "name": "span-y-start",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-y-start",
           "type": "value",
           "value": "span-y-start"
         },
         {
           "name": "span-y-end",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-y-end",
           "type": "value",
           "value": "span-y-end"
         },
+        {
+          "name": "span-y-self-start",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-y-self-start",
+          "type": "value",
+          "value": "span-y-self-start"
+        },
+        {
+          "name": "span-y-self-end",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-y-self-end",
+          "type": "value",
+          "value": "span-y-self-end"
+        },
         {
           "name": "span-x-start",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-x-start",
           "type": "value",
           "value": "span-x-start"
         },
         {
           "name": "span-x-end",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-x-end",
           "type": "value",
           "value": "span-x-end"
         },
+        {
+          "name": "span-x-self-start",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-x-self-start",
+          "type": "value",
+          "value": "span-x-self-start"
+        },
+        {
+          "name": "span-x-self-end",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-x-self-end",
+          "type": "value",
+          "value": "span-x-self-end"
+        },
         {
           "name": "span-block-start",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-block-start",
           "type": "value",
           "value": "span-block-start"
         },
         {
           "name": "span-block-end",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-block-end",
           "type": "value",
           "value": "span-block-end"
         },
+        {
+          "name": "span-self-block-start",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-block-start",
+          "type": "value",
+          "value": "span-self-block-start"
+        },
+        {
+          "name": "span-self-block-end",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-block-end",
+          "type": "value",
+          "value": "span-self-block-end"
+        },
         {
           "name": "span-inline-start",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-inline-start",
           "type": "value",
           "value": "span-inline-start"
         },
         {
           "name": "span-inline-end",
-          "prose": "Two rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
           "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-inline-end",
           "type": "value",
           "value": "span-inline-end"
         },
+        {
+          "name": "span-self-inline-start",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-inline-start",
+          "type": "value",
+          "value": "span-self-inline-start"
+        },
+        {
+          "name": "span-self-inline-end",
+          "prose": "Two adjacent rows or columns, depending on which axis this keyword is specifying: the center row/column, and the row/column corresponding to the other half of the keyword as per the single-track keywords. (For example, span-top spans the first two rows—​the center row and the top row.)",
+          "href": "https://drafts.csswg.org/css-anchor-position-1/#valdef-position-area-span-self-inline-end",
+          "type": "value",
+          "value": "span-self-inline-end"
+        },
         {
           "name": "span-all",
           "prose": "All three rows or columns, depending on which axis this keyword is specifying.",
@@ -795,7 +865,7 @@
     },
     {
       "name": "anchor()",
-      "prose": "An absolutely positioned box can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor boxes. The anchor() function resolves to a <length>. It is only valid to be used in the inset properties.",
+      "prose": "An absolutely positioned box can use the anchor() function as a value in its inset properties to refer to the position of one or more anchor boxes. The anchor() function resolves to a <length>. It is only allowed in the inset properties (and is otherwise invalid).",
       "href": "https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor",
       "type": "function",
       "value": "anchor( <anchor-name>? && <anchor-side>, <length-percentage>? )",
@@ -907,7 +977,7 @@
     },
     {
       "name": "anchor-size()",
-      "prose": "An absolutely positioned box can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor boxes. The anchor-size() function resolves to a <length>. It is only valid to be used in the accepted @position-try properties.",
+      "prose": "An absolutely positioned box can use the anchor-size() function in its sizing properties to refer to the size of one or more anchor boxes. The anchor-size() function resolves to a <length>. It is only allowed in the accepted @position-try properties (and is otherwise invalid).",
       "href": "https://drafts.csswg.org/css-anchor-position-1/#funcdef-anchor-size",
       "type": "function",
       "value": "anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )",

package/css-borders.json

@@ -1574,46 +1574,46 @@
       "name": "<corner-shape-value>",
       "href": "https://drafts.csswg.org/css-borders-4/#typedef-corner-shape-value",
       "type": "type",
-      "value": "round | scoop | bevel | notch | straight | squircle | superellipse(<number [0,∞]> | infinity)",
+      "value": "round | scoop | bevel | notch | square | squircle | superellipse(<number [-∞,∞]> | infinity | -infinity)",
       "values": [
         {
           "name": "round",
-          "prose": "Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(2).",
+          "prose": "Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(1).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-round",
           "type": "value",
           "value": "round"
         },
         {
           "name": "scoop",
-          "prose": "Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(0.5).",
+          "prose": "Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(-1).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-scoop",
           "type": "value",
           "value": "scoop"
         },
         {
           "name": "bevel",
-          "prose": "Border radii define a diagonal slice at the corner. Equivalent to superellipse(1).",
+          "prose": "Border radii define a diagonal slice at the corner. Equivalent to superellipse(0).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-bevel",
           "type": "value",
           "value": "bevel"
         },
         {
           "name": "notch",
-          "prose": "Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(0).",
+          "prose": "Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(-infinity).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-notch",
           "type": "value",
           "value": "notch"
         },
         {
-          "name": "straight",
+          "name": "square",
           "prose": "Border radii define a convex 90deg angle at the corner. This would have the same visual effect as a border-radius of 0. This is different from having a border-radius of 0 when animating. Equivalent to superellipse(infinity).",
-          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-straight",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-square",
           "type": "value",
-          "value": "straight"
+          "value": "square"
         },
         {
           "name": "squircle",
-          "prose": "Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(4).",
+          "prose": "Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(2).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-squircle",
           "type": "value",
           "value": "squircle"
@@ -1622,7 +1622,7 @@
     },
     {
       "name": "superellipse()",
-      "value": "superellipse( <number> | infinity )",
+      "value": "superellipse( <number> | infinity | -infinity )",
       "href": "https://drafts.csswg.org/css-borders-4/#funcdef-superellipse",
       "type": "function"
     },

package/css-color-hdr.json

@@ -7,7 +7,7 @@
     {
       "name": "dynamic-range-limit",
       "href": "https://drafts.csswg.org/css-color-hdr-1/#propdef-dynamic-range-limit",
-      "value": "standard | no-limit | constrained-high | <dynamic-range-limit-mix()>",
+      "value": "standard | no-limit | constrained | <dynamic-range-limit-mix()>",
       "initial": "no-limit",
       "appliesTo": "all elements",
       "inherited": "yes",
@@ -31,11 +31,11 @@
           "value": "no-limit"
         },
         {
-          "name": "constrained-high",
+          "name": "constrained",
           "prose": "The highest peak luminance that is displayed is somewhat greater than HDR reference white, i.e. the CSS color white, such that a mix of SDR and HDR content can be comfortably viewed together.",
-          "href": "https://drafts.csswg.org/css-color-hdr-1/#valdef-dynamic-range-limit-constrained-high",
+          "href": "https://drafts.csswg.org/css-color-hdr-1/#valdef-dynamic-range-limit-constrained",
           "type": "value",
-          "value": "constrained-high"
+          "value": "constrained"
         }
       ],
       "styleDeclaration": [

package/css-display.json

@@ -147,7 +147,7 @@
     {
       "name": "visibility",
       "href": "https://drafts.csswg.org/css-display-4/#propdef-visibility",
-      "value": "visible | hidden | collapse",
+      "value": "visible | hidden | force-hidden | collapse",
       "initial": "visible",
       "appliesTo": "all elements",
       "inherited": "yes",
@@ -171,6 +171,13 @@
           "type": "value",
           "value": "hidden"
         },
+        {
+          "name": "force-hidden",
+          "prose": "Any boxes generated by the element and its descendants are invisible (regardless of their visibility value).",
+          "href": "https://drafts.csswg.org/css-display-4/#valdef-visibility-force-hidden",
+          "type": "value",
+          "value": "force-hidden"
+        },
         {
           "name": "collapse",
           "prose": "Indicates that the box is collapsed, which can cause it to take up less space than otherwise in a formatting-context–specific way. See dynamic row and column effects in tables [CSS2] and collapsed flex items in flex layout [CSS-FLEXBOX-1]. In all other cases, however, (i.e. unless otherwise specified) this simply makes the box invisible, just like hidden.",

package/css-env.json

@@ -96,6 +96,12 @@
           "href": "https://drafts.csswg.org/css-env-1/#valdef-env-viewport-segment-right",
           "type": "value",
           "value": "viewport-segment-right"
+        },
+        {
+          "name": "preferred-text-scale",
+          "href": "https://drafts.csswg.org/css-env-1/#valdef-env-preferred-text-scale",
+          "type": "value",
+          "value": "preferred-text-scale"
         }
       ]
     }

package/css-masking.json

@@ -446,7 +446,7 @@
       "percentages": "refer to size of the mask border image",
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
-      "animationType": "discrete",
+      "animationType": "by computed value",
       "media": "visual",
       "values": [
         {
@@ -472,7 +472,7 @@
       "percentages": "relative to width/height of the mask border image area",
       "computedValue": "all <length>s made absolute, otherwise as specified",
       "canonicalOrder": "per grammar",
-      "animationType": "discrete",
+      "animationType": "by computed value",
       "media": "visual",
       "styleDeclaration": [
         "mask-border-width",
@@ -489,7 +489,7 @@
       "percentages": "n/a",
       "computedValue": "all <length>s made absolute, otherwise as specified",
       "canonicalOrder": "per grammar",
-      "animationType": "discrete",
+      "animationType": "by computed value",
       "media": "visual",
       "styleDeclaration": [
         "mask-border-outset",

package/css-mixins.json

@@ -44,7 +44,7 @@
     },
     {
       "name": "<dashed-function>",
-      "prose": "A <dashed-function> is a functional notation whose function name starts with two dashes (U+002D HYPHEN-MINUS). Its syntax is:",
+      "prose": "A <dashed-function> is a functional notation whose function name starts with two dashes (U+002D HYPHEN-MINUS). Its argument grammar is:",
       "href": "https://drafts.csswg.org/css-mixins-1/#typedef-dashed-function",
       "type": "type"
     }

package/css-overflow-5.json

@@ -25,14 +25,14 @@
         },
         {
           "name": "before",
-          "prose": "The scroll container generates a ::scroll-marker-group pseudo-element whose box is an immediate preceding sibling to its originating element.",
+          "prose": "The scroll container generates a ::scroll-marker-group pseudo-element. When originating from the root element, the generated pseudo-element’s box is the first child of the originating element. Otherwise, its box is an immediate preceding sibling to its originating element.",
           "href": "https://drafts.csswg.org/css-overflow-5/#valdef-scroll-marker-group-before",
           "type": "value",
           "value": "before"
         },
         {
           "name": "after",
-          "prose": "The scroll container generates a ::scroll-marker-group pseudo-element whose box is an immediate following sibling to its originating element.",
+          "prose": "The scroll container generates a ::scroll-marker-group pseudo-element. When originating from the root element, the generated pseudo-element’s box is the last child of the originating element. Otherwise, its box is an immediate following sibling to its originating element.",
           "href": "https://drafts.csswg.org/css-overflow-5/#valdef-scroll-marker-group-after",
           "type": "value",
           "value": "after"

package/css-values-5.json

@@ -332,36 +332,21 @@
       "name": "progress()",
       "prose": "The progress() functional notation returns a <number> value representing the position of one calculation (the progress value) between two other calculations (the progress start value and progress end value). progress() is a math function.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-progress",
-      "type": "function"
-    },
-    {
-      "name": "<progress()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-progress-fn",
-      "type": "type",
+      "type": "function",
       "value": "progress(<calc-sum>, <calc-sum>, <calc-sum>)"
     },
     {
       "name": "media-progress()",
       "prose": "Similar to the progress() notation, the media-progress() functional notation returns a <number> value representing current value of the specified media query [MEDIAQUERIES-4] as a progress value between two explicit values of the media query (as the progress start value and progress end value).",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-media-progress",
-      "type": "function"
-    },
-    {
-      "name": "<media-progress()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-media-progress",
-      "type": "type",
+      "type": "function",
       "value": "media-progress(<mf-name>, <calc-sum>, <calc-sum>)"
     },
     {
       "name": "container-progress()",
       "prose": "The container-progress() functional notation is identical to the media-progress() functional notation, except that it accepts container features [CSS-CONTAIN-3] in place of media features.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-container-progress",
-      "type": "function"
-    },
-    {
-      "name": "<container-progress()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-container-progress",
-      "type": "type",
+      "type": "function",
       "value": "container-progress(<mf-name> [ of <container-name> ]?, <calc-sum>, <calc-sum>)"
     },
     {
@@ -405,48 +390,28 @@
       "name": "calc-mix()",
       "prose": "The calc-mix() mix notation represents an interpolated numeric or dimensional value. Like calc(), it is a math function, with the following syntactic form:",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-calc-mix",
-      "type": "function"
-    },
-    {
-      "name": "<calc-mix()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-calc-mix",
-      "type": "type",
+      "type": "function",
       "value": "calc-mix( <progress>, <calc-sum>, <calc-sum> )"
     },
     {
       "name": "transform-mix()",
       "prose": "The transform-mix() mix notation represents an interpolated <transform-list>, with the following syntactic form:",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-transform-mix",
-      "type": "function"
-    },
-    {
-      "name": "<transform-mix()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-transform-mix",
-      "type": "type",
+      "type": "function",
       "value": "transform-mix( <progress>, <transform-list>, <transform-list> )"
     },
     {
       "name": "mix()",
       "prose": "Interpolation of any two property values can be represented by the mix() mix notation, which supports two alternative syntax patterns:",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-mix",
-      "type": "function"
-    },
-    {
-      "name": "<mix()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-mix",
-      "type": "type",
+      "type": "function",
       "value": "mix( <progress> , <whole-value> , <whole-value> ) | mix( <progress> && of <keyframes-name> )"
     },
     {
       "name": "first-valid()",
       "prose": "The first-valid() functional notation inlines the fallback behavior intrinsic to parsing declarations. Unlike most notations, it can accept any valid or invalid syntax in its arguments, and represents the first value among its arguments that is supported (parsed as valid) by the UA as the whole value of the property it’s used in.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-first-valid",
-      "type": "function"
-    },
-    {
-      "name": "<first-valid()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-first-valid",
-      "type": "type",
+      "type": "function",
       "value": "first-valid( <declaration-value># )"
     },
     {
@@ -454,6 +419,7 @@
       "prose": "The if() function is an arbitrary substitution function that represents conditional values. Its argument consists of an ordered semi-colon–separated list of statements, each consisting of a condition followed by a colon followed by a value. An if() function represents the value corresponding to the first condition in its argument list to be true; if no condition matches, then the if() function represents an empty token stream.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-if",
       "type": "function",
+      "value": "if( [ <if-branch> ; ]* <if-branch> ;? )",
       "values": [
         {
           "name": "else",
@@ -464,12 +430,6 @@
         }
       ]
     },
-    {
-      "name": "<if()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-if",
-      "type": "type",
-      "value": "if( [ <if-branch> ; ]* <if-branch> ;? )"
-    },
     {
       "name": "<if-branch>",
       "href": "https://drafts.csswg.org/css-values-5/#typedef-if-branch",
@@ -504,24 +464,14 @@
       "name": "toggle()",
       "prose": "The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-toggle",
-      "type": "function"
-    },
-    {
-      "name": "<toggle()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-toggle",
-      "type": "type",
+      "type": "function",
       "value": "toggle( <whole-value># )"
     },
     {
       "name": "inherit()",
       "prose": "Like the inherit keyword, the inherit() functional notation resolves to the computed value of a property on the parent. Rather than resolving to the value of the same property, however, it resolves to a sequence of component values representing the computed value of the property specified as its first argument. Its second argument, if present, is used as a fallback in case the first argument resolves to the guaranteed-invalid value.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-inherit",
-      "type": "function"
-    },
-    {
-      "name": "<inherit()>",
-      "href": "https://drafts.csswg.org/css-values-5/#typedef-inherit",
-      "type": "type",
+      "type": "function",
       "value": "inherit( <custom-property-name>, <declaration-value>? )"
     },
     {
@@ -646,7 +596,7 @@
     },
     {
       "name": "sibling-index()",
-      "prose": "The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among the children of its parent. Like :nth-child(), sibling-index() is 1-indexed.",
+      "prose": "The sibling-index() functional notation represents, as an <integer>, the index of the element on which the notation is used among its inclusive siblings. Like :nth-child(), sibling-index() is 1-indexed.",
       "href": "https://drafts.csswg.org/css-values-5/#funcdef-sibling-index",
       "type": "function"
     },

package/css-variables.json

@@ -18,6 +18,12 @@
       "href": "https://drafts.csswg.org/css-variables-2/#funcdef-var",
       "type": "function",
       "value": "var( <custom-property-name> , <declaration-value>? )"
+    },
+    {
+      "name": "<var-args>",
+      "href": "https://drafts.csswg.org/css-variables-2/#typedef-var-args",
+      "type": "type",
+      "value": "var( <declaration-value> , <declaration-value>? )"
     }
   ]
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "6.20.9",
+  "version": "6.21.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"