Adding a couple of new css groups and moving a bunch of features under them

features/abs-sign.yml

@@ -1,3 +1,4 @@
 name: abs() and sign()
 description: The `abs()` and `sign()` CSS functions compute the absolute value or the sign of the input.
 spec: https://drafts.csswg.org/css-values-4/#sign-funcs
+group: css

features/accent-color.yml

@@ -1,3 +1,4 @@
 name: accent-color
 description: The `accent-color` CSS property sets a color for checkboxes, radio buttons, and other form controls.
 spec: https://drafts.csswg.org/css-ui-4/#widget-accent
+group: css

features/appearance.yml

@@ -1,3 +1,4 @@
 name: appearance
 description: "The `appearance` CSS property controls the appearance of form controls. Using `appearance: none` disables any default native appearance and allows the elements to be styled with CSS."
 spec: https://drafts.csswg.org/css-ui-4/#appearance-switching
+group: css

features/aspect-ratio.yml

@@ -1,3 +1,4 @@
 name: aspect-ratio
 description: "The `aspect-ratio` CSS property controls the width-to-height ratio of elements. For `<img>` and `<video>` elements, the `width` and `height` attributes used together with `height: auto` control the aspect ratio while the image/video is loading."
 spec: https://drafts.csswg.org/css-sizing-4/#aspect-ratio
+group: css

features/backdrop-filter.yml

@@ -1,4 +1,5 @@
 name: backdrop-filter
 description: The `backdrop-filter` CSS property applies graphical effects such as blurring or color shifting to the area behind an element.
 spec: https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty
+group: css
 caniuse: css-backdrop-filter

features/background-clip-text.yml

@@ -2,3 +2,4 @@
 name: "background-clip: text"
 description: "The `background-clip: text` CSS declaration draws the background underneath only the text in the element."
 spec: https://drafts.csswg.org/css-backgrounds-4/#background-clip
+group: css

features/background-clip.yml

@@ -3,3 +3,4 @@
 name: background-clip
 description: "The `background-clip` CSS property sets the extent of the background: the padding box, the content box, or the default border box."
 spec: https://drafts.csswg.org/css-backgrounds-3/#background-clip
+group: css

features/border-image.yml

@@ -2,3 +2,4 @@ name: Border images
 description: The `border-image` CSS property draws an image around an element.
 spec: https://drafts.csswg.org/css-backgrounds-3/#border-images
 caniuse: border-image
+group: css

features/calc-constants.yml

@@ -1,3 +1,4 @@
 name: calc() constants
 description: The `e`, `pi`, `infinity`, and `NaN` constants are accepted in CSS math functions such as `calc()`.
 spec: https://drafts.csswg.org/css-values-4/#calc-keywords
+group: css

features/calc.yml

@@ -1,6 +1,7 @@
 name: calc()
 description: The `calc()` CSS function computes mathematical expressions such a `calc(100%/3 - 1em)`.
 spec: https://drafts.csswg.org/css-values-3/#calc-notation
+group: css
 caniuse: calc
 compat_features:
   - css.types.calc

features/cap.yml

@@ -1,3 +1,4 @@
 name: cap unit
 description: The CSS `cap` unit corresponds to the height of Latin capital letters.
 spec: https://drafts.csswg.org/css-values-4/#cap
+group: units

features/caret-color.yml

@@ -1,6 +1,7 @@
 name: caret-color
 description: The `caret-color` CSS property sets the color of the text insertion pointer in a text input.
 spec: https://drafts.csswg.org/css-ui-4/#insertion-caret
+group: css
 caniuse: css-caret-color
 compat_features:
   - css.properties.caret-color

features/cascade-layers.yml

@@ -1,4 +1,5 @@
 name: Cascade layers
 description: The `@layer` CSS at-rule avoids specificity conflicts by providing priority levels for different groups of CSS rules, such as low-priority styles like resets, and high-priority styles like UI components.
 spec: https://drafts.csswg.org/css-cascade-5/#layering
+group: css
 caniuse: css-cascade-layers

features/color-mix.yml

@@ -1,3 +1,4 @@
 name: color-mix()
 description: "The `color-mix()` function mixes two colors in a given color space and by a given amount. Commonly, lighter or darker variations of a color are created by mixing with white or black."
 spec: https://drafts.csswg.org/css-color-5/#color-mix
+group: css

features/color-scheme.yml

@@ -8,3 +8,4 @@ spec: https://drafts.csswg.org/css-color-adjust-1/#color-scheme-prop
 # Including them increases the Baseline low date from 2022-01-11 (Firefox 98) to
 # 2022-02-03 (Chrome 98). Since this is less than a month's difference and the
 # opt-out could be important for some developers, the later date is accepted.
+group: css

features/container-queries.yml

@@ -1,6 +1,7 @@
 name: Container queries
 description: Container size queries with the `@container` at-rule apply styles to an element based on the dimensions of its container.
 spec: https://drafts.csswg.org/css-contain-3/#container-queries
+group: containment
 caniuse: css-container-queries
 status:
   compute_from: css.at-rules.container

features/container-style-queries.yml

@@ -1,4 +1,5 @@
 name: Container style queries
 description: Container style queries with the `@container` at-rule apply styles to an element based on the values of custom properties of its container.
 spec: https://drafts.csswg.org/css-contain-3/#style-container
+group: containment
 caniuse: css-container-queries-style

features/content-visibility.yml

@@ -1,4 +1,5 @@
 name: content-visibility
 description: The `content-visibility` CSS property delays rendering an element, including layout and painting, until it is needed.
 spec: https://drafts.csswg.org/css-contain-2/#content-visibility
+group: css
 caniuse: css-content-visibility

features/counter-set.yml

@@ -1,3 +1,4 @@
 name: counter-set
 description: The `counter-set` CSS property creates (and optionally sets a value for) a counter, the numbers for a series of headings or ordered list items.
 spec: https://drafts.csswg.org/css-lists-3/#propdef-counter-set
+group: css

features/counter-style.yml

@@ -1,6 +1,7 @@
 name: "@counter-style"
 description: The `@counter-style` CSS at-rule sets custom counter styles for list items. For example, you can use a sequence of specific symbols instead of numbers for an ordered list.
 spec: https://drafts.csswg.org/css-counter-styles-3/
+group: css
 caniuse: css-at-counter-style
 status:
   compute_from: css.at-rules.counter-style

features/custom-properties.yml

@@ -1,4 +1,5 @@
 name: Custom properties
 description: "Custom properties are CSS properties prefixed with `--` that set values you can reuse with the `var()` function. For example, you can set a `--key-color` property to reuse as `border-color: var(--key-color)`. Also known as CSS variables."
 spec: https://drafts.csswg.org/css-variables-1/
+group: css
 caniuse: css-variables

features/default.yml

@@ -1,4 +1,5 @@
 name: ":default"
 description: The `:default` CSS pseudo-class matches the default element in a group of related form controls, such as checkboxes and radio buttons with the `checked` attribute.
 spec: https://drafts.csswg.org/selectors-4/#the-default-pseudo
+group: selectors
 caniuse: css-default-pseudo

features/dir-pseudo.yml

@@ -1,5 +1,5 @@
 name: :dir()
 description: "The `:dir()` CSS functional pseudo-class matches elements by text direction, either right to left (`rtl`) or left to right (`ltr`)."
 spec: https://drafts.csswg.org/selectors-4/#the-dir-pseudo
-group: css
+group: selectors
 caniuse: css-dir-pseudo

features/display-animation.yml

@@ -3,3 +3,4 @@ description: "You can animate elements between `display: none` and any other `di
 spec:
   - https://drafts.csswg.org/css-display-4/#display-animation
   - https://drafts.csswg.org/css-contain-3/#content-visibility-animation
+group: css

features/exp-functions.yml

@@ -1,3 +1,4 @@
 name: pow(), sqrt(), hypot(), log(), and exp()
 description: The `pow()`, `sqrt()`, `hypot()`, `log()`, and `exp()` CSS functions compute various exponential functions.
 spec: https://drafts.csswg.org/css-values-4/#exponent-funcs
+group: css

features/field-sizing.yml

@@ -1,3 +1,4 @@
 name: field-sizing
 spec: https://drafts.csswg.org/css-ui-4/#field-sizing
 description: The `field-sizing` CSS property allows form controls such as `<textarea>` to be sized based on their content.
+group: css

features/focus-visible.yml

@@ -1,4 +1,5 @@
 name: ":focus-visible"
 description: The `:focus-visible` CSS pseudo-class selects elements that match the `:focus` pseudo-class and meets the browser's criteria for visually emphasizing focused elements.
 spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+group: selectors
 caniuse: css-focus-visible

features/has.yml

@@ -1,4 +1,5 @@
 name: ":has()"
 description: The `:has()` CSS functional pseudo-class matches an element if any of the selectors passed as parameters would match at least one element.
 spec: https://drafts.csswg.org/selectors-4/#relational
+group: selectors
 caniuse: css-has

features/ic.yml

@@ -1,3 +1,4 @@
 name: ic unit
 description: The CSS `ic` unit corresponds to the width of CJK ideographic characters.
 spec: https://drafts.csswg.org/css-values-4/#ic
+group: units

features/image-set.yml

@@ -1,4 +1,5 @@
 name: image-set()
 description: The `image-set()` CSS function provides a set of images at different resolutions or pixel densities, which the browser can pick from, depending on the device capabilities.
 spec: https://drafts.csswg.org/css-images-4/#image-set-notation
+group: css
 caniuse: css-image-set

features/initial-letter.yml

@@ -4,3 +4,4 @@ spec: https://drafts.csswg.org/css-inline-3/#sizing-drop-initials
 compat_features:
   - css.properties.initial-letter
   - css.properties.initial-letter.normal
+group: css

features/is.yml

@@ -1,4 +1,5 @@
 name: ":is()"
 description: "The `:is()` CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list."
 spec: https://drafts.csswg.org/selectors-4/#matches
+group: selectors
 caniuse: css-matches-pseudo

features/lh.yml

@@ -1,3 +1,4 @@
 name: lh unit
 description: The CSS `lh` unit corresponds to the requested line height, the computed value of the `line-height` property. Some lines may be higher than this based on their content.
 spec: https://drafts.csswg.org/css-values-4/#lh
+group: units

features/light-dark.yml

@@ -1,3 +1,4 @@
 name: light-dark()
 description: The `light-dark()` CSS function accepts two colors and uses one depending on the current color scheme.
 spec: https://drafts.csswg.org/css-color-5/#light-dark
+group: css

features/line-clamp.yml

@@ -1,4 +1,5 @@
 name: line-clamp
 description: "The `line-clamp` CSS property limits the text in a block container to a certain number of lines. The prefixed `-webkit-line-clamp` is widely supported but only works with `-webkit-box-orient: vertical` in combination with `display: -webkit-box` or `display: -webkit-inline-box`."
 spec: https://drafts.csswg.org/css-overflow-4/#line-clamp
+group: css
 caniuse: css-line-clamp

features/linear-easing.yml

@@ -1,3 +1,4 @@
 name: linear() easing
 description: The `linear()` easing function for animations and transitions interpolates linearly between the control points, and can be used to approximate complex easing functions, such as a bounce effect.
 spec: https://drafts.csswg.org/css-easing-2/#the-linear-easing-function
+group: css

features/margin-trim.yml

@@ -1,3 +1,4 @@
 name: margin-trim
 description: The `margin-trim` CSS property removes the margins of child elements when they meet the edges of the container.
 spec: https://drafts.csswg.org/css-box-4/#margin-trim
+group: css

features/min-max-clamp.yml

@@ -2,3 +2,4 @@ name: min(), max(), and clamp()
 description: The `min()` and `max()` CSS functions return the minimum or maximum of the arguments, while `clamp()` clamps a value to a given range.
 spec: https://drafts.csswg.org/css-values-4/#comp-func
 # TODO: partial support (min() and max()) in Safari 11.1.
+group: css

features/modal.yml

@@ -1,4 +1,4 @@
 name: ":modal"
 description: "The `:modal` pseudo-class selects elements that put other elements into a non-interactive state, such as a fullscreen element or a `<dialog>` element used with `showModal()`."
 spec: https://drafts.csswg.org/selectors-4/#modal-state
-group: css
+group: selectors

features/motion-path.yml

@@ -1,4 +1,5 @@
 name: Motion path
 description: The `offset` CSS property animates an element along a defined motion path.
 spec: https://drafts.fxtf.org/motion-1/
+group: css
 caniuse: css-motion-paths

features/nth-child-of.yml

@@ -3,5 +3,5 @@ description: "The `of` syntax for the `:nth-child()` and `:nth-last-child()` CSS
 spec:
   - https://drafts.csswg.org/selectors-4/#the-nth-child-pseudo
   - https://drafts.csswg.org/selectors-4/#the-nth-last-child-pseudo
-group: css
+group: selectors
 caniuse: css-nth-child-of

features/nth-child.yml

@@ -3,4 +3,4 @@ description: "The `:nth-child()` and `:nth-last-child()` CSS functional pseudo-c
 spec:
   - https://drafts.csswg.org/selectors-3/#nth-child-pseudo
   - https://drafts.csswg.org/selectors-3/#nth-last-child-pseudo
-group: css
+group: selectors

features/object-view-box.yml

@@ -1,5 +1,6 @@
 name: object-view-box
 description: The `object-view-box` CSS property crops and zooms to an inset area of an image.
 spec: https://drafts.csswg.org/css-images-5/#the-object-view-box
+group: css
 compat_features:
   - css.properties.object-view-box

features/overflow-shorthand.yml

@@ -1,4 +1,5 @@
 name: overflow
 description: The `overflow` CSS property sets the behavior for when content doesn't fit in an element.
 spec: https://drafts.csswg.org/css-overflow-3/#propdef-overflow
+group: css
 caniuse: css-overflow

features/overlay.yml

@@ -1,5 +1,6 @@
 name: overlay
 description: The `overlay` CSS property, used as an `allow-discrete` CSS transition, prevents a top layer element, such as a popover or a `<dialog>`, from being removed from the top layer before it has finished animating. You can't set the value of the `overlay` property; only use it as transition property.
 spec: https://drafts.csswg.org/css-position-4/#overlay
+group: css
 compat_features:
   - css.properties.overlay

features/prefers-color-scheme.yml

@@ -1,3 +1,4 @@
 name: prefers-color-scheme
 description: The `prefers-color-scheme` CSS media query detects the requested color scheme, light or dark.
 spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+group: css

features/relative-color.yml

@@ -1,6 +1,7 @@
 name: Relative colors
 description: "The `from` keyword for color functions (`color()`, `hsl()`, `oklch()`, etc.) creates a new color based on a given color by modifying the values of the input color. Also known as relative color syntax (RCS)."
 spec: https://drafts.csswg.org/css-color-5/#relative-colors
+group: css
 caniuse: css-relative-colors
 # TODO: Revisit when this has shipped in Firefox if we should retroactively
 # claim partial support in Chrome and Safari for some versions. If so, also make

features/round-mod-rem.yml

@@ -1,3 +1,4 @@
 name: round(), mod(), and rem()
 description: The `round()`, `mod()`, and `rem()` CSS functions compute rounded values and the remainder after division.
 spec: https://drafts.csswg.org/css-values-4/#round-func
+group: css

features/scope.yml

@@ -1,4 +1,5 @@
 name: "@scope"
 description: The `@scope` CSS at-rule sets the scope for a group of rules.
 spec: https://drafts.csswg.org/css-cascade-6/#scope-atrule
+group: css
 caniuse: css-cascade-scope

features/spelling-grammar-error.yml

@@ -3,3 +3,4 @@ description: The `::spelling-error` and `::grammar-error` CSS pseudo-elements ma
 spec:
   - https://drafts.csswg.org/css-pseudo-4/#selectordef-spelling-error
   - https://drafts.csswg.org/css-pseudo-4/#selectordef-grammar-error
+group: selectors

features/starting-style.yml

@@ -1,3 +1,4 @@
 name: "@starting-style"
 description: The `@starting-style` CSS at-rule sets the starting values for properties that are transitioning when the target element's style is first updated.
 spec: https://drafts.csswg.org/css-transitions-2/#defining-before-change-style
+group: css

features/sticky-positioning.yml

@@ -1,4 +1,5 @@
 name: Sticky positioning
 description: "The `position: sticky` CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position."
 spec: https://drafts.csswg.org/css-position-3/#stickypos-insets
+group: layout
 caniuse: css-sticky

features/text-indent.yml

@@ -1,4 +1,5 @@
 name: text-indent
 description: The `text-indent` CSS property sets the size of the empty space (indentation) at the beginning of lines in a text.
 spec: https://drafts.csswg.org/css-text-3/#text-indent-property
+group: css
 caniuse: css-text-indent

features/text-spacing-trim.yml

@@ -1,3 +1,4 @@
 name: text-spacing-trim
 description: The `text-spacing-trim` CSS property controls spacing around CJK characters, avoiding excessive whitespace when using full-width punctuation characters.
 spec: https://drafts.csswg.org/css-text-4/#text-spacing-trim-property
+group: css

features/text-wrap-balance.yml

@@ -1,3 +1,4 @@
 name: "text-wrap: balance"
 description: "The `text-wrap: balance` CSS declaration balances the length of each line when text is broken into multiple lines. Also known as headline balancing."
 spec: https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-balance
+group: css

features/text-wrap-nowrap.yml

@@ -1,3 +1,4 @@
 name: "text-wrap: nowrap"
 description: "The `text-wrap: nowrap` CSS declaration prevents text breaking into multiple lines. Text that doesn't fit overflows instead."
 spec: https://drafts.csswg.org/css-text-4/#valdef-text-wrap-mode-nowrap
+group: css

features/text-wrap-pretty.yml

@@ -1,3 +1,4 @@
 name: "text-wrap: pretty"
 description: "The `text-wrap: pretty` CSS declaration prioritizes better layout over speed when text is broken into multiple lines."
 spec: https://drafts.csswg.org/css-text-4/#valdef-text-wrap-style-pretty
+group: css

features/transition-behavior.yml

@@ -1,3 +1,4 @@
 name: transition-behavior
 description: "The `transition-behavior: allow-discrete` CSS declaration allows transitions for properties whose animation behavior is discrete. Such properties can't be interpolated and swap from their start value to the end value at 50%."
 spec: https://drafts.csswg.org/css-transitions-2/#transition-behavior-property
+group: css

features/trig-functions.yml

@@ -1,3 +1,4 @@
 name: sin(), cos(), tan(), asin(), acos(), atan(), and atan2() (CSS)
 description: The `sin()`, `cos()`, `tan()`, `asin()`, `acos()`, `atan()`, and `atan2()` CSS functions compute various trigonometric functions.
 spec: https://drafts.csswg.org/css-values-4/#trig-funcs
+group: css

features/two-value-display.yml

@@ -1,3 +1,4 @@
 name: Two-value display property
 description: The `display` CSS property accepts multiple keyword values, such as `inline flex` or `block flow`, to explicitly set an element's inner and outer layout mode. Also known as 2-value, multi-keyword, or multiple value syntax.
 spec: https://drafts.csswg.org/css-display-3/#the-display-properties
+group: css

features/user-pseudos.yml

@@ -1,3 +1,4 @@
 name: ":user-valid and :user-invalid"
 description: The `:user-valid` and `:user-invalid` pseudo-classes match form controls that have been marked as valid or invalid based on their validation constraints.
 spec: https://drafts.csswg.org/selectors-4/#user-pseudos
+group: selectors

features/view-transitions.yml

@@ -2,3 +2,4 @@ name: View transitions
 description: View transitions allow you to create animated visual transitions between different states of a document, or between different documents.
 spec: https://drafts.csswg.org/css-view-transitions-1/
 caniuse: view-transitions
+group: css

features/viewport-units.yml

@@ -2,4 +2,5 @@ name: Viewport units
 description: The `vw`, `vh`, `vmin`, and `vmax` CSS viewport units are relative to the size of the viewport, and are used to size elements in relation to the viewport's dimensions.
 # This feature excludes `vb` and `vi` because they were introduced later (see `viewport-relative-unit-variants`)
 spec: https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
+group: units
 caniuse: viewport-units

features/where.yml

@@ -1,3 +1,4 @@
 name: ":where()"
 description: The `:where()` CSS functional pseudo-class takes a selector list as its argument, and matches any element that can be selected by one of the selectors in that list. It is functionally equivalent to the selectors in the list, but doesn't affect the CSS rule specificity.
 spec: https://drafts.csswg.org/selectors-4/#zero-matches
+group: selectors

groups/selectors.yml

@@ -0,0 +1,3 @@
+# CSS features that allow selecting elements in the DOM.
+name: Selectors
+parent: css

groups/units.yml

@@ -0,0 +1,3 @@
+# Features that define units of measurement in CSS.
+name: Units
+parent: css