@webref/css 6.21.2 → 6.23.0

package/CSS.json

@@ -291,38 +291,46 @@
   "selectors": [
     {
       "name": ":lang",
-      "href": "https://drafts.csswg.org/css2/#selectordef-lang"
+      "href": "https://drafts.csswg.org/css2/#selectordef-lang",
+      "value": ":lang"
     },
     {
       "name": ":first-line",
-      "href": "https://drafts.csswg.org/css2/#selectordef-first-line"
+      "href": "https://drafts.csswg.org/css2/#selectordef-first-line",
+      "value": ":first-line"
     },
     {
       "name": ":first-letter",
-      "href": "https://drafts.csswg.org/css2/#selectordef-first-letter"
+      "href": "https://drafts.csswg.org/css2/#selectordef-first-letter",
+      "value": ":first-letter"
     },
     {
       "name": ":before",
-      "href": "https://drafts.csswg.org/css2/#selectordef-before"
+      "href": "https://drafts.csswg.org/css2/#selectordef-before",
+      "value": ":before"
     },
     {
       "name": ":after",
-      "href": "https://drafts.csswg.org/css2/#selectordef-after"
+      "href": "https://drafts.csswg.org/css2/#selectordef-after",
+      "value": ":after"
     },
     {
       "name": ":left",
       "prose": "All pages are automatically classified by user agents into either the :left or :right pseudo-class. Whether the first page of a document is :left or :right depends on the major writing direction of the root element. For example, the first page of a document with a left-to-right major writing direction would be a :right page, and the first page of a document with a right-to-left major writing direction would be a :left page. To explicitly force a document to begin printing on a left or right page, authors can insert a page break before the first generated box.",
-      "href": "https://drafts.csswg.org/css2/#selectordef-left"
+      "href": "https://drafts.csswg.org/css2/#selectordef-left",
+      "value": ":left"
     },
     {
       "name": ":right",
       "prose": "All pages are automatically classified by user agents into either the :left or :right pseudo-class. Whether the first page of a document is :left or :right depends on the major writing direction of the root element. For example, the first page of a document with a left-to-right major writing direction would be a :right page, and the first page of a document with a right-to-left major writing direction would be a :left page. To explicitly force a document to begin printing on a left or right page, authors can insert a page break before the first generated box.",
-      "href": "https://drafts.csswg.org/css2/#selectordef-right"
+      "href": "https://drafts.csswg.org/css2/#selectordef-right",
+      "value": ":right"
     },
     {
       "name": ":first",
       "prose": "Authors may also specify style for the first page of a document with the :first pseudo-class:",
-      "href": "https://drafts.csswg.org/css2/#selectordef-first"
+      "href": "https://drafts.csswg.org/css2/#selectordef-first",
+      "value": ":first"
     }
   ],
   "values": [

package/README.md

@@ -41,6 +41,6 @@ for (const [shortname, data] of Object.entries(parsedFiles)) {
 
 The following guarantees are provided by this package:
 - All values in CSS files can be parsed by the version of [CSSTree](https://github.com/csstree/csstree) used in `peerDependencies` in `package.json`.
-- No duplicate definitions of CSS properties provided that CSS extracts of [delta specs](https://github.com/w3c/browser-specs/#seriescomposition) are not taken into account (such extracts end with `-n.json`, where `n` is a level number).
+- No duplicate definitions of entries in CSS files provided that CSS extracts of [delta specs](https://github.com/w3c/browser-specs/#seriescomposition) are not taken into account (such extracts end with `-n.json`, where `n` is a level number). The term "entries" includes CSS properties, at-rules, selectors, types and functions. Please note that specs may still extend entries defined elsewhere (to define new values for CSS properties, or new selectors for at-rules).
 - CSS extracts contain a base definition of all CSS properties that get extended by other CSS property definitions (those for which `newValues` is set).
 - All entries in CSS files that do not extend a base definition link back to their actual definition in the spec. In other words, all entries under `properties[]`, `properties[].values[]`, `selectors[]`, `atrules[]` and `values[]` have an `href` key that contains an absolute URL with fragment, except properties that that have a `newValues` key, at-rules that neither have a `prose` nor a `value` key, and definitions of a [delta spec](https://github.com/w3c/browser-specs/#seriescomposition) that completely override a definition in a previous level.

package/css-borders.json

@@ -971,10 +971,10 @@
       "initial": "round",
       "appliesTo": "all elements where border-radius can apply",
       "inherited": "no",
-      "percentages": "n/a",
-      "computedValue": "as specified",
-      "canonicalOrder": "per grammar",
+      "percentages": "see individual properties",
+      "computedValue": "see individual properties",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-shape",
         "cornerShape"
@@ -1119,14 +1119,14 @@
     {
       "name": "corner-top-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-top-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-top-shape",
         "cornerTopShape"
@@ -1135,14 +1135,14 @@
     {
       "name": "corner-right-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-right-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-right-shape",
         "cornerRightShape"
@@ -1151,14 +1151,14 @@
     {
       "name": "corner-bottom-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-bottom-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-bottom-shape",
         "cornerBottomShape"
@@ -1167,14 +1167,14 @@
     {
       "name": "corner-left-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-left-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-left-shape",
         "cornerLeftShape"
@@ -1183,14 +1183,14 @@
     {
       "name": "corner-block-start-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-block-start-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-block-start-shape",
         "cornerBlockStartShape"
@@ -1199,14 +1199,14 @@
     {
       "name": "corner-block-end-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-block-end-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-block-end-shape",
         "cornerBlockEndShape"
@@ -1215,14 +1215,14 @@
     {
       "name": "corner-inline-start-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-inline-start-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-inline-start-shape",
         "cornerInlineStartShape"
@@ -1231,14 +1231,14 @@
     {
       "name": "corner-inline-end-shape",
       "href": "https://drafts.csswg.org/css-borders-4/#propdef-corner-inline-end-shape",
-      "value": "<corner-shape-value>",
-      "initial": "round",
-      "appliesTo": "all elements where border-radius can apply",
-      "inherited": "no",
-      "percentages": "n/a",
+      "value": "<corner-shape-value>{1,2}",
+      "initial": "see individual properties",
+      "appliesTo": "see individual properties",
+      "inherited": "see individual properties",
+      "percentages": "see individual properties",
       "computedValue": "see individual properties",
-      "canonicalOrder": "per grammar",
       "animationType": "see individual properties",
+      "canonicalOrder": "per grammar",
       "styleDeclaration": [
         "corner-inline-end-shape",
         "cornerInlineEndShape"
@@ -1574,57 +1574,63 @@
       "name": "<corner-shape-value>",
       "href": "https://drafts.csswg.org/css-borders-4/#typedef-corner-shape-value",
       "type": "type",
-      "value": "round | scoop | bevel | notch | square | squircle | superellipse(<number [-∞,∞]> | infinity | -infinity)",
+      "value": "round | scoop | bevel | notch | square | squircle | <superellipse()>",
       "values": [
         {
           "name": "round",
-          "prose": "Border radii define a convex elliptical curve at the corner. Equivalent to superellipse(1).",
+          "prose": "The corner shape is a quarter of a convex ellipse. Equivalent to superellipse(1).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-round",
           "type": "value",
           "value": "round"
         },
         {
-          "name": "scoop",
-          "prose": "Border radii define a concave elliptical curve at the corner. Equivalent to superellipse(-1).",
-          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-scoop",
+          "name": "squircle",
+          "prose": "The corner shape is a quarter of a \"squircle\", a convex curve between round and square. Equivalent to superellipse(2).",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-squircle",
           "type": "value",
-          "value": "scoop"
+          "value": "squircle"
+        },
+        {
+          "name": "square",
+          "prose": "The corner shape is a convex 90deg angle. Equivalent to superellipse(infinity).",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-square",
+          "type": "value",
+          "value": "square"
         },
         {
           "name": "bevel",
-          "prose": "Border radii define a diagonal slice at the corner. Equivalent to superellipse(0).",
+          "prose": "The corner shape is a straight diagonal line, neither convex nor concave. Equivalent to superellipse(0).",
           "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-bevel",
           "type": "value",
           "value": "bevel"
         },
         {
-          "name": "notch",
-          "prose": "Border radii define a concave 90deg angle at the corner. Equivalent to superellipse(-infinity).",
-          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-notch",
+          "name": "scoop",
+          "prose": "The corner shape is a concave quarter-ellipse. Equivalent to superellipse(-1).",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-scoop",
           "type": "value",
-          "value": "notch"
+          "value": "scoop"
         },
         {
-          "name": "square",
-          "prose": "Border radii define a convex 90deg angle at the corner. This would have the same visual effect as a border-radius of 0. This is different from having a border-radius of 0 when animating. Equivalent to superellipse(infinity).",
-          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-square",
+          "name": "notch",
+          "prose": "The corner shape is a concave 90deg angle. Equivalent to superellipse(-infinity).",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-notch",
           "type": "value",
-          "value": "square"
+          "value": "notch"
         },
         {
-          "name": "squircle",
-          "prose": "Border radii define a convex curve between an ellipse and an convex angle, equivalent to superellipse(2).",
-          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-squircle",
-          "type": "value",
-          "value": "squircle"
+          "name": "superellipse()",
+          "value": "superellipse()",
+          "href": "https://drafts.csswg.org/css-borders-4/#valdef-corner-shape-value-superellipse-k",
+          "type": "value"
         }
       ]
     },
     {
       "name": "superellipse()",
-      "value": "superellipse( <number> | infinity | -infinity )",
       "href": "https://drafts.csswg.org/css-borders-4/#funcdef-superellipse",
-      "type": "function"
+      "type": "function",
+      "value": "superellipse(<number [-∞,∞]> | infinity | -infinity)"
     },
     {
       "name": "<spread-shadow>",

package/css-color-5.json

@@ -80,12 +80,6 @@
       "type": "type",
       "value": "<hex-color> | <color-function> | <named-color> | <color-mix()> | transparent"
     },
-    {
-      "name": "<color-function>",
-      "href": "https://drafts.csswg.org/css-color-5/#typedef-color-function",
-      "type": "type",
-      "value": "<rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <oklab()> | <oklch()> | <color()>"
-    },
     {
       "name": "color-mix()",
       "href": "https://drafts.csswg.org/css-color-5/#funcdef-color-mix",
@@ -371,12 +365,6 @@
       "type": "type",
       "value": "<predefined-rgb> [ <number> | <percentage> | none ]{3}"
     },
-    {
-      "name": "<predefined-rgb>",
-      "href": "https://drafts.csswg.org/css-color-5/#typedef-predefined-rgb",
-      "type": "type",
-      "value": "srgb | srgb-linear | display-p3 | a98-rgb | prophoto-rgb | rec2020"
-    },
     {
       "name": "<xyz-params>",
       "href": "https://drafts.csswg.org/css-color-5/#typedef-xyz-params",

package/css-color-hdr.json

@@ -173,12 +173,6 @@
       "type": "function",
       "value": "color-hdr([ <color> && <number [0,∞]>? ]#{2})"
     },
-    {
-      "name": "color()",
-      "prose": "The color() function allows a color to be specified in a particular, given color space (rather than the implicit sRGB color space that most of the other color functions operate in).",
-      "href": "https://drafts.csswg.org/css-color-hdr-1/#funcdef-color",
-      "type": "function"
-    },
     {
       "name": "<predefined-rgb>",
       "href": "https://drafts.csswg.org/css-color-hdr-1/#typedef-predefined-rgb",

package/css-color.json

@@ -1455,6 +1455,77 @@
         }
       ]
     },
+    {
+      "name": "color()",
+      "href": "https://drafts.csswg.org/css-color-4/#funcdef-color",
+      "type": "function",
+      "value": "color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )",
+      "values": [
+        {
+          "name": "srgb",
+          "prose": "The srgb [SRGB] color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65. [SRGB] specifies two viewing conditions, encoding and typical. The [ICC] recommends using the encoding conditions for color conversion and for optimal viewing, which are the values in the table below. sRGB is the default color space for CSS, used for all the legacy color functions. It has the following characteristics: x y Red chromaticity 0.640 0.330 Green chromaticity 0.300 0.600 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function see below White luminance 80.0 cd/m Black luminance 0.20 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs <= 0.04045) { cl = c / 12.92; } else { cl = sign * (Math.pow((abs + 0.055) / 1.055, 2.4)); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the sRGB color space in LCH. The primaries and secondaries are shown.",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-srgb",
+          "type": "value",
+          "value": "srgb"
+        },
+        {
+          "name": "srgb-linear",
+          "prose": "The srgb-linear [SRGB] color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1]. The whitepoint is D65. It has the following characteristics: x y Red chromaticity 0.640 0.330 Green chromaticity 0.300 0.600 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function unity, see below White luminance 80.0 cd/m Black luminance 0.20 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 cl = c; c is the red, green or blue component. cl is the corresponding linear-light component, which is identical. To avoid banding artifacts, a higher precision is required for srgb-linear than for srgb. For example, these are the same color color(srgb 0.691 0.139 0.259) color(srgb-linear 0.435 0.017 0.055)",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear",
+          "type": "value",
+          "value": "srgb-linear"
+        },
+        {
+          "name": "display-p3",
+          "prose": "The display-p3 [Display-P3] color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1]. It uses the same primary chromaticities as [DCI-P3], but with a D65 whitepoint, and the same transfer curve as sRGB. Modern displays, TVs, laptop screens and phone screens are able to display all, or nearly all, of the display-p3 gamut. It has the following characteristics: x y Red chromaticity 0.680 0.320 Green chromaticity 0.265 0.690 Blue chromaticity 0.150 0.060 White chromaticity D65 Transfer function same as srgb White luminance 80.0 cd/m Black luminance 0.80 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 Visualization of the P3 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. P3 primaries have higher Chroma.",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-display-p3",
+          "type": "value",
+          "value": "display-p3"
+        },
+        {
+          "name": "a98-rgb",
+          "prose": "The a98-rgb color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function, close to but not exactly 1/2.2. It has the following characteristics: x y Red chromaticity 0.6400 0.3300 Green chromaticity 0.2100 0.7100 Blue chromaticity 0.1500 0.0600 White chromaticity D65 Transfer function 256/563 White luminance 160.0 cd/m Black luminance 0.5557 cd/m Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 Visualization of the A98 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. a98 primaries have higher Chroma, especially the yellow, green and cyan.",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb",
+          "type": "value",
+          "value": "a98-rgb"
+        },
+        {
+          "name": "prophoto-rgb",
+          "prose": "The prophoto-rgb color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1]. The transfer curve is a gamma function with a value of 1/1.8, and a small linear portion near black. The white point is D50, the same as is used by CIE Lab. Thus, conversion to CIE Lab does not require the chromatic adaptation step. The ProPhoto RGB space uses hyper-saturated, non physically realizable primaries. These were chosen to allow a wide color gamut and in particular, to minimize hue shifts under tonal manipulation. It is often used in digital photography as a wide gamut color space for the archival version of photographic images. The prophoto-rgb color space allows CSS to specify colors that will match colors in such images having the same RGB values. The ProPhoto RGB space was originally developed by Kodak and is described in [Wolfe]. It was standardized by ISO as [ROMM],[ROMM-RGB]. The white luminance is given as a range, and the viewing flare (and thus, the black luminance) is 0.5% to 1.0% of this. It has the following characteristics: x y Red chromaticity 0.734699 0.265301 Green chromaticity 0.159597 0.840403 Blue chromaticity 0.036598 0.000105 White chromaticity D50 Transfer function see below White luminance 160.0 to 640.0 cd/m Black luminance See text Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 const E = 16/512; let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs <= E) { cl = c / 16; } else { cl = sign * Math.pow(c, 1.8); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the prophoto-rgb color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. prophoto-rgb primaries and secondaries have much higher Chroma, but much of this ultrawide gamut does not correspond to physically realizable colors.",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb",
+          "type": "value",
+          "value": "prophoto-rgb"
+        },
+        {
+          "name": "rec2020",
+          "prose": "The rec2020 [Rec.2020] color space accepts three numeric parameters, representing the red, green, and blue components of the color. In-gamut colors have all three components in the range [0, 1], (\"full-range\", in video terminology). ITU Reference 2020 is used for Ultra High Definition, 4k and 8k television. The primaries are physically realizable, but with difficulty as they lie very close to the spectral locus. Current displays are unable to reproduce the full gamut of rec2020. Coverage is expected to increase over time as displays improve. It has the following characteristics: x y Red chromaticity 0.708 0.292 Green chromaticity 0.170 0.797 Blue chromaticity 0.131 0.046 White chromaticity D65 Transfer function see below, from [Rec.2020] table 4 Image state display-referred Percentages Allowed for R, G and B Percent reference range for R,G,B: 0% = 0.0, 100% = 1.0 const α = 1.09929682680944 ; const β = 0.018053968510807; let sign = c < 0? -1 : 1; let abs = Math.abs(c); if (abs < β * 4.5 ) { cl = c / 4.5; } else { cl = sign * (Math.pow((abs + α -1 ) / α, 1/0.45)); } c is the gamma-encoded red, green or blue component. cl is the corresponding linear-light component. Visualization of the rec2020 color space in LCH. The primaries and secondaries are shown (but in sRGB, not in the correct colors). For comparison, the sRGB primaries and secondaries are also shown, as dashed circles. rec2020 primaries have much higher Chroma.",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-rec2020",
+          "type": "value",
+          "value": "rec2020"
+        },
+        {
+          "name": "xyz-d50",
+          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; colors where Y is greater than 1.0 represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452) These colors are exactly equivalent, and represent white: #FFFFFF color(xyz-d50 0.9643 1 0.8251) color(xyz-d65 0.9505 1 1.089)",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz-d50",
+          "type": "value",
+          "value": "xyz-d50"
+        },
+        {
+          "name": "xyz-d65",
+          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; colors where Y is greater than 1.0 represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452) These colors are exactly equivalent, and represent white: #FFFFFF color(xyz-d50 0.9643 1 0.8251) color(xyz-d65 0.9505 1 1.089)",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz-d65",
+          "type": "value",
+          "value": "xyz-d65"
+        },
+        {
+          "name": "xyz",
+          "prose": "The xyz color space accepts three numeric parameters, representing the X,Y and Z values. It represents the CIE XYZ [COLORIMETRY] color space, scaled such that diffuse white has a luminance (Y) of 1.0. and, if necessary, chromatically adapted to the reference white. The reference white for xyz-d50 is D50, while the reference white for xyz-d65 and xyz is D65. Values greater than 1.0/100% are allowed and must not be clamped; colors where Y is greater than 1.0 represent colors brighter than diffuse white. Values less than 0/0% are uncommon, but can occur as a result of chromatic adaptation, and likewise must not be clamped. It has the following characteristics: Percentages Allowed for X,Y,Z Percent reference range for X,Y,Z: 0% = 0.0, 100% = 1.0 These are exactly equivalent: #7654CD rgb(46.27% 32.94% 80.39%) lab(44.36% 36.05 -58.99) color(xyz-d50 0.2005 0.14089 0.4472) color(xyz-d65 0.21661 0.14602 0.59452) These colors are exactly equivalent, and represent white: #FFFFFF color(xyz-d50 0.9643 1 0.8251) color(xyz-d65 0.9505 1 1.089)",
+          "href": "https://drafts.csswg.org/css-color-4/#valdef-color-xyz",
+          "type": "value",
+          "value": "xyz"
+        }
+      ]
+    },
     {
       "name": "<colorspace-params>",
       "href": "https://drafts.csswg.org/css-color-4/#typedef-colorspace-params",

package/css-forms.json

@@ -157,92 +157,110 @@
     {
       "name": "::picker-icon",
       "prose": "The ::picker-icon pseudo-element represents the part of the control that represents the icon denoting the presence of the picker. It is only generated when the originating element has basic appearance and if it opens a picker. It is a fully styleable pseudo-element and inherits from its originating element.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-picker-icon"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-picker-icon",
+      "value": "::picker-icon"
     },
     {
       "name": "::file-selector-button",
       "prose": "The ::file-selector-button pseudo-element represents the button used to open a file picker, if the UA renders such a button.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-file-selector-button"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-file-selector-button",
+      "value": "::file-selector-button"
     },
     {
       "name": "::checkmark",
       "prose": "The ::checkmark pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-checkmark"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-checkmark",
+      "value": "::checkmark"
     },
     {
       "name": "::slider-thumb",
       "prose": "The ::slider-thumb pseudo-element represents the portion that allows the user to adjust the progress of the control.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-thumb"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-thumb",
+      "value": "::slider-thumb"
     },
     {
       "name": "::slider-track",
       "prose": "The ::slider-track pseudo-element represents the portion containing both the progressed and unprogressed portions of the control.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-track"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-track",
+      "value": "::slider-track"
     },
     {
       "name": "::slider-fill",
       "prose": "The ::slider-fill pseudo-element represents the portion containing the progressed portion of the control. When the progress of control is indeterminate (like with <progress>), the user agent must give this portion an inline-size of zero.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-fill"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-slider-fill",
+      "value": "::slider-fill"
     },
     {
       "name": "::placeholder",
       "prose": "The ::placeholder pseudo-element represents the portion of the input that contains the placeholder text.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-placeholder"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-placeholder",
+      "value": "::placeholder"
     },
     {
       "name": "::field-text",
       "prose": "The ::field-text pseudo-element represents the portion of the input that contains the editable text.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-text"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-text",
+      "value": "::field-text"
     },
     {
       "name": "::clear-icon",
       "prose": "The ::clear-icon pseudo-element represents the portion of the input that allows the user to clear the input when clicked if provided by the user agent. With appearance: textfield, the user agent must not generate this part.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-clear-icon"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-clear-icon",
+      "value": "::clear-icon"
     },
     {
       "name": "::step-control",
       "prose": "The ::step-control pseudo-element represents the portion of a number input that contains the up and down buttons.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-control"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-control",
+      "value": "::step-control"
     },
     {
       "name": "::step-up",
       "prose": "The ::step-up pseudo-element represents the button that increments the value inside a number input when activated.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-up"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-up",
+      "value": "::step-up"
     },
     {
       "name": "::step-down",
       "prose": "The ::step-down pseudo-element represents the button that decrements the value inside a number input when activated.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-down"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-step-down",
+      "value": "::step-down"
     },
     {
       "name": "::field-component",
       "prose": "The ::field-component pseudo-element represents the portions of the control that contain the date/time component values.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-component"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-component",
+      "value": "::field-component"
     },
     {
       "name": "::field-separator",
       "prose": "The ::field-separator pseudo-element represents the portions of the control that separate the date/time component values if the user agent provides those portions.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-separator"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-field-separator",
+      "value": "::field-separator"
     },
     {
       "name": "::color-swatch",
       "prose": "The ::color-swatch pseudo-element represents the portion of the control that displays the chosen color value.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-color-swatch"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-color-swatch",
+      "value": "::color-swatch"
     },
     {
       "name": ":low-value",
       "prose": "The :low-value pseudo-class matches on a meter element when its value is under the value specified by the low HTML attribute.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-low-value"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-low-value",
+      "value": ":low-value"
     },
     {
       "name": ":high-value",
       "prose": "The :high-value pseudo-class matches on a meter element when its value is over the value specified by the high HTML attribute.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-high-value"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-high-value",
+      "value": ":high-value"
     },
     {
       "name": ":optimal-value",
       "prose": "The :optimal-value pseudo-class matches on a meter element when its value is in the range determined by the optimum / low / high HTML attributes.",
-      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-optimal-value"
+      "href": "https://drafts.csswg.org/css-forms-1/#selectordef-optimal-value",
+      "value": ":optimal-value"
     }
   ],
   "values": [

package/css-gcpm-4.json

@@ -31,17 +31,20 @@
     {
       "name": ":first-of-page",
       "prose": "Same as :nth-of-page(n), but where n = 1 (it is the first matched element on the page).",
-      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-first-of-page"
+      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-first-of-page",
+      "value": ":first-of-page"
     },
     {
       "name": ":last-of-page",
       "prose": "The element is the last matched element on the page.",
-      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-last-of-page"
+      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-last-of-page",
+      "value": ":last-of-page"
     },
     {
       "name": ":start-of-page",
       "prose": "The element is the first matched element on the page, and neither it nor its ancestors have any previous siblings that appear on the page.",
-      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-start-of-page"
+      "href": "https://drafts.csswg.org/css-gcpm-4/#selectordef-start-of-page",
+      "value": ":start-of-page"
     }
   ],
   "values": [