@webref/css 6.1.0 → 6.1.1

package/css-align.json

@@ -199,8 +199,9 @@
         },
         {
           "name": "legacy",
-          "value": "legacy",
-          "type": "value"
+          "prose": "This keyword causes the value to effectively inherit into descendants. If the legacy keyword appears on its own (without an accompanying left, right, or center keyword): if the inherited value of justify-items includes the legacy keyword, this value computes to the inherited value; otherwise it computes to normal. When justify-self:auto references the value of justify-items, only the alignment keyword, not the legacy keyword, is referenced by it. It exists to implement the legacy alignment behavior of HTML’s <center> element and align attribute.",
+          "type": "value",
+          "value": "legacy"
         }
       ],
       "styleDeclaration": [

package/css-animations-2.json

@@ -50,22 +50,23 @@
       "values": [
         {
           "name": "auto",
-          "value": "auto",
-          "type": "value"
+          "prose": "The animation’s timeline is a DocumentTimeline, more specifically the default document timeline.",
+          "type": "value",
+          "value": "auto"
         },
         {
           "name": "none",
           "prose": "The animation is not associated with a timeline.",
           "type": "value",
           "value": "none"
+        },
+        {
+          "name": "<timeline-name>",
+          "value": "<custom-ident> | <string>",
+          "type": "value"
         }
       ]
     },
-    {
-      "name": "<timeline-name>",
-      "value": "<custom-ident> | <string>",
-      "type": "type"
-    },
     {
       "name": "<single-animation>",
       "value": "<time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ] || <single-animation-timeline>",

package/css-fonts.json

@@ -158,7 +158,7 @@
           "value": "italic"
         },
         {
-          "name": "oblique <angle [−90deg,90deg]>?",
+          "name": "oblique <angle [-90deg,90deg]>?",
           "prose": "Controls matching against an oblique face. Positive angles represent a clockwise slant; negative angles represent a counter-clockwise slant. The lack of an <angle> represents 14deg. (Note that a font might internally provide its own mapping for \"oblique\", but the mapping within the font is disregarded.) Fractional and negative values are accepted; however, values less than -90deg or values greater than 90deg are invalid. If no oblique faces exist, and font-synthesis-style has the value auto, a synthetic oblique face will be generated.",
           "type": "value",
           "value": "oblique <angle [-90deg,90deg]>?"
@@ -227,8 +227,9 @@
         },
         {
           "name": "<number [0,∞]>",
-          "value": "<number [0,∞]>",
-          "type": "value"
+          "prose": "Specifies the aspect value used in the calculation below to calculate the adjusted font size: c = ( a / a' ) s where: s = font-size value a = aspect value as specified by the 'font-size-adjust' property a' = aspect value of actual font c = adjusted font-size to use Negative values are invalid. This value applies to any font that is selected but in typical usage it should be based on the aspect value of the first font in the font-family list. If this is specified accurately, the (a/a') term in the formula above is effectively 1 for the first font and no adjustment occurs. If the value is specified inaccurately, text rendered using the first font in the family list will display differently in older user agents that don’t support font-size-adjust.",
+          "type": "value",
+          "value": "<number [0,∞]>"
         }
       ],
       "styleDeclaration": [

package/css-gcpm-4.json

@@ -23,8 +23,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": ":nth-of-page(n)",
-      "prose": "The element is the nth matched element on the page."
+      "name": ":nth-of-page()",
+      "value": ":nth-of-page(n)"
     },
     {
       "name": ":first-of-page",

package/css-grid.json

@@ -344,7 +344,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -392,7 +392,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -440,7 +440,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"
@@ -488,7 +488,7 @@
               "value": "<custom-ident>"
             },
             {
-              "name": "[ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>?",
+              "name": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?",
               "prose": "Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position. An <integer> value of zero makes the declaration invalid.",
               "type": "value",
               "value": "[ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>?"

package/css-highlight-api.json

@@ -7,8 +7,8 @@
   "atrules": [],
   "selectors": [
     {
-      "name": "::highlight(<custom-highlight-name>)",
-      "prose": "The ::highlight(<custom-highlight-name>) pseudo-element (also known as the custom highlight pseudo-element) represents the portion of a document that is being contained or partially contained in all the ranges of the registered custom highlight with the custom highlight name <custom-highlight-name>, if any. <custom-highlight-name> must be a valid CSS <ident-token>."
+      "name": "::highlight()",
+      "value": "::highlight(<custom-highlight-name>)"
     }
   ],
   "values": [

package/css-images.json

@@ -114,7 +114,7 @@
       "values": [
         {
           "name": "auto",
-          "prose": "The scaling algorithm is UA dependent.",
+          "prose": "The scaling algorithm is UA-dependent.",
           "type": "value",
           "value": "auto"
         },
@@ -138,15 +138,9 @@
         },
         {
           "name": "crisp-edges",
-          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
+          "prose": "The image is scaled in a way that preserves contrast and edges, and which does not smooth colors or introduce blur to the image in the process. The image may be scaled using nearest neighbor, but may instead be scaled with a UA-defined algorithm. The only requirement is that the algorithm must not blur edges or blend colors from the source image; but it can, for example, intelligently detect diagonal or curved lines and render them as such rather than as jagged-looking \"giant pixels\".",
           "type": "value",
           "value": "crisp-edges"
-        },
-        {
-          "name": "nearest neighbor",
-          "prose": "The image must be scaled with the nearest neighbor algorithm: treating the original image’s pixel grid as a literal grid of rectangles, scale those to the desired size, then each pixel of the final image takes its color solely from the nearest pixel of the scaled original image.",
-          "type": "value",
-          "value": "nearest neighbor"
         }
       ],
       "styleDeclaration": [
@@ -183,7 +177,7 @@
       "name": "radial-gradient()",
       "prose": "The radial-gradient() notation specifies a radial gradient by indicating the center of the gradient (where the 0% ellipse will be) and the size and shape of the ending shape (the 100% ellipse). Color stops are given as a list, just as for linear-gradient(). Starting from the gradient center and progressing towards (and potentially beyond) the ending shape, uniformly-scaled concentric ellipses are drawn and colored according to the specified color stops.",
       "type": "function",
-      "value": "radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )",
+      "value": "radial-gradient( [ <rg-ending-shape> || <rg-size> ]? [ at <position> ]? , <color-stop-list> )",
       "values": [
         {
           "name": "<position>",
@@ -192,61 +186,24 @@
           "value": "<position>"
         },
         {
-          "name": "<ending-shape>",
-          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise.",
-          "type": "value",
-          "value": "<ending-shape>",
-          "values": [
-            {
-              "name": "circle",
-              "type": "value",
-              "value": "circle"
-            },
-            {
-              "name": "ellipse",
-              "type": "value",
-              "value": "ellipse"
-            }
-          ]
-        },
-        {
-          "name": "<size>",
-          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <extent-keyword> values: If <ending-shape> is specified as circle or is omitted, the <size> may be given explicitly as: If <ending-shape> is specified as ellipse or is omitted, <size> may instead be given explicitly as:",
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
           "type": "value",
-          "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
-          "values": [
-            {
-              "name": "closest-side",
-              "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
-              "type": "value",
-              "value": "closest-side"
-            },
-            {
-              "name": "farthest-side",
-              "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
-              "type": "value",
-              "value": "farthest-side"
-            },
-            {
-              "name": "closest-corner",
-              "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
-              "type": "value",
-              "value": "closest-corner"
-            },
-            {
-              "name": "farthest-corner",
-              "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
-              "type": "value",
-              "value": "farthest-corner"
-            }
-          ]
+          "value": "<rg-ending-shape>"
         },
         {
-          "name": "<extent-keyword>",
-          "prose": "Both circle and ellipse gradients accept the following <extent-keyword> values:",
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
           "type": "value",
-          "value": "closest-corner | closest-side | farthest-corner | farthest-side"
-        },
+          "value": "<rg-size>"
+        }
+      ]
+    },
+    {
+      "name": "<rg-size>",
+      "type": "type",
+      "value": "<rg-extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
+      "values": [
         {
           "name": "<length [0,∞]>",
           "prose": "Gives the radius of the circle explicitly. Negative values are invalid.",
@@ -261,6 +218,54 @@
         }
       ]
     },
+    {
+      "name": "<rg-extent-keyword>",
+      "type": "type",
+      "value": "closest-corner | closest-side | farthest-corner | farthest-side",
+      "values": [
+        {
+          "name": "closest-side",
+          "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
+          "type": "value",
+          "value": "closest-side"
+        },
+        {
+          "name": "farthest-side",
+          "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
+          "type": "value",
+          "value": "farthest-side"
+        },
+        {
+          "name": "closest-corner",
+          "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
+          "type": "value",
+          "value": "closest-corner"
+        },
+        {
+          "name": "farthest-corner",
+          "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
+          "type": "value",
+          "value": "farthest-corner"
+        }
+      ]
+    },
+    {
+      "name": "<rg-ending-shape>",
+      "type": "type",
+      "value": "circle | ellipse",
+      "values": [
+        {
+          "name": "circle",
+          "type": "value",
+          "value": "circle"
+        },
+        {
+          "name": "ellipse",
+          "type": "value",
+          "value": "ellipse"
+        }
+      ]
+    },
     {
       "name": "repeating-linear-gradient()",
       "prose": "In addition to linear-gradient() and radial-gradient(), this specification defines repeating-linear-gradient() and repeating-radial-gradient() values. These notations take the same values and are interpreted the same as their respective non-repeating siblings defined previously.",
@@ -278,60 +283,16 @@
           "value": "<position>"
         },
         {
-          "name": "<ending-shape>",
-          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <ending-shape> is omitted, the ending shape defaults to a circle if the <size> is a single <length>, and to an ellipse otherwise.",
-          "type": "value",
-          "value": "<ending-shape>",
-          "values": [
-            {
-              "name": "circle",
-              "type": "value",
-              "value": "circle"
-            },
-            {
-              "name": "ellipse",
-              "type": "value",
-              "value": "ellipse"
-            }
-          ]
-        },
-        {
-          "name": "<size>",
-          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <extent-keyword> values: If <ending-shape> is specified as circle or is omitted, the <size> may be given explicitly as: If <ending-shape> is specified as ellipse or is omitted, <size> may instead be given explicitly as:",
+          "name": "<rg-ending-shape>",
+          "prose": "Can be either circle or ellipse; determines whether the gradient’s ending shape is a circle or an ellipse, respectively. If <rg-ending-shape> is omitted, the ending shape defaults to a circle if the <rg-size> is a single <length>, and to an ellipse otherwise.",
           "type": "value",
-          "value": "<extent-keyword> | <length [0,∞]> | <length-percentage [0,∞]>{2}",
-          "values": [
-            {
-              "name": "closest-side",
-              "prose": "The ending shape is sized so that it exactly meets the side of the gradient box closest to the gradient’s center. If the shape is an ellipse, it exactly meets the closest side in each dimension.",
-              "type": "value",
-              "value": "closest-side"
-            },
-            {
-              "name": "farthest-side",
-              "prose": "Same as closest-side, except the ending shape is sized based on the farthest side(s).",
-              "type": "value",
-              "value": "farthest-side"
-            },
-            {
-              "name": "closest-corner",
-              "prose": "The ending shape is sized so that it passes through the corner of the gradient box closest to the gradient’s center. If the shape is an ellipse, the ending shape is given the same aspect-ratio it would have if closest-side were specified.",
-              "type": "value",
-              "value": "closest-corner"
-            },
-            {
-              "name": "farthest-corner",
-              "prose": "Same as closest-corner, except the ending shape is sized based on the farthest corner. If the shape is an ellipse, the ending shape is given the same aspect ratio it would have if farthest-side were specified.",
-              "type": "value",
-              "value": "farthest-corner"
-            }
-          ]
+          "value": "<rg-ending-shape>"
         },
         {
-          "name": "<extent-keyword>",
-          "prose": "Both circle and ellipse gradients accept the following <extent-keyword> values:",
+          "name": "<rg-size>",
+          "prose": "Determines the size of the gradient’s ending shape. If omitted it defaults to farthest-corner. It can be given explicitly or by keyword. For the purpose of the keyword definitions, consider the gradient box edges as extending infinitely in both directions, rather than being finite line segments. If the ending-shape is an ellipse, its axises are aligned with the horizontal and vertical axises. Both circle and ellipse gradients accept the following <rg-extent-keyword> values: If <rg-ending-shape> is specified as circle or is omitted, the <rg-size> may be given explicitly as: If <rg-ending-shape> is specified as ellipse or is omitted, <rg-size> may instead be given explicitly as:",
           "type": "value",
-          "value": "closest-corner | closest-side | farthest-corner | farthest-side"
+          "value": "<rg-size>"
         }
       ]
     },

package/css-sizing.json

@@ -297,8 +297,9 @@
         },
         {
           "name": "border-box",
-          "value": "border-box",
-          "type": "value"
+          "prose": "Sizes specified on sizing properties as <length-percentage> represent the box’s visually-apparent sizes, including the borders/padding (but not margin): they are applied to the border box. The padding and border of the box are laid out and drawn inside the specified width and height, with the content box sized to fill the remaining space, floored at zero. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified <length-percentage>. As the content width and height cannot be negative, this computation is floored at zero. Used values, as exposed for instance through getComputedStyle(), also refer to the border box.",
+          "type": "value",
+          "value": "border-box"
         }
       ],
       "styleDeclaration": [

package/css-speech.json

@@ -525,8 +525,9 @@
       "values": [
         {
           "name": "<family-name>",
-          "value": "<family-name>",
-          "type": "value"
+          "prose": "Values are specific voice instances (e.g., Mike, comedian, mary, carlos2, \"valley girl\"). Like font-family names, voice names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. If a sequence of identifiers is given as a voice name, the computed value is the name converted to a string by joining all the identifiers in the sequence by single spaces. Voice names that happen to be the same as the gender keywords (male, female and neutral) or that happen to match the CSS-wide keywords or preserve must be quoted to disambiguate with these keywords. The keyword default is reserved for future use and must also be quoted when used as voice names. It is recommended to quote voice names that contain white space, digits, or punctuation characters other than hyphens—even if these voice names are valid in unquoted form—in order to improve code clarity. For example: voice-family: \"john doe\", \"Henry the-8th\";",
+          "type": "value",
+          "value": "<family-name>"
         },
         {
           "name": "<age>",

package/css-text-decor-4.json

@@ -649,9 +649,9 @@
     {
       "msg": "Dangling value",
       "name": "auto",
-      "value": "auto",
-      "pureSyntax": false,
+      "prose": "The UA chooses a trim amount that ensures that if two identical underlined elements appear side-by-side they do not appear to have a single underline. (This is important in Chinese, where underlining is a form of punctuation.) text-decoration-skip-inset: auto for <u>石井</u><u>艾俐俐</u>",
       "type": "value",
+      "value": "auto",
       "for": "text-decoration-skip-inset"
     },
     {

package/css-transforms.json

@@ -159,8 +159,9 @@
         },
         {
           "name": "view-box",
-          "value": "view-box",
-          "type": "value"
+          "prose": "Uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the SVG viewport creating element: The reference box is positioned at the origin of the coordinate system established by the viewBox attribute. The dimension of the reference box is set to the width and height values of the viewBox attribute.",
+          "type": "value",
+          "value": "view-box"
         }
       ],
       "styleDeclaration": [

package/css-view-transitions.json

@@ -41,20 +41,20 @@
       "prose": "This pseudo-element is the grouping container of all the other view-transition pseudo-elements. Its originating element is the document’s document element. The following is added to the HTML user agent style sheet: html::view-transition { position: fixed; inset: 0; }"
     },
     {
-      "name": "::view-transition-group( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each view-transition-name in a view transition, and holds the rest of the pseudo-elements corresponding to this view-transition-name. Its originating element is the ::view-transition pseudo-element. The following is added to the HTML user agent style sheet: html::view-transition-group(*) { position: absolute; top: 0; left: 0; animation-duration: 0.25s; animation-fill-mode: both; } The selector for this and subsequently defined pseudo-elements is likely to change to indicate position in the pseudo-tree hierarchy."
+      "name": "::view-transition-group()",
+      "value": "::view-transition-group( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-image-pair( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each view-transition-name being in a view transition, and holds the images of the old and new elements. Its originating element is the ::view-transition-group() pseudo-element with the same transition-name. The following is added to the HTML user agent style sheet: html::view-transition-image-pair(*) { position: absolute; inset: 0; animation-duration: inherit; animation-fill-mode: inherit; }"
+      "name": "::view-transition-image-pair()",
+      "value": "::view-transition-image-pair( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-old( <pt-name-selector> )",
-      "prose": "One of these pseudo-elements exists for each element in the old DOM being animated by the view transition, and is a replaced element displaying the old element’s snapshot image. It has natural dimensions equal to the snapshot’s size. Its originating element is the ::view-transition-image-pair() pseudo-element with the same transition-name. The following is added to the HTML user agent style sheet: html::view-transition-old(*) { position: absolute; inset-block-start: 0; inline-size: 100%; block-size: auto; animation-duration: inherit; animation-fill-mode: inherit; }"
+      "name": "::view-transition-old()",
+      "value": "::view-transition-old( <pt-name-selector> )"
     },
     {
-      "name": "::view-transition-new( <pt-name-selector> )",
-      "prose": "Identical to ::view-transition-old(), except it deals with the new element instead."
+      "name": "::view-transition-new()",
+      "value": "::view-transition-new( <pt-name-selector> )"
     }
   ],
   "values": [

package/fill-stroke.json

@@ -356,8 +356,9 @@
       "values": [
         {
           "name": "<number>",
-          "value": "<number>",
-          "type": "value"
+          "prose": "Specifies the limit on the join’s size as a ratio of its diagonal to the stroke-width. Values less than 1 are invalid (and make the declaration invalid). For a miter linejoin, the length of the diagonal is calculated from the angle between the two segments as stroke-width / sin(θ/2). The linejoin is clipped perpendicular to the line bisecting the angle between the two path segments. For an arcs linejoin, the length of the diagonal is calculated along a circular arc that is tangent to the line bisecting the angle between the two segments at the point the two segments intersect and passes through the end point of the join. The linejoin is clipped perpendicular to this arc.",
+          "type": "value",
+          "value": "<number>"
         }
       ],
       "styleDeclaration": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@webref/css",
   "description": "CSS definitions of the web platform",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/w3c/webref.git"
@@ -12,6 +12,6 @@
   "license": "MIT",
   "main": "index.js",
   "peerDependencies": {
-    "css-tree": "^2.2.1"
+    "css-tree": "^2.3.0"
   }
 }

package/scroll-animations.json

@@ -6,12 +6,12 @@
   "properties": [
     {
       "name": "scroll-timeline-name",
-      "value": "none | <custom-ident>",
+      "value": "none | <custom-ident>#",
       "initial": "none",
       "appliesTo": "scroll containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the specified keyword",
+      "computedValue": "the keyword none or a list of <custom-ident>s",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "styleDeclaration": [
@@ -21,12 +21,12 @@
     },
     {
       "name": "scroll-timeline-axis",
-      "value": "block | inline | vertical | horizontal",
+      "value": "[ block | inline | vertical | horizontal ]#",
       "initial": "block",
       "appliesTo": "scroll containers",
       "inherited": "no",
       "percentages": "n/a",
-      "computedValue": "the specified keyword",
+      "computedValue": "a list of the keywords specified",
       "canonicalOrder": "per grammar",
       "animationType": "not animatable",
       "values": [
@@ -74,7 +74,7 @@
     },
     {
       "name": "scroll-timeline",
-      "value": "<'scroll-timeline-name'> || <'scroll-timeline-axis'>",
+      "value": "[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#",
       "initial": "see individual properties",
       "appliesTo": "scroll containers",
       "inherited": "no",
@@ -186,7 +186,7 @@
     },
     {
       "name": "view-timeline",
-      "value": "[ <'view-timeline-name'> || <'view-timeline-axis'> ]#",
+      "value": "[ <'view-timeline-name'> <'view-timeline-axis'>? ]#",
       "initial": "see individual properties",
       "appliesTo": "all elements",
       "inherited": "see individual properties",
@@ -260,7 +260,7 @@
     },
     {
       "name": "animation-delay-end",
-      "value": "[ <time> | <timeline-range-name> <percentage> ]",
+      "value": "[ <time> | <timeline-range-name> <percentage> ]#",
       "initial": "0s",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -293,7 +293,7 @@
   "values": [
     {
       "name": "scroll()",
-      "prose": "The scroll() functional notation can be used as a value of animation-timeline and specifies a scroll progress timeline. Its syntax is",
+      "prose": "The scroll() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a scroll progress timeline. Its syntax is",
       "type": "function",
       "value": "scroll( [ <scroller> || <axis> ]? )",
       "values": [
@@ -345,6 +345,12 @@
       "type": "type",
       "value": "root | nearest"
     },
+    {
+      "name": "view()",
+      "prose": "The view() functional notation can be used as a <single-animation-timeline> value in animation-timeline and specifies a view progress timeline in reference to the nearest ancestor scroll container. Its syntax is",
+      "type": "function",
+      "value": "view( [ <axis> || <'view-timeline-inset'> ]? )"
+    },
     {
       "name": "<timeline-range-name>",
       "prose": "A named timeline range is a named segment of an animation timeline. The start of the segment is represented as 0% progress through the range; the end of the segment is represented as 100% progress through the range. Multiple named timeline ranges can be attached to a given timeline, and multiple such ranges can overlap. For example, the contain range of a view progress timeline overlaps with its cover range. Named timeline ranges are represented by the <timeline-range-name> value type, which indicates a CSS identifier representing one of the predefined named timeline ranges.",

package/selectors.json

@@ -16,7 +16,7 @@
     },
     {
       "name": ":not()",
-      "prose": "The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument. It represents an element that is not represented by its argument."
+      "prose": "The negation pseudo-class, :not(), is a functional pseudo-class taking a <complex-real-selector-list> as an argument. It represents an element that is not represented by its argument."
     },
     {
       "name": ":where()",
@@ -24,7 +24,7 @@
     },
     {
       "name": ":has()",
-      "prose": "The relational pseudo-class, :has(), is a functional pseudo-class taking a <forgiving-relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element."
+      "prose": "The relational pseudo-class, :has(), is a functional pseudo-class taking a <relative-selector-list> as an argument. It represents an element if any of the relative selectors would match at least one element when anchored against this element."
     },
     {
       "name": ":defined",
@@ -68,23 +68,23 @@
     },
     {
       "name": ":hover",
-      "prose": "The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA."
+      "prose": "The :hover pseudo-class applies while the user designates an element (or pseudo-element) with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. Interactive user agents that cannot detect hovering due to hardware limitations (e.g., a pen device that does not detect hovering) are still conforming; the selector will simply never match in such a UA."
     },
     {
       "name": ":active",
-      "prose": "The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the \"left\" mouse button), and any aliases thereof."
+      "prose": "The :active pseudo-class applies while an element is being “activated” by the user, as defined by the host language; for example, while a hyperlink is being triggered."
     },
     {
       "name": ":focus",
-      "prose": "The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input)."
+      "prose": "The :focus pseudo-class applies while an element (or pseudo-element) has the focus (accepts keyboard or other forms of input)."
     },
     {
       "name": ":focus-visible",
-      "prose": "While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears."
+      "prose": "While the :focus pseudo-class always matches the currently-focused element, UAs only sometimes visibly indicate focus (such as by drawing a “focus ring”), instead using a variety of heuristics to visibly indicate the focus only when it would be most helpful to the user. The :focus-visible pseudo-class matches a focused element (or pseudo-element) in these situations only, allowing authors to change the appearance of the focus indicator without changing when a focus indicator appears."
     },
     {
       "name": ":focus-within",
-      "prose": "The :focus-within pseudo-class applies to any element for which the :focus pseudo class applies as well as to an element whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus."
+      "prose": "The :focus-within pseudo-class applies to any element (or pseudo-element) for which the :focus pseudo class applies, as well as to an element (or pseudo-element) whose descendant in the flat tree (including non-element nodes, such as text nodes) matches the conditions for matching :focus."
     },
     {
       "name": ":current",
@@ -232,11 +232,11 @@
     },
     {
       "name": ":nth-child()",
-      "prose": "The :nth-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, which is a <complex-selector-list> parsed as a forgiving selector list. If S is omitted, it defaults to *|*."
+      "value": ":nth-child(An+B [of S]? )"
     },
     {
       "name": ":nth-last-child()",
-      "prose": "The :nth-last-child(An+B [of S]? ) pseudo-class notation represents elements that are among An+Bth elements from the list composed of their inclusive siblings that match the selector list S, counting backwards from the end. S is <complex-selector-list> parsed as a forgiving selector list. If S is omitted, it defaults to *|*."
+      "value": ":nth-last-child(An+B [of S]? )"
     },
     {
       "name": ":first-child",
@@ -252,11 +252,11 @@
     },
     {
       "name": ":nth-of-type()",
-      "prose": "The :nth-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared)."
+      "value": ":nth-of-type(An+B)"
     },
     {
       "name": ":nth-last-of-type()",
-      "prose": "The :nth-last-of-type(An+B) pseudo-class notation represents the same elements that would be matched by :nth-last-child(|An+B| of S), where S is a type selector and namespace prefix matching the element in question. For example, when considering whether an HTML img element matches this pseudo-class, the S in question is html|img (assuming an appropriate html namespace is declared)."
+      "value": ":nth-last-of-type(An+B)"
     },
     {
       "name": ":first-of-type",
@@ -288,11 +288,11 @@
     },
     {
       "name": ":nth-col()",
-      "prose": "The :nth-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns before it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns."
+      "value": ":nth-col(An+B)"
     },
     {
       "name": ":nth-last-col()",
-      "prose": "The :nth-last-col(An+B) pseudo-class notation represents a cell element belonging to a column that has An+B-1 columns after it, for any positive integer or zero value of n. Column membership is determined based on the semantics of the document language only: whether and how the elements are presented is not considered. If a cell element belongs to more than one column, it is represented by a selector indicating any of those columns."
+      "value": ":nth-last-col(An+B)"
     }
   ],
   "values": [
@@ -306,6 +306,11 @@
       "type": "type",
       "value": "<complex-selector>#"
     },
+    {
+      "name": "<complex-real-selector-list>",
+      "type": "type",
+      "value": "<complex-real-selector>#"
+    },
     {
       "name": "<compound-selector-list>",
       "type": "type",
@@ -321,9 +326,24 @@
       "type": "type",
       "value": "<relative-selector>#"
     },
+    {
+      "name": "<relative-real-selector-list>",
+      "type": "type",
+      "value": "<relative-real-selector>#"
+    },
+    {
+      "name": "<complex-selector-unit>",
+      "type": "type",
+      "value": "[ <compound-selector>? <pseudo-compound-selector>* ]!"
+    },
     {
       "name": "<complex-selector>",
       "type": "type",
+      "value": "<complex-selector-unit> [ <combinator>? <complex-selector-unit> ]*"
+    },
+    {
+      "name": "<complex-real-selector>",
+      "type": "type",
       "value": "<compound-selector> [ <combinator>? <compound-selector> ]*"
     },
     {
@@ -331,10 +351,20 @@
       "type": "type",
       "value": "<combinator>? <complex-selector>"
     },
+    {
+      "name": "<relative-real-selector>",
+      "type": "type",
+      "value": "<combinator>? <complex-real-selector>"
+    },
     {
       "name": "<compound-selector>",
       "type": "type",
-      "value": "[ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!"
+      "value": "[ <type-selector>? <subclass-selector>* ]!"
+    },
+    {
+      "name": "<pseudo-compound-selector>",
+      "type": "type",
+      "value": "<pseudo-element-selector> <pseudo-class-selector>*"
     },
     {
       "name": "<simple-selector>",
@@ -410,11 +440,6 @@
       "name": "<forgiving-selector-list>",
       "prose": "The <forgiving-selector-list> production instead parses each selector in the list individually, simply ignoring ones that fail to parse, so the remaining selectors can still be used.",
       "type": "type"
-    },
-    {
-      "name": "<forgiving-relative-selector-list>",
-      "prose": "<forgiving-relative-selector-list> is identical to <forgiving-selector-list>, except it parses its components as <relative-selector> rather than <complex-selector>.",
-      "type": "type"
     }
   ]
 }