@webref/css 6.15.1 → 6.16.0

package/css-backgrounds-4.json

@@ -224,13 +224,13 @@
       "name": "background-position",
       "href": "https://drafts.csswg.org/css-backgrounds-4/#propdef-background-position",
       "value": "<bg-position>#",
-      "initial": "see individual properties",
-      "appliesTo": "see individual properties",
-      "inherited": "see individual properties",
-      "percentages": "see individual properties",
-      "computedValue": "see individual properties",
-      "animationType": "see individual properties",
+      "initial": "0% 0%",
+      "appliesTo": "all elements",
+      "inherited": "no",
+      "percentages": "refer to size of background positioning area minus size of background image; see text",
+      "computedValue": "a list, each item a pair of offsets (horizontal and vertical) from the top left origin, each offset given as a computed <length-percentage> value",
       "canonicalOrder": "per grammar",
+      "animationType": "repeatable list",
       "styleDeclaration": [
         "background-position",
         "backgroundPosition"
@@ -354,9 +354,16 @@
     },
     {
       "name": "<bg-position>",
+      "prose": "Its value is given as a comma-separated list of <bg-position> values, which are interpreted as <position> values with the resized background image as the alignment subject and the background positioning area as the alignment container.",
       "href": "https://drafts.csswg.org/css-backgrounds-4/#typedef-bg-position",
       "type": "type",
-      "value": "[ [ left | center | right | top | bottom | start | end | <length-percentage> ] | [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | [ center | [ left | right | x-start | x-end ] <length-percentage>? ] && [ center | [ top | bottom | y-start | y-end ] <length-percentage>? ] | [ center | [ start | end ] <length-percentage>? ] [ center | [ start | end ] <length-percentage>? ] ]"
+      "value": "<position> | <position-three>"
+    },
+    {
+      "name": "<position-three>",
+      "href": "https://drafts.csswg.org/css-backgrounds-4/#typedef-position-three",
+      "type": "type",
+      "value": "[ [ left | center | right ] && [ [ top | bottom ] <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ top | center | bottom ] ]"
     },
     {
       "name": "<bg-clip>",

package/css-color-5.json

@@ -72,7 +72,7 @@
       "prose": "Colors in CSS are represented by the <color> type:",
       "href": "https://drafts.csswg.org/css-color-5/#typedef-color",
       "type": "type",
-      "value": "<color-base> | currentColor | <system-color> | <device-cmyk()> | <light-dark()>"
+      "value": "<color-base> | currentColor | <system-color> | <contrast-color()> | <device-cmyk()> | <light-dark()>"
     },
     {
       "name": "<color-base>",

package/css-conditional-5.json

@@ -180,9 +180,16 @@
           "name": "stuck",
           "href": "https://drafts.csswg.org/css-conditional-5/#descdef-container-stuck",
           "for": "@container",
-          "value": "top | right | bottom | left | block-start | inline-start | block-end | inline-end",
+          "value": "none | top | right | bottom | left | block-start | inline-start | block-end | inline-end",
           "type": "discrete",
           "values": [
+            {
+              "name": "none",
+              "prose": "The sticky container is not shifted in any direction.",
+              "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-stuck-none",
+              "type": "value",
+              "value": "none"
+            },
             {
               "name": "top",
               "prose": "The sticky container is shifted to stay inside the top edge.",
@@ -245,26 +252,33 @@
           "name": "snapped",
           "href": "https://drafts.csswg.org/css-conditional-5/#descdef-container-snapped",
           "for": "@container",
-          "value": "x | y | block | inline",
+          "value": "none | x | y | block | inline",
           "type": "discrete",
           "values": [
+            {
+              "name": "none",
+              "prose": "The query container is not a snap target.",
+              "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-snapped-none",
+              "type": "value",
+              "value": "none"
+            },
             {
               "name": "x",
-              "prose": "snapped container feature matches x if the query container is a horizontal snap target for its scroll container",
+              "prose": "snapped container feature matches x if the query container is a horizontal snap target for its scroll container.",
               "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-snapped-x",
               "type": "value",
               "value": "x"
             },
             {
               "name": "y",
-              "prose": "snapped container feature matches y if the query container is a vertical snap target for its scroll container",
+              "prose": "snapped container feature matches y if the query container is a vertical snap target for its scroll container.",
               "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-snapped-y",
               "type": "value",
               "value": "y"
             },
             {
               "name": "block",
-              "prose": "snapped container feature matches block if the query container is a snap target for its scroll container in the block direction of the snap container.",
+              "prose": "snapped container feature matches block if the query container is a snap target for its scroll container. in the block direction of the snap container.",
               "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-snapped-block",
               "type": "value",
               "value": "block"
@@ -282,9 +296,16 @@
           "name": "overflowing",
           "href": "https://drafts.csswg.org/css-conditional-5/#descdef-container-overflowing",
           "for": "@container",
-          "value": "top | right | bottom | left | block-start | inline-start | block-end | inline-end",
+          "value": "none | top | right | bottom | left | block-start | inline-start | block-end | inline-end",
           "type": "discrete",
           "values": [
+            {
+              "name": "none",
+              "prose": "The scroll container does not have scrollable overflow in any direction.",
+              "href": "https://drafts.csswg.org/css-conditional-5/#valdef-container-overflowing-none",
+              "type": "value",
+              "value": "none"
+            },
             {
               "name": "top",
               "prose": "The scroll container has scrollable overflow past the top edge.",

package/css-easing.json

@@ -9,18 +9,15 @@
   "values": [
     {
       "name": "<easing-function>",
-      "value": "linear | <linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>",
       "href": "https://drafts.csswg.org/css-easing-2/#typedef-easing-function",
       "type": "type",
-      "values": [
-        {
-          "name": "linear",
-          "prose": "The linear keyword produces an identity linear easing function whose output progress value is equal to the input progress value for all inputs.",
-          "href": "https://drafts.csswg.org/css-easing-2/#valdef-easing-function-linear",
-          "type": "value",
-          "value": "linear"
-        }
-      ]
+      "value": "<linear-easing-function> | <cubic-bezier-easing-function> | <step-easing-function>"
+    },
+    {
+      "name": "<linear-easing-function>",
+      "href": "https://drafts.csswg.org/css-easing-2/#typedef-linear-easing-function",
+      "type": "type",
+      "value": "linear | <linear()>"
     },
     {
       "name": "linear()",
@@ -30,123 +27,123 @@
     },
     {
       "name": "<cubic-bezier-easing-function>",
-      "value": "ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)",
       "href": "https://drafts.csswg.org/css-easing-2/#typedef-cubic-bezier-easing-function",
       "type": "type",
+      "value": "ease | ease-in | ease-out | ease-in-out | <cubic-bezier()>",
       "values": [
-        {
-          "name": "ease",
-          "prose": "Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).",
-          "href": "https://drafts.csswg.org/css-easing-2/#valdef-cubic-bezier-easing-function-ease",
-          "type": "value",
-          "value": "ease"
-        },
         {
           "name": "ease-in",
-          "prose": "Equivalent to cubic-bezier(0.42, 0, 1, 1).",
+          "prose": "A function that starts slowly and smoothly, then quickly approaches the endpoint with an almost linear curve. Equivalent to cubic-bezier(0.42, 0, 1, 1).",
           "href": "https://drafts.csswg.org/css-easing-2/#valdef-cubic-bezier-easing-function-ease-in",
           "type": "value",
           "value": "ease-in"
         },
         {
           "name": "ease-out",
-          "prose": "Equivalent to cubic-bezier(0, 0, 0.58, 1).",
+          "prose": "A function that starts quickly with an almost linear curve, then slowly and smoothly approaches the endpoint. Equivalent to cubic-bezier(0, 0, 0.58, 1).",
           "href": "https://drafts.csswg.org/css-easing-2/#valdef-cubic-bezier-easing-function-ease-out",
           "type": "value",
           "value": "ease-out"
         },
         {
           "name": "ease-in-out",
-          "prose": "Equivalent to cubic-bezier(0.42, 0, 0.58, 1).",
+          "prose": "A function that starts and ends slowly and smoothly, quickly traversing the middle part. Equivalent to cubic-bezier(0.42, 0, 0.58, 1).",
           "href": "https://drafts.csswg.org/css-easing-2/#valdef-cubic-bezier-easing-function-ease-in-out",
           "type": "value",
           "value": "ease-in-out"
         },
         {
-          "name": "cubic-bezier()",
-          "value": "cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)",
-          "href": "https://drafts.csswg.org/css-easing-2/#funcdef-cubic-bezier-easing-function-cubic-bezier",
-          "type": "function"
+          "name": "ease",
+          "prose": "Similar to ease-in-out, but with a quicker start and a slower finish. Equivalent to cubic-bezier(0.25, 0.1, 0.25, 1).",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-cubic-bezier-easing-function-ease",
+          "type": "value",
+          "value": "ease"
         }
       ]
     },
+    {
+      "name": "cubic-bezier()",
+      "href": "https://drafts.csswg.org/css-easing-2/#funcdef-cubic-bezier",
+      "type": "function",
+      "value": "cubic-bezier( [ <number [0,1]>, <number> ]#{2} )"
+    },
     {
       "name": "<step-easing-function>",
-      "value": "step-start | step-end | steps(<integer> , <step-position>?)",
       "href": "https://drafts.csswg.org/css-easing-2/#typedef-step-easing-function",
       "type": "type",
+      "value": "step-start | step-end | <steps()>"
+    },
+    {
+      "name": "steps()",
+      "href": "https://drafts.csswg.org/css-easing-2/#funcdef-steps",
+      "type": "function",
+      "value": "steps( <integer>, <step-position>?)",
       "values": [
         {
           "name": "step-start",
-          "prose": "Computes to steps(1, start)",
+          "prose": "Jumps from the starting to the ending value at the start of the easing interval. Computes to steps(1, start)",
           "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-easing-function-step-start",
           "type": "value",
           "value": "step-start"
         },
         {
           "name": "step-end",
-          "prose": "Computes to steps(1, end) Example step easing function keyword values.",
+          "prose": "Jumps from the starting to the ending value at the end of the easing interval. Computes to steps(1, end) Example step easing function keyword values.",
           "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-easing-function-step-end",
           "type": "value",
           "value": "step-end"
-        },
-        {
-          "name": "steps()",
-          "value": "steps(<integer>, <step-position>?)",
-          "href": "https://drafts.csswg.org/css-easing-2/#funcdef-step-easing-function-steps",
-          "type": "function",
-          "values": [
-            {
-              "name": "jump-start",
-              "prose": "The first rise occurs at input progress value of 0.",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-jump-start",
-              "type": "value",
-              "value": "jump-start"
-            },
-            {
-              "name": "jump-end",
-              "prose": "The last rise occurs at input progress value of 1.",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-jump-end",
-              "type": "value",
-              "value": "jump-end"
-            },
-            {
-              "name": "jump-none",
-              "prose": "All rises occur within the range (0, 1).",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-jump-none",
-              "type": "value",
-              "value": "jump-none"
-            },
-            {
-              "name": "jump-both",
-              "prose": "The first rise occurs at input progress value of 0 and the last rise occurs at input progress value of 1.",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-jump-both",
-              "type": "value",
-              "value": "jump-both"
-            },
-            {
-              "name": "start",
-              "prose": "Behaves as jump-start.",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-start",
-              "type": "value",
-              "value": "start"
-            },
-            {
-              "name": "end",
-              "prose": "Behaves as jump-end.",
-              "href": "https://drafts.csswg.org/css-easing-2/#valdef-steps-end",
-              "type": "value",
-              "value": "end"
-            }
-          ]
         }
       ]
     },
     {
       "name": "<step-position>",
-      "value": "jump-start | jump-end | jump-none | jump-both | start | end",
       "href": "https://drafts.csswg.org/css-easing-2/#typedef-step-position",
-      "type": "type"
+      "type": "type",
+      "value": "jump-start | jump-end | jump-none | jump-both | start | end",
+      "values": [
+        {
+          "name": "jump-start",
+          "prose": "The first interval has an output progress value of 1/steps, and subsequent intervals rise by 1/steps. (It \"jumps at the start\", with no step returning 0.)",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-jump-start",
+          "type": "value",
+          "value": "jump-start"
+        },
+        {
+          "name": "jump-end",
+          "prose": "The first interval has an output progress value of 0, and subsequent intervals rise by 1/steps. (It \"jumps at the end\", with no step returning 1.)",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-jump-end",
+          "type": "value",
+          "value": "jump-end"
+        },
+        {
+          "name": "jump-none",
+          "prose": "The first interval has an output progress value of 0, and subsequent intervals rise by 1/(steps-1). (It \"never jumps\", with steps returning both 0 and 1.)",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-jump-none",
+          "type": "value",
+          "value": "jump-none"
+        },
+        {
+          "name": "jump-both",
+          "prose": "The first interval has an output progress value of 1/(steps+1), and subsequent intervals rise by 1/(steps+1). (It \"jumps at both ends\", with no steps returning 0 or 1.)",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-jump-both",
+          "type": "value",
+          "value": "jump-both"
+        },
+        {
+          "name": "start",
+          "prose": "Behaves as jump-start.",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-start",
+          "type": "value",
+          "value": "start"
+        },
+        {
+          "name": "end",
+          "prose": "Behaves as jump-end.",
+          "href": "https://drafts.csswg.org/css-easing-2/#valdef-step-position-end",
+          "type": "value",
+          "value": "end"
+        }
+      ]
     }
   ]
 }

package/css-grid-3.json

@@ -46,21 +46,21 @@
       "values": [
         {
           "name": "row-reverse",
-          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the auto-placement algorithm.",
+          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the grid item placement algorithm.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-grid-auto-flow-row-reverse",
           "type": "value",
           "value": "row-reverse"
         },
         {
           "name": "column-reverse",
-          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the auto-placement algorithm.",
+          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the grid item placement algorithm.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-grid-auto-flow-column-reverse",
           "type": "value",
           "value": "column-reverse"
         },
         {
           "name": "wrap-reverse",
-          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the auto-placement algorithm.",
+          "prose": "This specification extends the grid-auto-flow property to add row-reverse, column-reverse, and wrap-reverse, which reverse the directions of the grid item placement algorithm.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-grid-auto-flow-wrap-reverse",
           "type": "value",
           "value": "wrap-reverse"
@@ -108,28 +108,28 @@
       "values": [
         {
           "name": "column",
-          "prose": "The masonry container’s masonry axis is its block axis, and masonry layout starts from its block-start edge.",
+          "prose": "The masonry container’s stacking axis is its block axis, and masonry layout starts from its block-start edge.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-direction-column",
           "type": "value",
           "value": "column"
         },
         {
           "name": "column-reverse",
-          "prose": "The masonry container’s masonry axis is its block axis, and masonry layout starts from its block-end edge.",
+          "prose": "The masonry container’s stacking axis is its block axis, and masonry layout starts from its block-end edge.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-direction-column-reverse",
           "type": "value",
           "value": "column-reverse"
         },
         {
           "name": "row",
-          "prose": "The masonry container’s masonry axis is its inline axis, and masonry layout starts from its inline-start edge.",
+          "prose": "The masonry container’s stacking axis is its inline axis, and masonry layout starts from its inline-start edge.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-direction-row",
           "type": "value",
           "value": "row"
         },
         {
           "name": "row-reverse",
-          "prose": "The masonry container’s masonry axis is its inline axis, and masonry layout starts from its inline-end edge.",
+          "prose": "The masonry container’s stacking axis is its inline axis, and masonry layout starts from its inline-end edge.",
           "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-direction-row-reverse",
           "type": "value",
           "value": "row-reverse"
@@ -188,14 +188,29 @@
         "masonryFlow"
       ]
     },
+    {
+      "name": "masonry",
+      "href": "https://drafts.csswg.org/css-grid-3/#propdef-masonry",
+      "value": "<'masonry-template-areas'> || <'masonry-template-tracks'> || <'masonry-direction'> || <'masonry-fill'>",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
+      "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
+      "styleDeclaration": [
+        "masonry"
+      ]
+    },
     {
       "name": "masonry-template-tracks",
       "href": "https://drafts.csswg.org/css-grid-3/#propdef-masonry-template-tracks",
-      "value": "<'grid-template-columns'>",
+      "value": "none | <track-list> | <masonry-auto-track-list> | subgrid <line-name-list>?",
       "initial": "repeat(auto-areas, auto)",
       "appliesTo": "masonry containers",
       "inherited": "no",
-      "percentages": "refer to correspodning dimension of the content area",
+      "percentages": "refer to corresponding dimension of the content area",
       "computedValue": "by computed value type per item in the computed track list",
       "canonicalOrder": "per grammar",
       "animationType": "if list lengths match, by computed value type; otherwise, discrete",
@@ -227,7 +242,7 @@
       "initial": "auto",
       "appliesTo": "grid containers",
       "inherited": "no",
-      "percentages": "refer to correspodning dimension of the content area",
+      "percentages": "refer to corresponding dimension of the content area",
       "computedValue": "a computed track list",
       "canonicalOrder": "per grammar",
       "animationType": "if the list lengths match, by computed value type per item; discrete otherwise",
@@ -236,6 +251,38 @@
         "masonryAutoTracks"
       ]
     },
+    {
+      "name": "masonry-slack",
+      "href": "https://drafts.csswg.org/css-grid-3/#propdef-masonry-slack",
+      "value": "<length-percentage> | infinite",
+      "initial": "1em",
+      "appliesTo": "masonry containers",
+      "inherited": "no",
+      "percentages": "relative to the grid-axis content box size of the masonry container",
+      "computedValue": "a computed <length-percentage> value",
+      "canonicalOrder": "per grammar",
+      "animationType": "as length",
+      "values": [
+        {
+          "name": "<length-percentage>",
+          "prose": "Specifies the tie threshold for the masonry container. Placement positions are considered to be equally good (“tied”) if they are within the specified distance from the shortest position.",
+          "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-slack-length-percentage",
+          "type": "value",
+          "value": "<length-percentage>"
+        },
+        {
+          "name": "infinite",
+          "prose": "Specifies an infinite tie threshold. This makes items distribute themselves strictly in order, without considering the length of the tracks at all.",
+          "href": "https://drafts.csswg.org/css-grid-3/#valdef-masonry-slack-infinite",
+          "type": "value",
+          "value": "infinite"
+        }
+      ],
+      "styleDeclaration": [
+        "masonry-slack",
+        "masonrySlack"
+      ]
+    },
     {
       "name": "masonry-track-start",
       "href": "https://drafts.csswg.org/css-grid-3/#propdef-masonry-track-start",
@@ -263,5 +310,23 @@
   ],
   "atrules": [],
   "selectors": [],
-  "values": []
+  "values": [
+    {
+      "name": "<masonry-auto-track-list>",
+      "href": "https://drafts.csswg.org/css-grid-3/#typedef-masonry-auto-track-list",
+      "type": "type",
+      "value": "[ <line-names>? [ <track-size> | <track-repeat> ] ]* <line-names>? <auto-repeat> <line-names>? [ [ <track-size> | <track-repeat> ] <line-names>? ]*"
+    }
+  ],
+  "warnings": [
+    {
+      "msg": "Dangling value",
+      "name": "auto-areas",
+      "prose": "The new auto-areas value for the repeat() notation represents the number of repetitions necessary for the total number of explicit tracks to match the grid-template-areas / masonry-template-areas value in effect in the corresponding axis. If multiple tracks are listed for the repetition, the final repetition is truncated as necessary to produce the correct number of tracks.",
+      "href": "https://drafts.csswg.org/css-grid-3/#valdef-repeat-auto-areas",
+      "type": "value",
+      "value": "auto-areas",
+      "for": "repeat()"
+    }
+  ]
 }

package/css-pseudo.json

@@ -79,6 +79,12 @@
       "name": "::details-content",
       "prose": "The ::details-content pseudo-element targets the additional information in a a details element that can be expanded or collapsed. It is a part-like pseudo-element.",
       "href": "https://drafts.csswg.org/css-pseudo-4/#selectordef-details-content"
+    },
+    {
+      "name": "::picker()",
+      "prose": "The ::picker() pseudo-element targets the popup picker of form control elements which have popup pickers, such as the select element. It is a part-like pseudo-element.",
+      "href": "https://drafts.csswg.org/css-pseudo-4/#selectordef-picker",
+      "value": "::picker( <ident>+ )"
     }
   ],
   "values": []

package/css-scoping.json

@@ -25,6 +25,11 @@
       "name": "::slotted()",
       "prose": "The ::slotted() pseudo-element represents the elements assigned, after flattening, to a slot. This pseudo-element only exists on slots.",
       "href": "https://drafts.csswg.org/css-scoping-1/#selectordef-slotted"
+    },
+    {
+      "name": ":has-slotted",
+      "prose": "The :has-slotted pseudo-class matches slot elements which have a non-empty list of slotted nodes.",
+      "href": "https://drafts.csswg.org/css-scoping-1/#selectordef-has-slotted"
     }
   ],
   "values": []

package/css-shapes-2.json

@@ -32,7 +32,7 @@
         },
         {
           "name": "<basic-shape>",
-          "prose": "The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon().",
+          "prose": "The shape is computed based on the values of one of the <basic-shape> functions.",
           "href": "https://drafts.csswg.org/css-shapes-2/#valdef-shape-inside-basic-shape",
           "type": "value",
           "value": "<basic-shape>"

package/css-shapes.json

@@ -25,7 +25,7 @@
         },
         {
           "name": "<basic-shape>",
-          "prose": "The shape is computed based on the values of one of inset(), circle(), ellipse() or polygon(). If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to margin-box.",
+          "prose": "The shape is computed based on one of the <basic-shape> functions. If a <shape-box> is also supplied, this defines the reference box for the <basic-shape> function. If <shape-box> is not supplied, then the reference box defaults to margin-box.",
           "href": "https://drafts.csswg.org/css-shapes-1/#valdef-shape-outside-basic-shape",
           "type": "value",
           "value": "<basic-shape>"
@@ -126,28 +126,28 @@
         },
         {
           "name": "circle()",
-          "prose": "The <radial-size> argument defines the circle’s radius. Rather than referring to the gradient box, values are resolved against the [=/reference box=]. Two <length-percentage> values are invalid. The <position> argument defines the center of the circle. Unless otherwise specified, this defaults to center if omitted.",
+          "prose": "The <radial-size> argument defines the circle’s radius. Rather than referring to the gradient box, values are resolved against the reference box. Two <length-percentage> values are invalid. The <position> argument defines the center of the circle. Unless otherwise specified, this defaults to center if omitted.",
           "href": "https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-circle",
           "type": "function",
           "value": "circle( <radial-size>? [ at <position> ]? )"
         },
         {
           "name": "ellipse()",
-          "prose": "The <radial-size> argument defines the horizontal and vertical radiuses of the ellipse. Rather than referring to the gradient box, values are resolved against the [=/reference box=]. The <position> argument defines the center of the ellipse. Unless otherwise specified, this defaults to center if omitted.",
+          "prose": "The <radial-size> argument defines the horizontal and vertical radiuses of the ellipse. Rather than referring to the gradient box, values are resolved against the reference box. The <position> argument defines the center of the ellipse. Unless otherwise specified, this defaults to center if omitted.",
           "href": "https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-ellipse",
           "type": "function",
           "value": "ellipse( <radial-size>? [ at <position> ]? )"
         },
         {
           "name": "polygon()",
-          "prose": "The <'fill-rule'> specifies the filling rule used to determine the interior Defaults to nonzero if omitted. Each <length-percentage> pair specifies a vertex of the polygon, as a horizontal and vertical offset from the left and top edges of the [=/reference box=]. The UA must close a polygon by connecting the last vertex with the first vertex of the list.",
+          "prose": "The <'fill-rule'> specifies the filling rule used to determine the interior. Defaults to nonzero if omitted. An optional <length> after a round keyword defines rounding for each vertex of the polygon. The length is the radius of a circle whose center lies on the bisector of the smaller angle of the vertex, and that is tangential to both sides of the vertex. Rounding polygon vertices that are both convex and concave. To avoid rounding more than half of any line segment, the rounding of each vertex must be clamped separately such that the radius is never more than the smaller of tan(angle/2) segment / 2 evaluated against both vertex line segments. This diagram shows the intent of the clamping formula. Each <length-percentage> pair specifies a vertex of the polygon, as a horizontal and vertical offset from the left and top edges of the reference box. The UA must close a polygon by connecting the last vertex with the first vertex of the list.",
           "href": "https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-polygon",
           "type": "function",
-          "value": "polygon( <'fill-rule'>? , [<length-percentage> <length-percentage>]# )"
+          "value": "polygon( <'fill-rule'>? [ round <length> ]? , [<length-percentage> <length-percentage>]# )"
         },
         {
           "name": "path()",
-          "prose": "The <'fill-rule'> specifies the filling rule used to determine the interior Defaults to nonzero if omitted. The <string> represents an SVG Path data string. A path data string that does not conform to the to the grammar and parsing rules of SVG 1.1, or that does conform but defines an empty path, is invalid and causes the entire path() to be invalid. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1. The UA must close a path with an implicit closepath command (\"z\" or \"Z\") if it is not present in the string for properties that require a closed loop (such as shape-outside and clip-path).",
+          "prose": "The <'fill-rule'> specifies the filling rule used to determine the interior. Defaults to nonzero if omitted, unless the function is being used in a context such as SVG shapes where the fill-rule property is relevant. In that case an omitted value will use the computed value of the fill-rule property. The <string> represents an SVG Path data string. A path data string that does not conform to the to the grammar and parsing rules of SVG 1.1, or that does conform but defines an empty path, is invalid and causes the entire path() to be invalid. The initial position is defined by the first “move to” argument in the path string. For the initial direction follow SVG 1.1. The UA must close a path with an implicit closepath command (\"z\" or \"Z\") if it is not present in the string for properties that require a closed loop (such as shape-outside and clip-path).",
           "href": "https://drafts.csswg.org/css-shapes-1/#funcdef-basic-shape-path",
           "type": "function",
           "value": "path( <'fill-rule'>? , <string> )"

package/css-text-4.json

@@ -461,7 +461,7 @@
     {
       "name": "text-wrap-style",
       "href": "https://drafts.csswg.org/css-text-4/#propdef-text-wrap-style",
-      "value": "auto | balance | stable | pretty",
+      "value": "auto | balance | stable | pretty | avoid-orphans",
       "initial": "auto",
       "appliesTo": "block containers hat establish an inline formatting context",
       "inherited": "yes",
@@ -493,10 +493,17 @@
         },
         {
           "name": "pretty",
-          "prose": "Specifies the UA should bias for better layout over speed, and is expected to consider multiple lines, when making break decisions. Otherwise equivalent to auto,",
+          "prose": "Specifies the UA should bias for better layout over speed, and is expected to consider multiple lines when making break decisions. Otherwise equivalent to auto. The user agent may among other things attempt to avoid excessively short last lines, similarly to avoid-orphans, but it should also improve the layout in additional ways. The precise set of improvements is user agent dependent, and may include things such as: reducing the variation in length between lines; avoiding typographic rivers; prioritizing different classes of soft wrap opportunities, hyphenation opportunities, or justification opportunities; avoiding hyphenation on too many consecutive lines… The necessary computations may be expensive, especially when applied to large amounts of text. Authors are encouraged to assess the impact on performance when using text-wrap-style: pretty, and possibly use it selectively where it matters most.",
           "href": "https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-pretty",
           "type": "value",
           "value": "pretty"
+        },
+        {
+          "name": "avoid-orphans",
+          "prose": "Specifies the UA should avoid excessively short last lines, and is expected to consider more than one line when making break decisions (for example, to avoid \"fixing\" an orphan by making the previous line too short). The user agent may decide against improving the last line when it would make some prior line(s) substantially unbalanced. The user agent should not attempt to improve other aspects of the layout beyond what auto if those improvements come at a significant performance cost. For instance, with the given line length, the following test would be wrapped with a single word on the last line, which could be judged too short. ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν. Applying text-wrap-style: avoid-orphans could yield something like this instead, which is arguably more pleasing: ἄνδρα μοι ἔννεπε, μοῦσα, πολύτροπον, ὃς μάλα πολλὰ πλάγχθη, ἐπεὶ Τροίης ἱερὸν πτολίεθρον ἔπερσεν. However, the following fragment is more vexing: Circumnavigating the Mississippi river An attempt to make the last line less short by wrapping the previous line earlier would result in the following: Circumnavigating the Mississippi river While the last line would indeed no longer be short, the penultimate line would be unsightly. In such cases, user agents are expected to prefer the first rendering despite text-wrap-style: avoid-orphans being set.",
+          "href": "https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-avoid-orphans",
+          "type": "value",
+          "value": "avoid-orphans"
         }
       ],
       "styleDeclaration": [

package/css-ui.json

@@ -629,7 +629,7 @@
     {
       "name": "appearance",
       "href": "https://drafts.csswg.org/css-ui-4/#propdef-appearance",
-      "value": "none | auto | <compat-auto> | <compat-special>",
+      "value": "none | auto | base | <compat-auto> | <compat-special>",
       "initial": "none",
       "appliesTo": "all elements",
       "inherited": "no",
@@ -652,6 +652,13 @@
           "type": "value",
           "value": "auto"
         },
+        {
+          "name": "base",
+          "prose": "The effect of base depends on the element it is applied to:",
+          "href": "https://drafts.csswg.org/css-ui-4/#valdef-appearance-base",
+          "type": "value",
+          "value": "base"
+        },
         {
           "name": "<compat-auto>",
           "value": "searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button",

package/css-values-5.json

@@ -25,7 +25,7 @@
         },
         {
           "name": "allow-keywords",
-          "prose": "Two values can be interpolated if one of them is an <intrinsic-size-keyword> and the other is a <length-percentage>. This is done by treating the <intrinsic-size-keyword> keyword as though it is calc-size(keyword, size) and applying the rules in § 9.3 Interpolating calc-size(). In other cases, an <intrinsic-size-keyword> still cannot be interpolated.",
+          "prose": "Two values can be interpolated if one of them is an <intrinsic-size-keyword> and the other is a <length-percentage>. This is done by treating the <intrinsic-size-keyword> keyword as though it is calc-size(keyword, size) and applying the rules in § 10.3 Interpolating calc-size(). In other cases, an <intrinsic-size-keyword> still cannot be interpolated.",
           "href": "https://drafts.csswg.org/css-values-5/#valdef-interpolate-size-allow-keywords",
           "type": "value",
           "value": "allow-keywords"
@@ -155,6 +155,131 @@
         }
       ]
     },
+    {
+      "name": "<position>",
+      "prose": "The <position> value specifies the position of an alignment subject (e.g. a background image) inside an alignment container (e.g. its background positioning area) as a pair of offsets between the specified edges (defaulting to the left and top). Its syntax is:",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-position",
+      "type": "type",
+      "value": "<position-one> | <position-two> | <position-four>",
+      "values": [
+        {
+          "name": "<length-percentage>",
+          "prose": "A <length-percentage> value specifies the size of the offset between the specified edges of the alignment subject and alignment container. For example, for background-position: 2cm 1cm, the top left corner of the background image is placed 2cm to the right and 1cm below the top left corner of the background positioning area. A <percentage> for the horizontal offset is relative to (width of alignment container - width of alignment subject). A <percentage> for the vertical offset is relative to (height of alignment container - height of alignment subject). For example, with a value pair of 0% 0%, the upper left corner of the alignment subject is aligned with the upper left corner of the alignment container A value pair of 100% 100% places the lower right corner of the alignment subject in the lower right corner of the alignment container. With a value pair of 75% 50%, the point 75% across and 50% down the alignment subject is to be placed at the point 75% across and 50% down the alignment container. Diagram of the meaning of background-position: 75% 50%.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-length-percentage",
+          "type": "value",
+          "value": "<length-percentage>"
+        },
+        {
+          "name": "top",
+          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-top",
+          "type": "value",
+          "value": "top"
+        },
+        {
+          "name": "right",
+          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-right",
+          "type": "value",
+          "value": "right"
+        },
+        {
+          "name": "bottom",
+          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-bottom",
+          "type": "value",
+          "value": "bottom"
+        },
+        {
+          "name": "left",
+          "prose": "Offsets the top/left/right/bottom edges (respectively) of the alignment subject and alignment container by the specified amount (defaulting to 0%) in the corresponding axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-left",
+          "type": "value",
+          "value": "left"
+        },
+        {
+          "name": "y-start",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the [=y-axis|y/x axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-y-start",
+          "type": "value",
+          "value": "y-start"
+        },
+        {
+          "name": "y-end",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the [=y-axis|y/x axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-y-end",
+          "type": "value",
+          "value": "y-end"
+        },
+        {
+          "name": "x-start",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the [=y-axis|y/x axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-x-start",
+          "type": "value",
+          "value": "x-start"
+        },
+        {
+          "name": "x-end",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the [=y-axis|y/x axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-x-end",
+          "type": "value",
+          "value": "x-end"
+        },
+        {
+          "name": "block-start",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-block-start",
+          "type": "value",
+          "value": "block-start"
+        },
+        {
+          "name": "block-end",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-block-end",
+          "type": "value",
+          "value": "block-end"
+        },
+        {
+          "name": "inline-start",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-inline-start",
+          "type": "value",
+          "value": "inline-start"
+        },
+        {
+          "name": "inline-end",
+          "prose": "Computes the same as the physical edge keyword corresponding to the start/end side in the block/inline axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-inline-end",
+          "type": "value",
+          "value": "inline-end"
+        },
+        {
+          "name": "center",
+          "prose": "Computes to a 50% offset in the corresponding axis.",
+          "href": "https://drafts.csswg.org/css-values-5/#valdef-position-center",
+          "type": "value",
+          "value": "center"
+        }
+      ]
+    },
+    {
+      "name": "<position-one>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-one",
+      "type": "type",
+      "value": "[ left | center | right | top | bottom | x-start | x-end | y-start | y-end | block-start | block-end | inline-start | inline-end | <length-percentage> ]"
+    },
+    {
+      "name": "<position-two>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-two",
+      "type": "type",
+      "value": "[ [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] | [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] | [ block-start | center | block-end ] && [ inline-start | center | inline-end ] | [ start | center | end ]{2} ]"
+    },
+    {
+      "name": "<position-four>",
+      "href": "https://drafts.csswg.org/css-values-5/#typedef-position-four",
+      "type": "type",
+      "value": "[ [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] | [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] | [ [ start | end ] <length-percentage> ]{2} ]"
+    },
     {
       "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). The argument calculations can resolve to any <number>, <dimension>, or <percentage>, but must have a consistent type or else the function is invalid. The result will be a <number>, made consistent with the consistent type of the arguments.",
@@ -196,7 +321,7 @@
       "prose": "The <progress> value type represents the mix progress value in a mix notation, and ultimately resolves to a percentage. It can, however, draw that percentage value from sources such as media queries and animation timelines, and can also convert it through an easing function before using it for interpolation.",
       "href": "https://drafts.csswg.org/css-values-5/#typedef-progress",
       "type": "type",
-      "value": "[ <percentage> | <number> | <'animation-timeline'> ]? && by <easing-function>",
+      "value": "[ <percentage> | <number> | <'animation-timeline'> ] && [ by <easing-function> ]?",
       "values": [
         {
           "name": "<percentage-token>",
@@ -473,7 +598,7 @@
     {
       "msg": "Missing definition",
       "name": "<color-mix()>",
-      "value": "color-mix( <progress> && <color-interpolation-method>?, <color>, <color> ) | color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )"
+      "value": "color-mix( [ <progress> && <color-interpolation-method>? ] , <color>, <color> ) | color-mix( <color-interpolation-method>, [<color> && <percentage [0,100]>?]#{2} )"
     },
     {
       "msg": "Missing definition",

package/package.json

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

package/selectors-5.json

@@ -13,8 +13,8 @@
     },
     {
       "name": ":state()",
-      "prose": "The :state() pseudo-class takes a case-sensitive argument and matches custom elements whose exposed custom states include the argument.",
-      "href": "https://drafts.csswg.org/selectors-5/#selectordef-state"
+      "value": ":state( <ident> )",
+      "href": "https://drafts.csswg.org/selectors-5/#state-pseudo"
     }
   ],
   "values": []

package/webxr-dom-overlays.json

@@ -0,0 +1,16 @@
+{
+  "spec": {
+    "title": "WebXR DOM Overlays Module",
+    "url": "https://immersive-web.github.io/dom-overlays/"
+  },
+  "properties": [],
+  "atrules": [],
+  "selectors": [
+    {
+      "name": ":xr-overlay",
+      "prose": "The :xr-overlay pseudo-class MUST match the overlay element for the duration of an immersive session using a DOM Overlay.",
+      "href": "https://immersive-web.github.io/dom-overlays/#selectordef-xr-overlay"
+    }
+  ],
+  "values": []
+}