📦 Release @webref/css6@6.23.20

[github-actions]

⚠ NEVER add commits to this pull request.

🤖 This pull request was automatically created to facilitate human review of @webref/css6 changes triggered by curated data at 990c1ef.

🧐 Please review the diff below and version numbers. If all looks good, merge this pull request to release the changes to npm.

📦 Latest released @webref/css6 package was v6.23.19. Merging this pull request will release v6.23.20. Make sure that the bump is the right one for the changes.

✍ If any change needs to be made before release, do not add a commit to this pull request. Changes should rather be handled in a separate pull request and pushed to the main branch. You may leave this pull request open in the meantime, or close it. The pre-release job will automatically update this pull request or create a new one once the updates have made their way to the main branch.

🛈 The actual change introduced by this pull request is a version bump in packages/css6/package.json. You do not need to review that change. The bumped version is not the version that will be released when this pull request is merged, but rather the version that will be released next time.

IMPORTANT:
- Diff is too long to render in a PR description: 138484 characters
- First 60000 characters shown below
- Check the action log for the full diff

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/compositing.json packages/css6/compositing.json
--- webref/node_modules/@webref/css/compositing.json
+++ packages/css6/compositing.json
@@ -1,21 +1,21 @@
 {
   "spec": {
-    "title": "Compositing and Blending Level 2",
-    "url": "https://drafts.fxtf.org/compositing-2/"
+    "title": "Compositing and Blending Module Level 2",
+    "url": "https://drafts.csswg.org/compositing-2/"
   },
   "properties": [
     {
       "name": "mix-blend-mode",
-      "href": "https://drafts.fxtf.org/compositing-2/#propdef-mix-blend-mode",
-      "value": "<blend-mode> | plus-darker | plus-lighter",
+      "href": "https://drafts.csswg.org/compositing-2/#propdef-mix-blend-mode",
+      "value": "<blend-mode> | plus-lighter",
       "initial": "normal",
       "appliesTo": "All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
+      "animationType": "discrete",
       "media": "visual",
-      "animatable": "no",
       "styleDeclaration": [
         "mix-blend-mode",
         "mixBlendMode"
@@ -23,7 +23,7 @@
     },
     {
       "name": "isolation",
-      "href": "https://drafts.fxtf.org/compositing-2/#propdef-isolation",
+      "href": "https://drafts.csswg.org/compositing-2/#propdef-isolation",
       "value": "<isolation-mode>",
       "initial": "auto",
       "appliesTo": "All elements. In SVG, it applies to container elements, graphics elements and graphics referencing elements. [SVG11]",
@@ -31,24 +31,24 @@
       "percentages": "N/A",
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
+      "animationType": "discrete",
       "media": "visual",
-      "animatable": "no",
       "styleDeclaration": [
         "isolation"
       ]
     },
     {
       "name": "background-blend-mode",
-      "href": "https://drafts.fxtf.org/compositing-2/#propdef-background-blend-mode",
-      "value": "<mix-blend-mode>#",
+      "href": "https://drafts.csswg.org/compositing-2/#propdef-background-blend-mode",
+      "value": "<'mix-blend-mode'>#",
       "initial": "normal",
       "appliesTo": "All HTML elements",
       "inherited": "no",
       "percentages": "N/A",
       "computedValue": "as specified",
       "canonicalOrder": "per grammar",
+      "animationType": "discrete",
       "media": "visual",
-      "animatable": "no",
       "styleDeclaration": [
         "background-blend-mode",
         "backgroundBlendMode"
@@ -60,103 +60,103 @@
   "values": [
     {
       "name": "<blend-mode>",
-      "href": "https://drafts.fxtf.org/compositing-2/#ltblendmodegt",
+      "href": "https://drafts.csswg.org/compositing-2/#ltblendmodegt",
       "type": "type",
-      "value": "normal | multiply | screen | overlay | darken | lighten | color-dodge |color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity",
+      "value": "normal | darken | multiply | color-burn | lighten | screen | color-dodge | overlay | soft-light | hard-light | difference | exclusion | hue | saturation | color | luminosity",
       "values": [
         {
           "name": "normal",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-normal",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-normal",
           "type": "value",
           "value": "normal"
         },
         {
           "name": "multiply",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-multiply",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-multiply",
           "type": "value",
           "value": "multiply"
         },
         {
           "name": "screen",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-screen",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-screen",
           "type": "value",
           "value": "screen"
         },
         {
           "name": "overlay",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-overlay",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-overlay",
           "type": "value",
           "value": "overlay"
         },
         {
           "name": "darken",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-darken",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-darken",
           "type": "value",
           "value": "darken"
         },
         {
           "name": "lighten",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-lighten",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-lighten",
           "type": "value",
           "value": "lighten"
         },
         {
           "name": "color-dodge",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-color-dodge",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-color-dodge",
           "type": "value",
           "value": "color-dodge"
         },
         {
           "name": "color-burn",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-color-burn",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-color-burn",
           "type": "value",
           "value": "color-burn"
         },
         {
           "name": "hard-light",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-hard-light",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-hard-light",
           "type": "value",
           "value": "hard-light"
         },
         {
           "name": "soft-light",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-soft-light",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-soft-light",
           "type": "value",
           "value": "soft-light"
         },
         {
           "name": "difference",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-difference",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-difference",
           "type": "value",
           "value": "difference"
         },
         {
           "name": "exclusion",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-exclusion",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-exclusion",
           "type": "value",
           "value": "exclusion"
         },
         {
           "name": "hue",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-hue",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-hue",
           "type": "value",
           "value": "hue"
         },
         {
           "name": "saturation",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-saturation",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-saturation",
           "type": "value",
           "value": "saturation"
         },
         {
           "name": "color",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-color",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-color",
           "type": "value",
           "value": "color"
         },
         {
           "name": "luminosity",
-          "href": "https://drafts.fxtf.org/compositing-2/#valdef-blend-mode-luminosity",
+          "href": "https://drafts.csswg.org/compositing-2/#valdef-blend-mode-luminosity",
           "type": "value",
           "value": "luminosity"
         }
@@ -164,13 +164,13 @@
     },
     {
       "name": "<isolation-mode>",
-      "href": "https://drafts.fxtf.org/compositing-2/#isolated-propid",
+      "href": "https://drafts.csswg.org/compositing-2/#isolated-propid",
       "type": "type",
       "value": "auto | isolate"
     },
     {
       "name": "<composite-mode>",
-      "href": "https://drafts.fxtf.org/compositing-2/#compositemode",
+      "href": "https://drafts.csswg.org/compositing-2/#compositemode",
       "type": "type",
       "value": "clear | copy | source-over | destination-over | source-in | destination-in | source-out | destination-out | source-atop | destination-atop | xor | lighter | plus-darker | plus-lighter"
     }

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/css-anchor-position.json packages/css6/css-anchor-position.json
--- webref/node_modules/@webref/css/css-anchor-position.json
+++ packages/css6/css-anchor-position.json
@@ -169,6 +169,7 @@
     },
     {
       "name": "justify-self",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-justify-self",
       "newValues": "anchor-center",
       "values": [
         {
@@ -186,6 +187,7 @@
     },
     {
       "name": "align-self",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-align-self",
       "newValues": "anchor-center",
       "values": [
         {
@@ -203,6 +205,7 @@
     },
     {
       "name": "justify-items",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-justify-items",
       "newValues": "anchor-center",
       "values": [
         {
@@ -220,6 +223,7 @@
     },
     {
       "name": "align-items",
+      "href": "https://drafts.csswg.org/css-anchor-position-1/#propdef-align-items",
       "newValues": "anchor-center",
       "values": [
         {

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/css-borders.json packages/css6/css-borders.json
--- webref/node_modules/@webref/css/css-borders.json
+++ packages/css6/css-borders.json
@@ -452,7 +452,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -469,7 +469,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -486,7 +486,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -503,7 +503,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -520,7 +520,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -537,7 +537,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -554,7 +554,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",
@@ -571,7 +571,7 @@
       "appliesTo": "all elements except ruby base containers and ruby annotation containers",
       "inherited": "no",
       "percentages": "N/A",
-      "computedValue": "absolute length, snapped as a border width; zero if the border style is none or hidden",
+      "computedValue": "absolute length, snapped as a border width",
       "canonicalOrder": "per grammar",
       "animationType": "by computed value",
       "logicalPropertyGroup": "border-width",

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/css-forms.json packages/css6/css-forms.json
--- webref/node_modules/@webref/css/css-forms.json
+++ packages/css6/css-forms.json
@@ -10,7 +10,7 @@
       "values": [
         {
           "name": "base",
-          "prose": "When applied on a form control, base puts that control in the basic appearance state.",
+          "prose": "1. Introduction This section is non-normative. User agents have long provided non-standard ways of styling form controls. However, all of these controls are implemented inconsistently across user agents, creating unnecessary friction for authors. This module aims to define a set of form control parts in enough detail that they can be used interoperably. It also defines some new ways of customizing form controls, covering common use cases that were previously only possible by implementing custom controls from scratch, which was a lot of work, hard to get right, and often broke either accessibility or platform conventions. 2. Opting Into Basic Appearance: the appearance: base value Move definition of appearance here. Name: appearance New values: base When applied on a form control, base puts that control in the basic appearance state. A control that has basic appearance is consistently styleable using standard CSS and the pseudo-elements defined below, and applies overridable default styles that are consistent across UAs. When a control is in that state, the user agent applies styles from the Appendix A: Basic Appearance User Agent Stylesheet to that control. The user agent must also enable the pseudo-elements defined by § 4 Pseudo-Elements. These pseudo-elements (excluding ::picker()) always inherit appearance from their originating element. The user agent may implement this using an appearance: inherit !important declaration. NOTE: The inheritance prevents authors from mixing native and non-native parts for the same control. 2.1. Design Principles for the Basic Appearance The following design principles apply to the design of the basic appearance stylesheet for form controls, in approximate order of descending importance: The styles are identical in every user agent. The controls are recognizable and usable on their own without additional styles. The controls target accessiblity out of the box, ideally passing WCAG 2.2 AA standards. NOTE: Authors may need to do extra adjustments to ensure their controls are accessible depending on any customizations as well as the context the form control is placed into. The basic appearance does not prevent adjustments by the author that are inaccessible. The styles are consistent across controls… …in look & feel. …in how they are defined in code. …in sizing and interaction. The styles are easily adapted to the website’s branding, without needing complex reset stylesheets: They use minimal code and are easy to override. They do not have a strong voice & tone of their own, and are visually as simple as possible. They inherit page styles rather than define new styles whenever possible. They are resilient to adjustments… …when changed themselves (e.g. changing font, border, layout). …when put in context (e.g. ready to be flex or grid children). They are comprehensive: Covering all states for each control. Supporting all writing modes and color schemes. For HTML form controls specifically, these principles are applied through the required user agent stylesheet defined in Appendix A: Basic Appearance User Agent Stylesheet. 2.2. Examples Refine these examples through implementation, experimentation, bikeshedding and improvements to the user agent stylesheet. The main purpose of these examples is to show how the design principles for the basic appearance apply in practice. To apply the basic appearance on individual controls, the following code is used: input, textarea, meter, progress, button, select { appearance: base; } NOTE: The form layout used by the following examples is not detailed. 2.2.1. Default User Agent Colors Here are the basic appearance colors inheriting respectively the default light and dark mode colors from the root element: 2.2.2. Color/Font Customization Here are some examples of customization being done on top of the basic appearance: form { font-family: \"American Typewriter\"; background-color: rgb(254, 252, 221); color: rgb(131, 17, 0); } input, textarea, meter, progress, button, select { appearance: base; } form { font-family: \"Courier New\"; font-size: 14px; background-color: rgb(0, 0, 0); color: rgb(0, 249, 0); } input, textarea, meter, progress, button, select { appearance: base; } 3. Styling Pickers 3.1. The ::picker() pseudo-element The ::picker() pseudo-element represents the part of the form control that pops out of the page. ::picker() = ::picker( <form-control-identifier>+ ) <form-control-identifier> = select The ::picker() pseudo-element only matches when the originating element supports basic appearance and has a popup picker. The specified <form-control-identifier> must also match the unique picker name of the originating element. For example, the unique picker name for the select element is select. In order for the ::picker() pseudo-element to be rendered, it and its originating element must both have a computed appearance of base. The following styles apply the basic appearance to the select picker and the select and add some additional styling to the picker: select, select::picker(select) { appearance: base; } select::picker(select) { border: 5px solid red; background-color: blue; } NOTE: The non-functional form of ::picker() currently doesn’t work to prevent unintended styling of pickers as new pickers become supported. Once styling for all form control pickers is finalized, this non-functional form will work for all pickers. 4. Pseudo-Elements Form controls are composed of many parts that authors may want to style separately, hence the need for user agents to provide pseudo-elements for individual form controls. The section below introduces a set of pseudo-elements that attempts to cover the most common use cases, so they can be addressed in a consistent manner across user agents. Informative overview of form control pseudo-elements as applied to HTML Control Pseudo-elements <progress> ├─ ''::slider-track'' │ └─ ''::slider-fill'' └─ ''::slider-thumb'' <meter> <input type=checkbox switch> <input type=range> <input type=checkbox> ::checkmark <input type=radio> <input type=file> ::file-selector-button <input type=date> ::field-component ::field-separator ::picker-icon See § 4.8 Styling Parts for Date/Time Input Fields: the ::field-component and ::field-separator pseudo-elements <input type=datetime-local> <input type=time> <input type=month> <input type=week> <input> (with no type) See § 4.5 Styling Parts for Text Fields: the ::placeholder, ::field-text, ::reveal-icon, and ::clear-icon pseudo-elements <input type=text> <input type=search> <input type=email> <input type=password> <input type=tel> <input type=url> <input type=number> See § 4.7 Styling Parts for Number Fields: the ::step-control, ::step-up and ::step-down pseudo-elements <input type=color> ::color-swatch <textarea> See § 4.6 Styling Parts for textareas: the ::placeholder and ::field-text pseudo-elements <select> ::picker-icon <option> ::checkmark Buttons Add illustrations. 4.1. Picker Opener Icon: the ::picker-icon pseudo-element 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. ::picker-icon generates a box as if it was an child of its originating element, after any boxes generated by the ::after pseudo-element, with content as specified by content. 4.2. File Selector Button: the ::file-selector-button pseudo-element The ::file-selector-button pseudo-element represents the button used to open a file picker, if the UA renders such a button. It typically targets the button inside an input element with type=file. For example, the following example should show a green border around the file selector button: ::file-selector-button { border: 3px solid green } 4.3. Styling Checkmarks: the ::checkmark pseudo-element The ::checkmark pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements. It is only generated when the originating element supports the :checked pseudo-class, and either has basic appearance or an ancestor with basic appearance. It is a fully styleable pseudo-element and inherits from its originating element. For checkboxes and radio elements, it generates a box as if it was an child of its originating element, between the boxes generated by the ::before and ::after pseudo-element, with content as specified by content. For option elements, it generates a box as if it was an child of its originating element, preceding any boxes generated by the ::before pseudo-element, with content as specified by content. The following example changes the background image of a checkmark: ::checkmark { background-image: url(...) } It may also be used in combination with :indeterminate to style the indeterminate checkmark: :indeterminate::checkmark { background-image: url(...) } 4.4. Styling Parts of Slider-Like Controls: the ::slider-thumb, ::slider-track and ::slider-fill pseudo-elements Slider-like controls are form controls that represent progress. That progress may be adjustable by the user. The following pseudo-elements are provided to style their different parts: ::slider-thumb The ::slider-thumb pseudo-element represents the portion that allows the user to adjust the progress of the control. NOTE: It is typically natively rendered as a circle in most user agents. ::slider-track The ::slider-track pseudo-element represents the portion containing both the progressed and unprogressed portions of the control. ::slider-fill 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. These pseudo-elements are fully styleable pseudo-elements and their structure is the following: <input type=\"range\"> ├─ ::slider-track │ └─ ::slider-fill └─ ::slider-thumb The list of slider-like controls depends on the host language. For HTML, this corresponds to: progress meter input elements with type=\"range\" input elements with type=\"checkbox\" switch 4.5. Styling Parts for Text Fields: the ::placeholder, ::field-text, ::reveal-icon, and ::clear-icon pseudo-elements ::placeholder The ::placeholder pseudo-element represents the portion of the input that contains the placeholder text. ::field-text The ::field-text pseudo-element represents the portion of the input that contains the editable text. ::reveal-icon The ::reveal-icon pseudo-element represents the portion of the input that allows the user to temporarily disable obscuring of sensitive text input when clicked if provided by the user agent. User agents providing ::reveal-icon may choose to remove it in some circumstances to help protect sensitive text input from being revealed unintentionally. Example mitigations to avoid unintentionally revealing sensitive text input: If focus moves away from the field, remove the ::reveal-icon. If script modifies field content, remove the ::reveal-icon. If the ::reveal-icon is removed due to either of the above, the user must delete the contents of the field to make the ::reveal-icon appear again. This behavior prevents someone from making a minor change to field content to expose the ::reveal-icon on an unattended device. If the field is filled by a user agent autofill feature, remove the ::reveal-icon. ::clear-icon 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. ::field-text, ::reveal-icon, and ::clear-icon must be siblings. Collect parts used by autofill. Define how ::placeholder interacts with ::field-text. [Issue #11844] 4.6. Styling Parts for textareas: the ::placeholder and ::field-text pseudo-elements ::placeholder The ::placeholder pseudo-element represents the portion of the textarea that contains the placeholder text. ::field-text The ::field-text pseudo-element represents the portion of the textarea that contains the editable text. Define something for the resizer. [Issue #11850] Define how ::placeholder interacts with ::field-text. [Issue #11844] 4.7. Styling Parts for Number Fields: the ::step-control, ::step-up and ::step-down pseudo-elements These pseudo-elements are provided for number inputs. They are fully styleable pseudo-elements. ::step-control The ::step-control pseudo-element represents the portion of a number input that contains the up and down buttons. ::step-up The ::step-up pseudo-element represents the button that increments the value inside a number input when activated. ::step-down The ::step-down pseudo-element represents the button that decrements the value inside a number input when activated. Their structure is defined as follows: <input type=\"number\"> ├─ ::field-text └─ ::step-control ├─ ::step-up └─ ::step-down The following control: <input type=\"number\"> can be re-styled like this: [ + 2 - ] Insert real image. using the following styles: input[type=number] { appearance: base; &::step-control { display: contents; } &::step-up { order: 1; content: \"+\"; } &::field-text { order: 2; } &::step-down { order: 3; content: \"-\"; } } With appearance: textfield, the user agent must not generate this part. 4.8. Styling Parts for Date/Time Input Fields: the ::field-component and ::field-separator pseudo-elements ::field-component The ::field-component pseudo-element represents the portions of the control that contain the date/time component values. ::field-separator 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. Those pseudo-elements are siblings. The exact structure of the control is determined by internationalization and by the host language, but must be consistent across user-agents. The following control: <input type=\"date\"> may render like this in US locales: [ 08 / 22 / 2024 [v]] Insert real image. The resulting tree is: <input type=\"date\"> ├─ ::field-component (08) ├─ ::field-separator (/) ├─ ::field-component (22) ├─ ::field-separator (/) ├─ ::field-component (2024) └─ ::picker-icon 4.9. Color Swatch: the ::color-swatch pseudo-element The ::color-swatch pseudo-element represents the portion of the control that displays the chosen color value. For example, the following example should make the input and its color swatch rounded: input[type=color], ::color-swatch { border-radius: 100%; } 4.10. Compatibility With Vendor Pseudo-Element Extensions When possible, the user agent should use aliasing to implement any non-standard pseudo-elements. When not possible, the user agent must reserve the standard pseudo-elements for appearance: base and use any non-standard ones for appearance: none. 5. Pseudo-Classes 5.1. Targeting Different Meter States: the :low-value / :high-value / :optimal-value pseudo-classes Make sure this is able to replicate UA logic. [Issue #11336] Link these to the HTML definitions. The :low-value pseudo-class matches on a meter element when its value is under the value specified by the low HTML attribute. The :high-value pseudo-class matches on a meter element when its value is over the value specified by the high HTML attribute. 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. 5.2. Targeting Selects that are Listboxes Define something. [Issue #7422] 6. The control-value() function This is not ready for implementation, file an issue regarding this. Consider privacy implications, regarding data exfiltration. [Issue #11860] Consider adding more types. [Issue #11842] The control-value() function computes to the current value of the form control it is on. If it is used on an element that is not a form control, it returns an empty string. <control-value()> = control-value( <type>? ) <type> = '<' [ number | string ] '>' If used on a pseudo-element, it is evaluated against its originating element. For example, to show on the value of a range input next to it: input[type=range]::after { content: control-value(); } 7. Styling Widgets 7.1. Widget Accent Colors: the accent-color property The accent-color property is defined in [CSS-UI-4]. 7.2. Switching form control sizing: the field-sizing property Name: field-sizing Value: fixed | content Initial: fixed Applies to: elements with default preferred size Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: discrete For the purpose of this specification, an element with default preferred size is an element whose intrinsic size is fixed regardless of the size of its content. The host language defines which elements are applicable to it. For example, in HTML textarea is an element with default preferred size. fixed For element with default preferred size, the UA must set the intrinsic size to the default preferred size defined by the host language for that element. Otherwise, the UA must behave the same as content. content The UA must determine the element’s intrinsic size based on its content, and must ignore any default preferred size defined by the host language for that element. If the element is an element with default preferred size and is listed in compressible replaced elements, the UA must stop treating the element as a replaced element for min-content contribution. For instance, textarea has a fixed size regardless of its content by default: ⎸ The quick brown fox jumps over the lazy dog. If field-sizing: content is applied, the size of the former should fit to a text caret. ⎸ If field-sizing: content is applied and its width property has a fixed value like width: 10em, the element height depends on the number of the content lines: The quick brown fox jumps over the lazy dog.⎸ 7.3. Changing the Orientation of a Slider-Like Control: slider-orientation Rework this property. Name: slider-orientation Value: auto | left-to-right | right-to-left | top-to-bottom | bottom-to-top Initial: auto Applies to: all elements Inherited: no Percentages: n/a Computed value: as specified Canonical order: per grammar Animation type: discrete auto The slider-like control orientation is defined by the writing mode and direction. left-to-right The slider-like control is rendered horizontally and ::slider-fill is left-aligned within the control. right-to-left The slider-like control is rendered horizontally and ::slider-fill is right-aligned within the control. top-to-bottom The slider-like control is rendered vertically and ::slider-fill is top-aligned within the control. bottom-to-top The slider-like control is rendered vertically and ::slider-fill is bottom-aligned within the control. 7.4. Obscuring sensitive input: the input-security property The CSSWG has agreed that while we believe that providing this piece of functionality to users is important, doing it via CSS+JS is the wrong approach, and that instead it should be built into user agents: this needs to work consistently from site to site for it to be discoverable and understandable by users, this needs to work even when JS is turned off, and this needs to have consistently solid accessibility… We therefore intend to remove this from the specification, and instead, we would like to see this behavior specified in the HTML specification as part of the interaction model of password fields. Holding off deleting until the situation with HTML is clarified. See https://github.com/w3c/csswg-drafts/issues/6788 and https://github.com/whatwg/html/issues/7293. Name: input-security Value: auto | none Initial: auto Applies to: sensitive text inputs Inherited: no Percentages: N/A Computed value: as specified Canonical order: per grammar Animation type: by computed value type For the purpose of this specification, a sensitive text input is a text input whose purpose is to accept sensitive input, as defined by the host language. For example, in HTML <input type=password> is a sensitive text input. By default, user agents obscure the contents of sensitive text inputs in order to prevent onlookers from seeing it. Users may wish to temporarily disable this obscuring in order to confirm that they’ve typed their sensitive information correctly. The input-security property may be used by authors to enable or disable this obscuring. none The UA must not obscure the text in the control, so that it can be read by the user. auto The UA should obscure the text in the control, so that it cannot be read by the user. While the exact mechanism by which user agents obscure the text in the control is undefined, user agents typically obscure sensitive text inputs by replacing each character with some suitable replacement such as U+002A ASTERISK (*) or U+25CF BLACK CIRCLE (●). For instance, given this style sheet input[type=password] { input-security: auto; } and this HTML <input type=password value=MySecret794> a user agent might render the <input type=password> like so: ●●●●●●●●●●● Appendix A: Basic Appearance User Agent Stylesheet Move to HTML. This section needs refining with implementation. Color input styles need refining. [Issue #11837] Basics input, textarea, button, ::file-selector-button, select, meter, progress { color: inherit; font: inherit; box-sizing: border-box; background-color: transparent; } Layout input:not([type=file], [type=range], [type=checkbox][switch]), textarea, button, ::file-selector-button, ::slider-track, select { border: 1px solid currentColor; background-color: transparent; } Sliders Refine meter, progress, switch and range input styling. ::slider-track { height: 1em; } ::slider-fill { height: 100%; background-color: currentColor; } :indeterminate::slider-fill { inline-size: 0; } ::slider-thumb { border-radius: 0; border: none; background-color: currentColor; appearance: none; width: 1em; height: 100%; } Checkboxes & radios input:is([type=checkbox]:not([switch]), [type=radio]) { width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; content: ''; } input[type=radio] { border-radius: 100%; } input[type=checkbox]:not([switch]):checked::checkmark { content: '\\2713' / ''; } input[type=radio]:checked::checkmark { background-color: currentColor; display: inline-block; border-radius: inherit; height: 100%; width: 100%; } Buttons (and button-like controls) Selects are only button-like when they’re a drop-down box. button, ::file-selector-button, select, input:is([type=\"color\"], [type=\"button\"], [type=\"reset\"], [type=\"submit\"]) { border: 1px solid currentColor; background-color: transparent; color: inherit; /* Padding prevents the text from sticking to the borders. * optically centered to account for half leading */ padding-block: 0.25em; padding-inline: 0.5em; /* <select>s and <button>s should have border-radius to be * distinct from <input>s: https://github.com/w3c/csswg-drafts/issues/10857#issuecomment-2520875011*/ border-radius: 0.5em; /* These min-size rules ensure accessibility by following WCAG rules: * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html * The 1lh is there to make sure that options without text don't change * the block size of the button. */ min-block-size: calc-size(auto, max(size, 24px, 1lh)); min-inline-size: calc-size(auto, max(size, 24px)); /* box-sizing comes from existing UA styles which happen to * already be interoperable. */ box-sizing: border-box; /* Push picker icon to the right of the box and have some space * in between it and the text. */ display: inline-flex; gap: 0.5em; user-select: none; text-transform: initial; text-align: initial; text-indent: initial; } :is(button, select, input:is([type=\"color\"], [type=\"button\"], [type=\"reset\"], [type=\"submit\"])):enabled:hover, :enabled::file-selector-button:hover { background-color: color-mix(in lab, currentColor 10%, transparent); } :is(button, select, input:is([type=\"color\"], [type=\"button\"], [type=\"reset\"], [type=\"submit\"])):enabled:active, :enabled::file-selector-button:active { background-color: color-mix(in lab, currentColor 20%, transparent); } :is(button, select, input:is([type=\"color\"], [type=\"button\"], [type=\"reset\"], [type=\"submit\"])):disabled, :disabled::file-selector-button { color: color-mix(in srgb, currentColor 50%, transparent); } Selects select option { /* These min-size rules ensure accessibility by following WCAG rules: * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html * Unset if the author provides a child button element. * The 1lh is there to make sure that options without text don't change * the block size of the option. */ min-inline-size: 24px; min-block-size: max(24px, 1lh); /* Centers text within the block (vertically). From OpenUI discussion: * https://github.com/openui/open-ui/issues/1026#issuecomment-2103187647. */ align-content: center; /* centering + gap between checkmark and option content */ /* also easily reversed, when checkmark should be inline-end */ display: flex; align-items: center; gap: 0.5em; /* Makes options with long text widen picker instead * of making options tall. */ white-space: nowrap; } select option:enabled:hover { background-color: color-mix(in lab, currentColor 10%, transparent); } select option:enabled:active { background-color: color-mix(in lab, currentColor 20%, transparent); } select option:disabled { color: color-mix(in lab, currentColor 50%, transparent); } select option::checkmark { content: '\\2713' / ''; } select option:not(:checked)::checkmark { visibility: hidden; } select optgroup { /* font-weight makes optgroups visually distinct from options. */ font-weight: bolder; } select optgroup option { /* Undo font-weight:bolder rule from optgroups. */ font-weight: normal; } select legend, select option { /* spacing ownership moves to children */ /* space inline from border edges */ /* this creates a full bleed hover highlight */ padding-inline: 0.5em; } Drop-down box selects These styles should apply when the select is a drop-down box. select { field-sizing: content !important; } select > button:first-child { /* Prevents button from setting font, color, or background-color */ all: unset; /* Prevents duplicate box decorations */ display: contents; /* Prevents button activation behavior so select can handle events */ interactivity: inert !important; } select::picker-icon { /* margin-inline-start pushes the icon to the right of the box */ margin-inline-start: auto; display: block; content: counter(-ua-disclosure-open, disclosure-open); } ::picker(select) { /* Same properties as popover and dialog */ color: CanvasText; background-color: Canvas; border: 1px solid; /* box-sizing is set to match the button. */ box-sizing: border-box; /* Remove [popover] padding which * prevents options from extending to edges */ padding: 0; /* Anchor positioning and scrollbars */ inset: auto; margin: 0; min-inline-size: anchor-size(self-inline); min-block-size: 1lh; /* Go to the edge of the viewport, and add scrollbars if needed. */ max-block-size: stretch; overflow: auto; /* Below and span-right, by default. */ position-area: block-end span-inline-end; position-try-order: most-block-size; position-try-fallbacks: /* First try above and span-right. */ block-start span-inline-end, /* Then below but span-left. */ block-end span-inline-start, /* Then above and span-left. */ block-start span-inline-start; } List box selects These styles should apply when the select is a list box. select { overflow: auto; display: inline-block; block-size: calc(max(24px, 1lh) * attr(size type(<integer>), 4)); } Changes Since the First Public Working Draft of 25 March 2025 Added !important to select buttons inertness. Removed \"Appendix B: Explorations\" with obsolete ideas. Added \"slider-\" prefix to slider pseudo-elements. Moved field-sizing and input-security properties from css-ui-4. Added the ::reveal-icon pseudo-element. Privacy Considerations No new privacy considerations have been reported on this specification. Security Considerations No new security considerations have been reported on this specification. Acknowledgements Thanks to Aditya Keerthi, Anne van Kesteren, Elika Etemad, Jen Simmons, Joey Arhar, Jon Davis, Simon Fraser and Theresa O’Connor for their input on this proposal. Thanks to Ana Tudor for her detailed analysis of input[type=range] styling.",
           "href": "https://drafts.csswg.org/css-forms-1/#valdef-appearance-base",
           "type": "value",
           "value": "base"

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/css-grid-3.json packages/css6/css-grid-3.json
--- webref/node_modules/@webref/css/css-grid-3.json
+++ packages/css6/css-grid-3.json
@@ -5,6 +5,29 @@
   },
   "properties": [
     {
+      "name": "display",
+      "newValues": "grid-lanes | inline-grid-lanes",
+      "values": [
+        {
+          "name": "grid-lanes",
+          "prose": "This value causes an element to generate a block-level masonry container box.",
+          "href": "https://drafts.csswg.org/css-grid-3/#valdef-display-grid-lanes",
+          "type": "value",
+          "value": "grid-lanes"
+        },
+        {
+          "name": "inline-grid-lanes",
+          "prose": "This value causes an element to generate an inline-level masonry container box.",
+          "href": "https://drafts.csswg.org/css-grid-3/#valdef-display-inline-grid-lanes",
+          "type": "value",
+          "value": "inline-grid-lanes"
+        }
+      ],
+      "styleDeclaration": [
+        "display"
+      ]
+    },
+    {
       "name": "item-tolerance",
       "href": "https://drafts.csswg.org/css-grid-3/#propdef-item-tolerance",
       "value": "normal | <length-percentage> | infinite",
@@ -304,26 +327,15 @@
   ],
   "atrules": [],
   "selectors": [],
-  "values": [],
-  "warnings": [
-    {
-      "msg": "Dangling value",
-      "name": "something",
-      "prose": "This value causes an element to generate a masonry container box.",
-      "href": "https://drafts.csswg.org/css-grid-3/#valdef-display-something",
-      "type": "value",
-      "value": "something",
-      "for": "display"
-    },
+  "values": [
     {
-      "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 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()"
-    },
+      "name": "<auto-repeat>",
+      "href": "https://drafts.csswg.org/css-grid-3/#typedef-auto-repeat",
+      "type": "type",
+      "value": "repeat( [ auto-fill | auto-fit ] , [ <line-names>? <track-size> ]+ <line-names>? )"
+    }
+  ],
+  "warnings": [
     {
       "msg": "Dangling value",
       "name": "<length-percentage>",

diff --ignore-trailing-space '--exclude=package.json' '--exclude=README.md' '--exclude=CHANGELOG.md' '--unified=3' webref/node_modules/@webref/css/css-masking.json packages/css6/css-masking.json
--- webref/node_modules/@webref/css/css-masking.json
+++ packages/css6/css-masking.json
@@ -1,12 +1,12 @@
 {
   "spec": {
     "title": "CSS Masking Module Level 1",
-    "url": "https://drafts.fxtf.org/css-masking-1/"
+    "url": "https://drafts.csswg.org/css-masking-1/"
   },
   "properties": [
     {
       "name": "clip-path",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-clip-path",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-clip-path",
       "value": "<clip-source> | [ <basic-shape> || <geometry-box> ] | none",
       "initial": "none",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -20,21 +20,21 @@
         {
           "name": "fill-box",
           "prose": "Uses the object bounding box as reference box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-fill-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-clip-path-fill-box",
           "type": "value",
           "value": "fill-box"
         },
         {
           "name": "stroke-box",
           "prose": "Uses the stroke bounding box as reference box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-stroke-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-clip-path-stroke-box",
           "type": "value",
           "value": "stroke-box"
         },
         {
           "name": "view-box",
           "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.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-clip-path-view-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-clip-path-view-box",
           "type": "value",
           "value": "view-box"
         }
@@ -46,7 +46,7 @@
     },
     {
       "name": "clip-rule",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-clip-rule",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-clip-rule",
       "value": "nonzero | evenodd",
       "initial": "nonzero",
       "appliesTo": "Applies to SVG graphics elements",
@@ -60,14 +60,14 @@
         {
           "name": "nonzero",
           "prose": "See description of fill-rule property [SVG11].",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-clip-rule-nonzero",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-clip-rule-nonzero",
           "type": "value",
           "value": "nonzero"
         },
         {
           "name": "evenodd",
           "prose": "See description of fill-rule property [SVG11].",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-clip-rule-evenodd",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-clip-rule-evenodd",
           "type": "value",
           "value": "evenodd"
         }
@@ -79,7 +79,7 @@
     },
     {
       "name": "mask-image",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-image",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-image",
       "value": "<mask-reference>#",
       "initial": "none",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -93,7 +93,7 @@
         {
           "name": "<url>",
           "prose": "A URL reference to a mask element (for example url(commonmasks.svg#mask)) or to a CSS image.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-image-url",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-image-url",
           "type": "value",
           "value": "<url>"
         }
@@ -105,7 +105,7 @@
     },
     {
       "name": "mask-mode",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-mode",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-mode",
       "value": "<masking-mode>#",
       "initial": "match-source",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -119,21 +119,21 @@
         {
           "name": "alpha",
           "prose": "A value of alpha indicates that the alpha values of the mask layer image should be used as the mask values. See Calculating mask values.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-mode-alpha",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-mode-alpha",
           "type": "value",
           "value": "alpha"
         },
         {
           "name": "luminance",
           "prose": "A value of luminance indicates that the luminance values of the mask layer image should be used as the mask values. See Calculating mask values.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-mode-luminance",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-mode-luminance",
           "type": "value",
           "value": "luminance"
         },
         {
           "name": "match-source",
           "prose": "If the <mask-reference> of the mask-image property is of type <mask-source> the value specified by the referenced mask element’s mask-type property must be used. If the <mask-reference> of the mask-image property is of type <image> the alpha values of the mask layer image should be used as the mask values.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-mode-match-source",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-mode-match-source",
           "type": "value",
           "value": "match-source"
         }
@@ -145,7 +145,7 @@
     },
     {
       "name": "mask-repeat",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-repeat",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-repeat",
       "value": "<repeat-style>#",
       "initial": "repeat",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -162,7 +162,7 @@
     },
     {
       "name": "mask-position",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-position",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-position",
       "value": "<position>#",
       "initial": "0% 0%",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -179,7 +179,7 @@
     },
     {
       "name": "mask-clip",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-clip",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-clip",
       "value": "[ <coord-box> | no-clip ]#",
       "initial": "border-box",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -193,49 +193,49 @@
         {
           "name": "content-box",
           "prose": "The painted content is restricted to (clipped to) the content box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-content-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-content-box",
           "type": "value",
           "value": "content-box"
         },
         {
           "name": "padding-box",
           "prose": "The painted content is restricted to (clipped to) the padding box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-padding-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-padding-box",
           "type": "value",
           "value": "padding-box"
         },
         {
           "name": "border-box",
           "prose": "The painted content is restricted to (clipped to) the border box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-border-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-border-box",
           "type": "value",
           "value": "border-box"
         },
         {
           "name": "fill-box",
           "prose": "The painted content is restricted to (clipped to) the object bounding box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-fill-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-fill-box",
           "type": "value",
           "value": "fill-box"
         },
         {
           "name": "stroke-box",
           "prose": "The painted content is restricted to (clipped to) the stroke bounding box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-stroke-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-stroke-box",
           "type": "value",
           "value": "stroke-box"
         },
         {
           "name": "view-box",
           "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.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-view-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-view-box",
           "type": "value",
           "value": "view-box"
         },
         {
           "name": "no-clip",
           "prose": "The painted content is not restricted (not clipped).",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-clip-no-clip",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-clip-no-clip",
           "type": "value",
           "value": "no-clip"
         }
@@ -247,7 +247,7 @@
     },
     {
       "name": "mask-origin",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-origin",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-origin",
       "value": "<coord-box>#",
       "initial": "border-box",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -261,42 +261,42 @@
         {
           "name": "content-box",
           "prose": "The position is relative to the content box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-content-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-content-box",
           "type": "value",
           "value": "content-box"
         },
         {
           "name": "padding-box",
           "prose": "The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-padding-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-padding-box",
           "type": "value",
           "value": "padding-box"
         },
         {
           "name": "border-box",
           "prose": "The position is relative to the border box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-border-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-border-box",
           "type": "value",
           "value": "border-box"
         },
         {
           "name": "fill-box",
           "prose": "The position is relative to the object bounding box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-fill-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-fill-box",
           "type": "value",
           "value": "fill-box"
         },
         {
           "name": "stroke-box",
           "prose": "The position is relative to the stroke bounding box.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-stroke-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-stroke-box",
           "type": "value",
           "value": "stroke-box"
         },
         {
           "name": "view-box",
           "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.",
-          "href": "https://drafts.fxtf.org/css-masking-1/#valdef-mask-origin-view-box",
+          "href": "https://drafts.csswg.org/css-masking-1/#valdef-mask-origin-view-box",
           "type": "value",
           "value": "view-box"
         }
@@ -308,7 +308,7 @@
     },
     {
       "name": "mask-size",
-      "href": "https://drafts.fxtf.org/css-masking-1/#propdef-mask-size",
+      "href": "https://drafts.csswg.org/css-masking-1/#propdef-mask-size",
       "value": "<bg-size>#",
       "initial": "auto",
       "appliesTo": "All elements. In SVG, it applies to container elements excluding the defs element, all graphics elements and the use element",
@@ -325,7 +325,7 @@
     },
     {
       "name": "mask-composite",
-      "href": "https://drafts.fxtf.org/c