@mekari/pixel3-styled-system 0.1.5-dev.0 → 0.1.5

package/types/style-props.d.ts

@@ -8,8 +8,7 @@ type AnyString = (string & {})
 type CssVars = "var(--font-inter)"
 type CssVarValue = ConditionalValue<Token | CssVars | AnyString | (number & {})>
 
-type CssVarName = "font-inter" | AnyString
-type CssVarKeys = `--${CssVarName}`
+type CssVarKeys = "--font-inter" | `--${string}` & {}
 
 export type CssVarProperties = {
   [key in CssVarKeys]?: CssVarValue
@@ -226,6 +225,14 @@ WebkitTouchCallout?: ConditionalValue<CssProperties["WebkitTouchCallout"] | AnyS
    * **Initial value**: `read-only`
    */
 WebkitUserModify?: ConditionalValue<CssProperties["WebkitUserModify"] | AnyString>
+ /**
+   * The **`user-select`** CSS property controls whether the user can select text. This doesn't have any effect on content loaded as part of a browser's user interface (its chrome), except in textboxes.
+   *
+   * **Syntax**: `auto | text | none | contain | all`
+   *
+   * **Initial value**: `auto`
+   */
+WebkitUserSelect?: ConditionalValue<CssProperties["WebkitUserSelect"] | AnyString>
  /**
    * The **`accent-color`** CSS property sets the accent color for user-interface controls generated by some elements.
    *
@@ -313,6 +320,8 @@ alignTracks?: ConditionalValue<CssProperties["alignTracks"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/all
    */
 all?: ConditionalValue<CssVars | CssProperties["all"] | AnyString>
+ anchorName?: ConditionalValue<CssProperties["anchorName"] | AnyString>
+ anchorScope?: ConditionalValue<CssProperties["anchorScope"] | AnyString>
  /**
    * The **`animation`** shorthand CSS property applies an animation between styles. It is a shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`.
    *
@@ -485,6 +494,20 @@ animationRangeEnd?: ConditionalValue<CssProperties["animationRangeEnd"] | AnyStr
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-range-start
    */
 animationRangeStart?: ConditionalValue<CssProperties["animationRangeStart"] | AnyString>
+ /**
+   * The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of an animation.
+   *
+   * **Syntax**: `<single-animation-timeline>#`
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome  | Firefox | Safari | Edge | IE  |
+   * | :-----: | :-----: | :----: | :--: | :-: |
+   * | **115** |   n/a   |   No   | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/animation-timeline
+   */
+animationTimeline?: ConditionalValue<CssProperties["animationTimeline"] | AnyString>
  /**
    * The **`animation-timing-function`** CSS property sets how an animation progresses through the duration of each cycle.
    *
@@ -500,20 +523,6 @@ animationRangeStart?: ConditionalValue<CssProperties["animationRangeStart"] | An
    * @see https://developer.mozilla.org/docs/Web/CSS/animation-timing-function
    */
 animationTimingFunction?: ConditionalValue<CssProperties["animationTimingFunction"] | AnyString>
- /**
-   * The **`animation-timeline`** CSS property specifies the timeline that is used to control the progress of an animation.
-   *
-   * **Syntax**: `<single-animation-timeline>#`
-   *
-   * **Initial value**: `auto`
-   *
-   * | Chrome  | Firefox | Safari | Edge | IE  |
-   * | :-----: | :-----: | :----: | :--: | :-: |
-   * | **115** |   n/a   |   No   | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/animation-timeline
-   */
-animationTimeline?: ConditionalValue<CssProperties["animationTimeline"] | AnyString>
  /**
    * The **`appearance`** CSS property is used to control native appearance of UI controls, that are based on operating system's theme.
    *
@@ -543,7 +552,6 @@ appearance?: ConditionalValue<CssVars | CssProperties["appearance"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/aspect-ratio
    */
 aspectRatio?: ConditionalValue<CssProperties["aspectRatio"] | AnyString>
- azimuth?: ConditionalValue<CssProperties["azimuth"] | AnyString>
  /**
    * The **`backdrop-filter`** CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element. Because it applies to everything _behind_ the element, to see the effect you must make the element or its background at least partially transparent.
    *
@@ -793,34 +801,6 @@ borderBlock?: ConditionalValue<CssProperties["borderBlock"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-color
    */
 borderBlockColor?: ConditionalValue<UtilityValues["borderBlockColor"] | CssVars | CssProperties["borderBlockColor"] | AnyString>
- /**
-   * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-   *
-   * **Syntax**: `<'border-top-style'>`
-   *
-   * **Initial value**: `none`
-   *
-   * | Chrome | Firefox |  Safari  | Edge | IE  |
-   * | :----: | :-----: | :------: | :--: | :-: |
-   * | **87** | **66**  | **14.1** | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/border-block-style
-   */
-borderBlockStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStyle"] | AnyString>
- /**
-   * The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-   *
-   * **Syntax**: `<'border-top-width'>`
-   *
-   * **Initial value**: `medium`
-   *
-   * | Chrome | Firefox |  Safari  | Edge | IE  |
-   * | :----: | :-----: | :------: | :--: | :-: |
-   * | **87** | **66**  | **14.1** | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
-   */
-borderBlockWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-block-end`** CSS property is a shorthand property for setting the individual logical block-end border property values in a single place in the style sheet.
    *
@@ -874,7 +854,7 @@ borderBlockEndStyle?: ConditionalValue<CssVars | CssProperties["borderBlockEndSt
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-end-width
    */
-borderBlockEndWidth?: ConditionalValue<CssProperties["borderBlockEndWidth"] | AnyString>
+borderBlockEndWidth?: ConditionalValue<UtilityValues["borderBlockEndWidth"] | CssVars | CssProperties["borderBlockEndWidth"] | AnyString>
  /**
    * The **`border-block-start`** CSS property is a shorthand property for setting the individual logical block-start border property values in a single place in the style sheet.
    *
@@ -928,7 +908,35 @@ borderBlockStartStyle?: ConditionalValue<CssVars | CssProperties["borderBlockSta
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/border-block-start-width
    */
-borderBlockStartWidth?: ConditionalValue<CssProperties["borderBlockStartWidth"] | AnyString>
+borderBlockStartWidth?: ConditionalValue<UtilityValues["borderBlockStartWidth"] | CssVars | CssProperties["borderBlockStartWidth"] | AnyString>
+ /**
+   * The **`border-block-style`** CSS property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+   *
+   * **Syntax**: `<'border-top-style'>`
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox |  Safari  | Edge | IE  |
+   * | :----: | :-----: | :------: | :--: | :-: |
+   * | **87** | **66**  | **14.1** | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-block-style
+   */
+borderBlockStyle?: ConditionalValue<CssVars | CssProperties["borderBlockStyle"] | AnyString>
+ /**
+   * The **`border-block-width`** CSS property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+   *
+   * **Syntax**: `<'border-top-width'>`
+   *
+   * **Initial value**: `medium`
+   *
+   * | Chrome | Firefox |  Safari  | Edge | IE  |
+   * | :----: | :-----: | :------: | :--: | :-: |
+   * | **87** | **66**  | **14.1** | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-block-width
+   */
+borderBlockWidth?: ConditionalValue<UtilityValues["borderBlockWidth"] | CssVars | CssProperties["borderBlockWidth"] | AnyString>
  /**
    * The **`border-bottom`** shorthand CSS property sets an element's bottom border. It sets the values of `border-bottom-width`, `border-bottom-style` and `border-bottom-color`.
    *
@@ -1162,18 +1170,6 @@ borderImageWidth?: ConditionalValue<CssProperties["borderImageWidth"] | AnyStrin
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline
    */
 borderInline?: ConditionalValue<CssProperties["borderInline"] | AnyString>
- /**
-   * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
-   *
-   * **Syntax**: `<'border-top-width'> || <'border-top-style'> || <color>`
-   *
-   * | Chrome | Firefox |  Safari  | Edge | IE  |
-   * | :----: | :-----: | :------: | :--: | :-: |
-   * | **69** | **41**  | **12.1** | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
-   */
-borderInlineEnd?: ConditionalValue<CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-color`** CSS property defines the color of the logical inline borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color` and `border-bottom-color`, or `border-right-color` and `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1189,33 +1185,17 @@ borderInlineEnd?: ConditionalValue<CssProperties["borderInlineEnd"] | AnyString>
    */
 borderInlineColor?: ConditionalValue<UtilityValues["borderInlineColor"] | CssVars | CssProperties["borderInlineColor"] | AnyString>
  /**
-   * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-   *
-   * **Syntax**: `<'border-top-style'>`
-   *
-   * **Initial value**: `none`
-   *
-   * | Chrome | Firefox |  Safari  | Edge | IE  |
-   * | :----: | :-----: | :------: | :--: | :-: |
-   * | **87** | **66**  | **14.1** | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-style
-   */
-borderInlineStyle?: ConditionalValue<CssVars | CssProperties["borderInlineStyle"] | AnyString>
- /**
-   * The **`border-inline-width`** CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
-   *
-   * **Syntax**: `<'border-top-width'>`
+   * The **`border-inline-end`** CSS property is a shorthand property for setting the individual logical inline-end border property values in a single place in the style sheet.
    *
-   * **Initial value**: `medium`
+   * **Syntax**: `<'border-top-width'> || <'border-top-style'> || <color>`
    *
    * | Chrome | Firefox |  Safari  | Edge | IE  |
    * | :----: | :-----: | :------: | :--: | :-: |
-   * | **87** | **66**  | **14.1** | n/a  | No  |
+   * | **69** | **41**  | **12.1** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-end
    */
-borderInlineWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
+borderInlineEnd?: ConditionalValue<CssProperties["borderInlineEnd"] | AnyString>
  /**
    * The **`border-inline-end-color`** CSS property defines the color of the logical inline-end border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-color`, `border-right-color`, `border-bottom-color`, or `border-left-color` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
    *
@@ -1317,6 +1297,34 @@ borderInlineStartStyle?: ConditionalValue<CssVars | CssProperties["borderInlineS
    * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-start-width
    */
 borderInlineStartWidth?: ConditionalValue<UtilityValues["borderInlineStartWidth"] | CssVars | CssProperties["borderInlineStartWidth"] | AnyString>
+ /**
+   * The **`border-inline-style`** CSS property defines the style of the logical inline borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-style` and `border-bottom-style`, or `border-left-style` and `border-right-style` properties depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+   *
+   * **Syntax**: `<'border-top-style'>`
+   *
+   * **Initial value**: `none`
+   *
+   * | Chrome | Firefox |  Safari  | Edge | IE  |
+   * | :----: | :-----: | :------: | :--: | :-: |
+   * | **87** | **66**  | **14.1** | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-style
+   */
+borderInlineStyle?: ConditionalValue<CssVars | CssProperties["borderInlineStyle"] | AnyString>
+ /**
+   * The **`border-inline-width`** CSS property defines the width of the logical inline borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. It corresponds to the `border-top-width` and `border-bottom-width`, or `border-left-width`, and `border-right-width` property depending on the values defined for `writing-mode`, `direction`, and `text-orientation`.
+   *
+   * **Syntax**: `<'border-top-width'>`
+   *
+   * **Initial value**: `medium`
+   *
+   * | Chrome | Firefox |  Safari  | Edge | IE  |
+   * | :----: | :-----: | :------: | :--: | :-: |
+   * | **87** | **66**  | **14.1** | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/border-inline-width
+   */
+borderInlineWidth?: ConditionalValue<UtilityValues["borderInlineWidth"] | CssVars | CssProperties["borderInlineWidth"] | AnyString>
  /**
    * The **`border-left`** shorthand CSS property sets all the properties of an element's left border.
    *
@@ -1762,6 +1770,7 @@ clear?: ConditionalValue<CssVars | CssProperties["clear"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/clip-path
    */
 clipPath?: ConditionalValue<CssProperties["clipPath"] | AnyString>
+ clipRule?: ConditionalValue<CssProperties["clipRule"] | AnyString>
  /**
    * The **`color`** CSS property sets the foreground color value of an element's text and text decorations, and sets the `currentcolor` value. `currentcolor` may be used as an indirect value on _other_ properties and is the default for other color properties, such as `border-color`.
    *
@@ -1776,6 +1785,7 @@ clipPath?: ConditionalValue<CssProperties["clipPath"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/color
    */
 color?: ConditionalValue<UtilityValues["color"] | CssVars | CssProperties["color"] | AnyString>
+ colorInterpolationFilters?: ConditionalValue<CssProperties["colorInterpolationFilters"] | AnyString>
  /**
    * The **`color-scheme`** CSS property allows an element to indicate which color schemes it can comfortably be rendered in.
    *
@@ -1949,18 +1959,6 @@ columns?: ConditionalValue<CssProperties["columns"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/contain
    */
 contain?: ConditionalValue<CssProperties["contain"] | AnyString>
- /**
-   * The **`contain-intrinsic-size`** CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.
-   *
-   * **Syntax**: `[ auto? [ none | <length> ] ]{1,2}`
-   *
-   * | Chrome | Firefox | Safari | Edge | IE  |
-   * | :----: | :-----: | :----: | :--: | :-: |
-   * | **83** | **107** | **17** | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size
-   */
-containIntrinsicSize?: ConditionalValue<CssProperties["containIntrinsicSize"] | AnyString>
  /**
    * The **`contain-intrinsic-block-size`** CSS logical property defines the block size of an element that a browser can use for layout when the element is subject to size containment.
    *
@@ -2003,6 +2001,18 @@ containIntrinsicHeight?: ConditionalValue<CssProperties["containIntrinsicHeight"
    * @see https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-contain-intrinsic-inline-size
    */
 containIntrinsicInlineSize?: ConditionalValue<CssProperties["containIntrinsicInlineSize"] | AnyString>
+ /**
+   * The **`contain-intrinsic-size`** CSS shorthand property sets the size of an element that a browser will use for layout when the element is subject to size containment.
+   *
+   * **Syntax**: `[ auto? [ none | <length> ] ]{1,2}`
+   *
+   * | Chrome | Firefox | Safari | Edge | IE  |
+   * | :----: | :-----: | :----: | :--: | :-: |
+   * | **83** | **107** | **17** | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/contain-intrinsic-size
+   */
+containIntrinsicSize?: ConditionalValue<CssProperties["containIntrinsicSize"] | AnyString>
  /**
    * The **`contain-intrinsic-width`** CSS property sets the width of an element that a browser will use for layout when the element is subject to size containment.
    *
@@ -2141,6 +2151,9 @@ counterSet?: ConditionalValue<CssProperties["counterSet"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/cursor
    */
 cursor?: ConditionalValue<CssProperties["cursor"] | AnyString>
+ cx?: ConditionalValue<CssProperties["cx"] | AnyString>
+ cy?: ConditionalValue<CssProperties["cy"] | AnyString>
+ d?: ConditionalValue<CssProperties["d"] | AnyString>
  /**
    * The **`direction`** CSS property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages).
    *
@@ -2169,6 +2182,7 @@ direction?: ConditionalValue<CssVars | CssProperties["direction"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/display
    */
 display?: ConditionalValue<CssVars | CssProperties["display"] | AnyString>
+ dominantBaseline?: ConditionalValue<CssProperties["dominantBaseline"] | AnyString>
  /**
    * The **`empty-cells`** CSS property sets whether borders and backgrounds appear around `<table>` cells that have no visible content.
    *
@@ -2183,6 +2197,10 @@ display?: ConditionalValue<CssVars | CssProperties["display"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/empty-cells
    */
 emptyCells?: ConditionalValue<CssVars | CssProperties["emptyCells"] | AnyString>
+ fieldSizing?: ConditionalValue<CssProperties["fieldSizing"] | AnyString>
+ fill?: ConditionalValue<UtilityValues["fill"] | CssVars | CssProperties["fill"] | AnyString>
+ fillOpacity?: ConditionalValue<CssProperties["fillOpacity"] | AnyString>
+ fillRule?: ConditionalValue<CssProperties["fillRule"] | AnyString>
  /**
    * The **`filter`** CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
    *
@@ -2313,6 +2331,8 @@ flexWrap?: ConditionalValue<CssVars | CssProperties["flexWrap"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/float
    */
 float?: ConditionalValue<UtilityValues["float"] | CssVars | AnyString>
+ floodColor?: ConditionalValue<CssProperties["floodColor"] | AnyString>
+ floodOpacity?: ConditionalValue<CssProperties["floodOpacity"] | AnyString>
  /**
    * The **`font`** CSS shorthand property sets all the different properties of an element's font. Alternatively, it sets an element's font to a system font.
    *
@@ -2410,20 +2430,6 @@ fontOpticalSizing?: ConditionalValue<CssProperties["fontOpticalSizing"] | AnyStr
    * @see https://developer.mozilla.org/docs/Web/CSS/font-palette
    */
 fontPalette?: ConditionalValue<CssProperties["fontPalette"] | AnyString>
- /**
-   * The **`font-variation-settings`** CSS property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.
-   *
-   * **Syntax**: `normal | [ <string> <number> ]#`
-   *
-   * **Initial value**: `normal`
-   *
-   * | Chrome | Firefox | Safari |  Edge  | IE  |
-   * | :----: | :-----: | :----: | :----: | :-: |
-   * | **62** | **62**  | **11** | **17** | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/font-variation-settings
-   */
-fontVariationSettings?: ConditionalValue<CssProperties["fontVariationSettings"] | AnyString>
  /**
    * The **`font-size`** CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative `<length>` units, such as `em`, `ex`, and so forth.
    *
@@ -2675,6 +2681,20 @@ fontVariantNumeric?: ConditionalValue<CssProperties["fontVariantNumeric"] | AnyS
    * @see https://developer.mozilla.org/docs/Web/CSS/font-variant-position
    */
 fontVariantPosition?: ConditionalValue<CssProperties["fontVariantPosition"] | AnyString>
+ /**
+   * The **`font-variation-settings`** CSS property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.
+   *
+   * **Syntax**: `normal | [ <string> <number> ]#`
+   *
+   * **Initial value**: `normal`
+   *
+   * | Chrome | Firefox | Safari |  Edge  | IE  |
+   * | :----: | :-----: | :----: | :----: | :-: |
+   * | **62** | **62**  | **11** | **17** | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/font-variation-settings
+   */
+fontVariationSettings?: ConditionalValue<CssProperties["fontVariationSettings"] | AnyString>
  /**
    * The **`font-weight`** CSS property sets the weight (or boldness) of the font. The weights available depend on the `font-family` that is currently set.
    *
@@ -3053,12 +3073,6 @@ initialLetter?: ConditionalValue<CssProperties["initialLetter"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/inline-size
    */
 inlineSize?: ConditionalValue<UtilityValues["inlineSize"] | CssVars | CssProperties["inlineSize"] | AnyString>
- /**
-   * **Syntax**: `auto | none`
-   *
-   * **Initial value**: `auto`
-   */
-inputSecurity?: ConditionalValue<CssProperties["inputSecurity"] | AnyString>
  /**
    * The **`inset`** CSS property is a shorthand that corresponds to the `top`, `right`, `bottom`, and/or `left` properties. It has the same multi-value syntax of the `margin` shorthand.
    *
@@ -3151,6 +3165,7 @@ insetInlineEnd?: ConditionalValue<UtilityValues["insetInlineEnd"] | CssVars | Cs
    * @see https://developer.mozilla.org/docs/Web/CSS/inset-inline-start
    */
 insetInlineStart?: ConditionalValue<UtilityValues["insetInlineStart"] | CssVars | CssProperties["insetInlineStart"] | AnyString>
+ interpolateSize?: ConditionalValue<CssProperties["interpolateSize"] | AnyString>
  /**
    * The **`isolation`** CSS property determines whether an element must create a new stacking context.
    *
@@ -3250,6 +3265,7 @@ left?: ConditionalValue<UtilityValues["left"] | CssVars | CssProperties["left"]
    * @see https://developer.mozilla.org/docs/Web/CSS/letter-spacing
    */
 letterSpacing?: ConditionalValue<UtilityValues["letterSpacing"] | CssVars | CssProperties["letterSpacing"] | AnyString>
+ lightingColor?: ConditionalValue<CssProperties["lightingColor"] | AnyString>
  /**
    * The **`line-break`** CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
    *
@@ -3517,6 +3533,10 @@ marginTop?: ConditionalValue<UtilityValues["marginTop"] | CssVars | CssPropertie
    * @see https://developer.mozilla.org/docs/Web/CSS/margin-trim
    */
 marginTrim?: ConditionalValue<CssProperties["marginTrim"] | AnyString>
+ marker?: ConditionalValue<CssProperties["marker"] | AnyString>
+ markerEnd?: ConditionalValue<CssProperties["markerEnd"] | AnyString>
+ markerMid?: ConditionalValue<CssProperties["markerMid"] | AnyString>
+ markerStart?: ConditionalValue<CssProperties["markerStart"] | AnyString>
  /**
    * The **`mask`** CSS shorthand property hides an element (partially or fully) by masking or clipping the image at specific points.
    *
@@ -4679,6 +4699,12 @@ pointerEvents?: ConditionalValue<CssVars | CssProperties["pointerEvents"] | AnyS
    * @see https://developer.mozilla.org/docs/Web/CSS/position
    */
 position?: ConditionalValue<CssVars | CssProperties["position"] | AnyString>
+ positionAnchor?: ConditionalValue<CssProperties["positionAnchor"] | AnyString>
+ positionArea?: ConditionalValue<CssProperties["positionArea"] | AnyString>
+ positionTry?: ConditionalValue<CssProperties["positionTry"] | AnyString>
+ positionTryFallbacks?: ConditionalValue<CssProperties["positionTryFallbacks"] | AnyString>
+ positionTryOrder?: ConditionalValue<CssProperties["positionTryOrder"] | AnyString>
+ positionVisibility?: ConditionalValue<CssProperties["positionVisibility"] | AnyString>
  /**
    * The **`print-color-adjust`** CSS property sets what, if anything, the user agent may do to optimize the appearance of the element on the output device. By default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the output device.
    *
@@ -4708,6 +4734,7 @@ printColorAdjust?: ConditionalValue<CssProperties["printColorAdjust"] | AnyStrin
    * @see https://developer.mozilla.org/docs/Web/CSS/quotes
    */
 quotes?: ConditionalValue<CssProperties["quotes"] | AnyString>
+ r?: ConditionalValue<CssProperties["r"] | AnyString>
  /**
    * The **`resize`** CSS property sets whether an element is resizable, and if so, in which directions.
    *
@@ -4799,6 +4826,8 @@ rubyMerge?: ConditionalValue<CssProperties["rubyMerge"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/ruby-position
    */
 rubyPosition?: ConditionalValue<CssProperties["rubyPosition"] | AnyString>
+ rx?: ConditionalValue<CssProperties["rx"] | AnyString>
+ ry?: ConditionalValue<CssProperties["ry"] | AnyString>
  /**
    * The **`scale`** CSS property allows you to specify scale transforms individually and independently of the `transform` property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the `transform` value.
    *
@@ -4813,48 +4842,6 @@ rubyPosition?: ConditionalValue<CssProperties["rubyPosition"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/scale
    */
 scale?: ConditionalValue<UtilityValues["scale"] | CssVars | CssProperties["scale"] | AnyString>
- /**
-   * The **`scrollbar-color`** CSS property sets the color of the scrollbar track and thumb.
-   *
-   * **Syntax**: `auto | <color>{2}`
-   *
-   * **Initial value**: `auto`
-   *
-   * | Chrome  | Firefox | Safari | Edge | IE  |
-   * | :-----: | :-----: | :----: | :--: | :-: |
-   * | **121** | **64**  |   No   | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-color
-   */
-scrollbarColor?: ConditionalValue<UtilityValues["scrollbarColor"] | CssVars | CssProperties["scrollbarColor"] | AnyString>
- /**
-   * The **`scrollbar-gutter`** CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
-   *
-   * **Syntax**: `auto | stable && both-edges?`
-   *
-   * **Initial value**: `auto`
-   *
-   * | Chrome | Firefox | Safari | Edge | IE  |
-   * | :----: | :-----: | :----: | :--: | :-: |
-   * | **94** | **97**  |   No   | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
-   */
-scrollbarGutter?: ConditionalValue<UtilityValues["scrollbarGutter"] | CssVars | CssProperties["scrollbarGutter"] | AnyString>
- /**
-   * The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
-   *
-   * **Syntax**: `auto | thin | none`
-   *
-   * **Initial value**: `auto`
-   *
-   * | Chrome  | Firefox | Safari | Edge | IE  |
-   * | :-----: | :-----: | :----: | :--: | :-: |
-   * | **121** | **64**  |   No   | n/a  | No  |
-   *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-width
-   */
-scrollbarWidth?: ConditionalValue<UtilityValues["scrollbarWidth"] | CssVars | CssProperties["scrollbarWidth"] | AnyString>
  /**
    * The **`scroll-behavior`** CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs.
    *
@@ -4895,7 +4882,7 @@ scrollMargin?: ConditionalValue<UtilityValues["scrollMargin"] | CssVars | CssPro
    */
 scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVars | CssProperties["scrollMarginBlock"] | AnyString>
  /**
-   * The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+   * The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
    * **Syntax**: `<length>`
    *
@@ -4905,11 +4892,11 @@ scrollMarginBlock?: ConditionalValue<UtilityValues["scrollMarginBlock"] | CssVar
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end
    */
-scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"] | CssVars | CssProperties["scrollMarginBlockStart"] | AnyString>
+scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] | CssVars | CssProperties["scrollMarginBlockEnd"] | AnyString>
  /**
-   * The `scroll-margin-block-end` property defines the margin of the scroll snap area at the end of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+   * The `scroll-margin-block-start` property defines the margin of the scroll snap area at the start of the block dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
    * **Syntax**: `<length>`
    *
@@ -4919,9 +4906,9 @@ scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-end
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-block-start
    */
-scrollMarginBlockEnd?: ConditionalValue<UtilityValues["scrollMarginBlockEnd"] | CssVars | CssProperties["scrollMarginBlockEnd"] | AnyString>
+scrollMarginBlockStart?: ConditionalValue<UtilityValues["scrollMarginBlockStart"] | CssVars | CssProperties["scrollMarginBlockStart"] | AnyString>
  /**
    * The `scroll-margin-bottom` property defines the bottom margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -4950,7 +4937,7 @@ scrollMarginBottom?: ConditionalValue<UtilityValues["scrollMarginBottom"] | CssV
    */
 scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssVars | CssProperties["scrollMarginInline"] | AnyString>
  /**
-   * The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+   * The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
    * **Syntax**: `<length>`
    *
@@ -4960,11 +4947,11 @@ scrollMarginInline?: ConditionalValue<UtilityValues["scrollMarginInline"] | CssV
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end
    */
-scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStart"] | CssVars | CssProperties["scrollMarginInlineStart"] | AnyString>
+scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"] | CssVars | CssProperties["scrollMarginInlineEnd"] | AnyString>
  /**
-   * The `scroll-margin-inline-end` property defines the margin of the scroll snap area at the end of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
+   * The `scroll-margin-inline-start` property defines the margin of the scroll snap area at the start of the inline dimension that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
    * **Syntax**: `<length>`
    *
@@ -4974,9 +4961,9 @@ scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStar
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-end
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-margin-inline-start
    */
-scrollMarginInlineEnd?: ConditionalValue<UtilityValues["scrollMarginInlineEnd"] | CssVars | CssProperties["scrollMarginInlineEnd"] | AnyString>
+scrollMarginInlineStart?: ConditionalValue<UtilityValues["scrollMarginInlineStart"] | CssVars | CssProperties["scrollMarginInlineStart"] | AnyString>
  /**
    * The `scroll-margin-left` property defines the left margin of the scroll snap area that is used for snapping this box to the snapport. The scroll snap area is determined by taking the transformed border box, finding its rectangular bounding box (axis-aligned in the scroll container's coordinate space), then adding the specified outsets.
    *
@@ -5047,7 +5034,7 @@ scrollPadding?: ConditionalValue<UtilityValues["scrollPadding"] | CssVars | CssP
    */
 scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssVars | CssProperties["scrollPaddingBlock"] | AnyString>
  /**
-   * The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
+   * The `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
    * **Syntax**: `auto | <length-percentage>`
    *
@@ -5057,11 +5044,11 @@ scrollPaddingBlock?: ConditionalValue<UtilityValues["scrollPaddingBlock"] | CssV
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end
    */
-scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStart"] | CssVars | CssProperties["scrollPaddingBlockStart"] | AnyString>
+scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"] | CssVars | CssProperties["scrollPaddingBlockEnd"] | AnyString>
  /**
-   * The `scroll-padding-block-end` property defines offsets for the end edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
+   * The `scroll-padding-block-start` property defines offsets for the start edge in the block dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
    * **Syntax**: `auto | <length-percentage>`
    *
@@ -5071,9 +5058,9 @@ scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStar
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-end
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-block-start
    */
-scrollPaddingBlockEnd?: ConditionalValue<UtilityValues["scrollPaddingBlockEnd"] | CssVars | CssProperties["scrollPaddingBlockEnd"] | AnyString>
+scrollPaddingBlockStart?: ConditionalValue<UtilityValues["scrollPaddingBlockStart"] | CssVars | CssProperties["scrollPaddingBlockStart"] | AnyString>
  /**
    * The `scroll-padding-bottom` property defines offsets for the bottom of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5101,7 +5088,7 @@ scrollPaddingBottom?: ConditionalValue<UtilityValues["scrollPaddingBottom"] | Cs
    */
 scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | CssVars | CssProperties["scrollPaddingInline"] | AnyString>
  /**
-   * The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
+   * The `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
    * **Syntax**: `auto | <length-percentage>`
    *
@@ -5111,11 +5098,11 @@ scrollPaddingInline?: ConditionalValue<UtilityValues["scrollPaddingInline"] | Cs
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end
    */
-scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineStart"] | CssVars | CssProperties["scrollPaddingInlineStart"] | AnyString>
+scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"] | CssVars | CssProperties["scrollPaddingInlineEnd"] | AnyString>
  /**
-   * The `scroll-padding-inline-end` property defines offsets for the end edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
+   * The `scroll-padding-inline-start` property defines offsets for the start edge in the inline dimension of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
    * **Syntax**: `auto | <length-percentage>`
    *
@@ -5125,9 +5112,9 @@ scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineSt
    * | :----: | :-----: | :----: | :--: | :-: |
    * | **69** | **68**  | **15** | n/a  | No  |
    *
-   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-end
+   * @see https://developer.mozilla.org/docs/Web/CSS/scroll-padding-inline-start
    */
-scrollPaddingInlineEnd?: ConditionalValue<UtilityValues["scrollPaddingInlineEnd"] | CssVars | CssProperties["scrollPaddingInlineEnd"] | AnyString>
+scrollPaddingInlineStart?: ConditionalValue<UtilityValues["scrollPaddingInlineStart"] | CssVars | CssProperties["scrollPaddingInlineStart"] | AnyString>
  /**
    * The `scroll-padding-left` property defines offsets for the left of the _optimal viewing region_ of the scrollport: the region used as the target region for placing things in view of the user. This allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or to put more breathing room between a targeted element and the edges of the scrollport.
    *
@@ -5259,6 +5246,48 @@ scrollTimelineAxis?: ConditionalValue<CssProperties["scrollTimelineAxis"] | AnyS
    * @see https://developer.mozilla.org/docs/Web/CSS/scroll-timeline-name
    */
 scrollTimelineName?: ConditionalValue<CssProperties["scrollTimelineName"] | AnyString>
+ /**
+   * The **`scrollbar-color`** CSS property sets the color of the scrollbar track and thumb.
+   *
+   * **Syntax**: `auto | <color>{2}`
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome  | Firefox | Safari | Edge | IE  |
+   * | :-----: | :-----: | :----: | :--: | :-: |
+   * | **121** | **64**  |   No   | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-color
+   */
+scrollbarColor?: ConditionalValue<UtilityValues["scrollbarColor"] | CssVars | CssProperties["scrollbarColor"] | AnyString>
+ /**
+   * The **`scrollbar-gutter`** CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.
+   *
+   * **Syntax**: `auto | stable && both-edges?`
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome | Firefox | Safari | Edge | IE  |
+   * | :----: | :-----: | :----: | :--: | :-: |
+   * | **94** | **97**  |   No   | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-gutter
+   */
+scrollbarGutter?: ConditionalValue<CssProperties["scrollbarGutter"] | AnyString>
+ /**
+   * The **`scrollbar-width`** property allows the author to set the maximum thickness of an element's scrollbars when they are shown.
+   *
+   * **Syntax**: `auto | thin | none`
+   *
+   * **Initial value**: `auto`
+   *
+   * | Chrome  | Firefox | Safari | Edge | IE  |
+   * | :-----: | :-----: | :----: | :--: | :-: |
+   * | **121** | **64**  |   No   | n/a  | No  |
+   *
+   * @see https://developer.mozilla.org/docs/Web/CSS/scrollbar-width
+   */
+scrollbarWidth?: ConditionalValue<UtilityValues["scrollbarWidth"] | CssVars | CssProperties["scrollbarWidth"] | AnyString>
  /**
    * The **`shape-image-threshold`** CSS property sets the alpha channel threshold used to extract the shape using an image as the value for `shape-outside`.
    *
@@ -5301,6 +5330,17 @@ shapeMargin?: ConditionalValue<CssProperties["shapeMargin"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/shape-outside
    */
 shapeOutside?: ConditionalValue<CssProperties["shapeOutside"] | AnyString>
+ shapeRendering?: ConditionalValue<CssProperties["shapeRendering"] | AnyString>
+ stopColor?: ConditionalValue<CssProperties["stopColor"] | AnyString>
+ stopOpacity?: ConditionalValue<CssProperties["stopOpacity"] | AnyString>
+ stroke?: ConditionalValue<UtilityValues["stroke"] | CssVars | CssProperties["stroke"] | AnyString>
+ strokeDasharray?: ConditionalValue<CssProperties["strokeDasharray"] | AnyString>
+ strokeDashoffset?: ConditionalValue<CssProperties["strokeDashoffset"] | AnyString>
+ strokeLinecap?: ConditionalValue<CssProperties["strokeLinecap"] | AnyString>
+ strokeLinejoin?: ConditionalValue<CssProperties["strokeLinejoin"] | AnyString>
+ strokeMiterlimit?: ConditionalValue<CssProperties["strokeMiterlimit"] | AnyString>
+ strokeOpacity?: ConditionalValue<CssProperties["strokeOpacity"] | AnyString>
+ strokeWidth?: ConditionalValue<UtilityValues["strokeWidth"] | CssVars | CssProperties["strokeWidth"] | AnyString>
  /**
    * The **`tab-size`** CSS property is used to customize the width of tab characters (U+0009).
    *
@@ -5358,6 +5398,10 @@ textAlign?: ConditionalValue<CssProperties["textAlign"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/text-align-last
    */
 textAlignLast?: ConditionalValue<CssProperties["textAlignLast"] | AnyString>
+ textAnchor?: ConditionalValue<CssProperties["textAnchor"] | AnyString>
+ textBox?: ConditionalValue<CssProperties["textBox"] | AnyString>
+ textBoxEdge?: ConditionalValue<CssProperties["textBoxEdge"] | AnyString>
+ textBoxTrim?: ConditionalValue<CssProperties["textBoxTrim"] | AnyString>
  /**
    * The **`text-combine-upright`** CSS property sets the combination of characters into the space of a single character. If the combined text is wider than 1em, the user agent must fit the contents within 1em. The resulting composition is treated as a single upright glyph for layout and decoration. This property only has an effect in vertical writing modes.
    *
@@ -5630,6 +5674,7 @@ textShadow?: ConditionalValue<UtilityValues["textShadow"] | CssVars | CssPropert
    * @see https://developer.mozilla.org/docs/Web/CSS/text-size-adjust
    */
 textSizeAdjust?: ConditionalValue<CssProperties["textSizeAdjust"] | AnyString>
+ textSpacingTrim?: ConditionalValue<CssProperties["textSpacingTrim"] | AnyString>
  /**
    * The **`text-transform`** CSS property specifies how to capitalize an element's text. It can be used to make text appear in all-uppercase or all-lowercase, or with each word capitalized. It also can help improve legibility for ruby.
    *
@@ -5687,6 +5732,8 @@ textUnderlinePosition?: ConditionalValue<CssProperties["textUnderlinePosition"]
    * @see https://developer.mozilla.org/docs/Web/CSS/text-wrap
    */
 textWrap?: ConditionalValue<UtilityValues["textWrap"] | CssVars | CssProperties["textWrap"] | AnyString>
+ textWrapMode?: ConditionalValue<CssProperties["textWrapMode"] | AnyString>
+ textWrapStyle?: ConditionalValue<CssProperties["textWrapStyle"] | AnyString>
  /**
    * The **`timeline-scope`** CSS property modifies the scope of a named animation timeline.
    *
@@ -5919,6 +5966,7 @@ unicodeBidi?: ConditionalValue<CssProperties["unicodeBidi"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/user-select
    */
 userSelect?: ConditionalValue<CssVars | CssProperties["userSelect"] | AnyString>
+ vectorEffect?: ConditionalValue<CssProperties["vectorEffect"] | AnyString>
  /**
    * The **`vertical-align`** CSS property sets vertical alignment of an inline, inline-block or table-cell box.
    *
@@ -6140,6 +6188,8 @@ wordWrap?: ConditionalValue<CssProperties["wordWrap"] | AnyString>
    * @see https://developer.mozilla.org/docs/Web/CSS/writing-mode
    */
 writingMode?: ConditionalValue<CssVars | CssProperties["writingMode"] | AnyString>
+ x?: ConditionalValue<UtilityValues["translateX"] | CssVars | AnyString>
+ y?: ConditionalValue<UtilityValues["translateY"] | CssVars | AnyString>
  /**
    * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
    *
@@ -6170,34 +6220,9 @@ zIndex?: ConditionalValue<UtilityValues["zIndex"] | CssVars | CssProperties["zIn
 zoom?: ConditionalValue<CssProperties["zoom"] | AnyString>
  alignmentBaseline?: ConditionalValue<CssProperties["alignmentBaseline"] | AnyString>
  baselineShift?: ConditionalValue<CssProperties["baselineShift"] | AnyString>
- clipRule?: ConditionalValue<CssProperties["clipRule"] | AnyString>
  colorInterpolation?: ConditionalValue<CssProperties["colorInterpolation"] | AnyString>
  colorRendering?: ConditionalValue<CssProperties["colorRendering"] | AnyString>
- dominantBaseline?: ConditionalValue<CssProperties["dominantBaseline"] | AnyString>
- fill?: ConditionalValue<UtilityValues["fill"] | CssVars | CssProperties["fill"] | AnyString>
- fillOpacity?: ConditionalValue<CssProperties["fillOpacity"] | AnyString>
- fillRule?: ConditionalValue<CssProperties["fillRule"] | AnyString>
- floodColor?: ConditionalValue<CssProperties["floodColor"] | AnyString>
- floodOpacity?: ConditionalValue<CssProperties["floodOpacity"] | AnyString>
  glyphOrientationVertical?: ConditionalValue<CssProperties["glyphOrientationVertical"] | AnyString>
- lightingColor?: ConditionalValue<CssProperties["lightingColor"] | AnyString>
- marker?: ConditionalValue<CssProperties["marker"] | AnyString>
- markerEnd?: ConditionalValue<CssProperties["markerEnd"] | AnyString>
- markerMid?: ConditionalValue<CssProperties["markerMid"] | AnyString>
- markerStart?: ConditionalValue<CssProperties["markerStart"] | AnyString>
- shapeRendering?: ConditionalValue<CssProperties["shapeRendering"] | AnyString>
- stopColor?: ConditionalValue<CssProperties["stopColor"] | AnyString>
- stopOpacity?: ConditionalValue<CssProperties["stopOpacity"] | AnyString>
- stroke?: ConditionalValue<UtilityValues["stroke"] | CssVars | CssProperties["stroke"] | AnyString>
- strokeDasharray?: ConditionalValue<CssProperties["strokeDasharray"] | AnyString>
- strokeDashoffset?: ConditionalValue<CssProperties["strokeDashoffset"] | AnyString>
- strokeLinecap?: ConditionalValue<CssProperties["strokeLinecap"] | AnyString>
- strokeLinejoin?: ConditionalValue<CssProperties["strokeLinejoin"] | AnyString>
- strokeMiterlimit?: ConditionalValue<CssProperties["strokeMiterlimit"] | AnyString>
- strokeOpacity?: ConditionalValue<CssProperties["strokeOpacity"] | AnyString>
- strokeWidth?: ConditionalValue<UtilityValues["strokeWidth"] | CssVars | CssProperties["strokeWidth"] | AnyString>
- textAnchor?: ConditionalValue<CssProperties["textAnchor"] | AnyString>
- vectorEffect?: ConditionalValue<CssProperties["vectorEffect"] | AnyString>
  /**
    * The **`position`** CSS property sets how an element is positioned in a document. The `top`, `right`, `bottom`, and `left` properties determine the final location of positioned elements.
    *
@@ -7281,8 +7306,6 @@ borderEndColor?: ConditionalValue<UtilityValues["borderInlineEndColor"] | CssVar
    */
 shadow?: ConditionalValue<UtilityValues["boxShadow"] | CssVars | CssProperties["boxShadow"] | AnyString>
  shadowColor?: ConditionalValue<UtilityValues["boxShadowColor"] | CssVars | AnyString>
- x?: ConditionalValue<UtilityValues["translateX"] | CssVars | AnyString>
- y?: ConditionalValue<UtilityValues["translateY"] | CssVars | AnyString>
  z?: ConditionalValue<UtilityValues["translateZ"] | CssVars | AnyString>
  /**
    * The `scroll-margin-block` shorthand property sets the scroll margins of an element in the block dimension.