@yahoo/uds-v5-wip 1.61.0 → 1.62.0

package/dist/config/dist/types/css-properties.d.ts

@@ -1,4 +1,5 @@
 import { CssValue, CssVarRef } from "./css-values.js";
+import { CSS_PROPERTY_KEYWORDS } from "./css-property-keywords.js";
 
 //#region ../config/dist/types/css-properties.d.ts
 //#region src/types/css-properties.d.ts
@@ -11,7 +12,6 @@ type TimeOrVar = CssValue['time'] | CssVarRef;
 type AngleOrVar = CssValue['angle'] | CssVarRef;
 type IntrinsicSize = 'auto' | 'min-content' | 'max-content' | 'fit-content';
 type GlobalKeyword = 'inherit' | 'initial' | 'unset' | 'revert';
-type BorderStyleKeyword = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset';
 type CssPropertyValues = {
   gap: LengthPercentageOrVar;
   'column-gap': LengthPercentageOrVar;
@@ -25,22 +25,26 @@ type CssPropertyValues = {
   'padding-inline': LengthPercentageOrVar;
   'padding-inline-start': LengthPercentageOrVar;
   'padding-inline-end': LengthPercentageOrVar;
-  margin: LengthPercentageOrVar | 'auto';
-  'margin-top': LengthPercentageOrVar | 'auto';
-  'margin-right': LengthPercentageOrVar | 'auto';
-  'margin-bottom': LengthPercentageOrVar | 'auto';
-  'margin-left': LengthPercentageOrVar | 'auto';
-  'margin-block': LengthPercentageOrVar | 'auto';
-  'margin-inline': LengthPercentageOrVar | 'auto';
-  'margin-inline-start': LengthPercentageOrVar | 'auto';
-  'margin-inline-end': LengthPercentageOrVar | 'auto';
-  top: LengthPercentageOrVar | 'auto';
-  right: LengthPercentageOrVar | 'auto';
-  bottom: LengthPercentageOrVar | 'auto';
-  left: LengthPercentageOrVar | 'auto';
-  inset: LengthPercentageOrVar | 'auto';
-  'inset-block': LengthPercentageOrVar | 'auto';
-  'inset-inline': LengthPercentageOrVar | 'auto';
+  margin: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin'][number];
+  'margin-top': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-top'][number];
+  'margin-right': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-right'][number];
+  'margin-bottom': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-bottom'][number];
+  'margin-left': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-left'][number];
+  'margin-block': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-block'][number];
+  'margin-inline': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline'][number];
+  'margin-inline-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline-start'][number];
+  'margin-inline-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['margin-inline-end'][number];
+  top: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['top'][number];
+  right: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['right'][number];
+  bottom: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['bottom'][number];
+  left: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['left'][number];
+  inset: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset'][number];
+  'inset-block': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block'][number];
+  'inset-inline': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline'][number];
+  'inset-inline-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline-start'][number];
+  'inset-inline-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-inline-end'][number];
+  'inset-block-start': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block-start'][number];
+  'inset-block-end': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['inset-block-end'][number];
   'scroll-margin': LengthPercentageOrVar;
   'scroll-margin-top': LengthPercentageOrVar;
   'scroll-margin-bottom': LengthPercentageOrVar;
@@ -58,19 +62,19 @@ type CssPropertyValues = {
   width: LengthPercentageOrVar | IntrinsicSize;
   height: LengthPercentageOrVar | IntrinsicSize;
   'min-width': LengthPercentageOrVar | IntrinsicSize;
-  'max-width': LengthPercentageOrVar | IntrinsicSize | 'none';
+  'max-width': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['max-width'][number];
   'min-height': LengthPercentageOrVar | IntrinsicSize;
-  'max-height': LengthPercentageOrVar | IntrinsicSize | 'none';
-  'border-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-top-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-right-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-bottom-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-left-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-block-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-inline-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-inline-start-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'border-inline-end-width': LengthOrVar | 'thin' | 'medium' | 'thick';
-  'outline-width': LengthOrVar | 'thin' | 'medium' | 'thick';
+  'max-height': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['max-height'][number];
+  'border-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-width'][number];
+  'border-top-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-top-width'][number];
+  'border-right-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-right-width'][number];
+  'border-bottom-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-bottom-width'][number];
+  'border-left-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-left-width'][number];
+  'border-block-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-block-width'][number];
+  'border-inline-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-width'][number];
+  'border-inline-start-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-start-width'][number];
+  'border-inline-end-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['border-inline-end-width'][number];
+  'outline-width': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['outline-width'][number];
   'outline-offset': LengthOrVar;
   'border-spacing': LengthOrVar;
   'border-radius': LengthPercentageOrVar;
@@ -82,13 +86,18 @@ type CssPropertyValues = {
   'border-start-end-radius': LengthPercentageOrVar;
   'border-end-start-radius': LengthPercentageOrVar;
   'border-end-end-radius': LengthPercentageOrVar;
-  'border-style': BorderStyleKeyword | CssVarRef;
-  'outline-style': BorderStyleKeyword | 'auto' | CssVarRef;
-  'text-decoration-style': 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' | CssVarRef;
-  'text-decoration-thickness': LengthPercentageOrVar | 'auto' | 'from-font';
-  'text-underline-offset': LengthOrVar | 'auto';
+  'border-style': (typeof CSS_PROPERTY_KEYWORDS)['border-style'][number] | CssVarRef;
+  'border-top-style': (typeof CSS_PROPERTY_KEYWORDS)['border-top-style'][number] | CssVarRef;
+  'border-bottom-style': (typeof CSS_PROPERTY_KEYWORDS)['border-bottom-style'][number] | CssVarRef;
+  'border-inline-start-style': (typeof CSS_PROPERTY_KEYWORDS)['border-inline-start-style'][number] | CssVarRef;
+  'border-inline-end-style': (typeof CSS_PROPERTY_KEYWORDS)['border-inline-end-style'][number] | CssVarRef;
+  'outline-style': (typeof CSS_PROPERTY_KEYWORDS)['outline-style'][number] | CssVarRef;
+  'text-decoration-style': (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-style'][number] | CssVarRef;
+  'text-decoration-thickness': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-thickness'][number];
+  'text-underline-offset': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['text-underline-offset'][number];
   color: ColorOrVar;
   'background-color': ColorOrVar;
+  'background-image': string;
   'border-color': ColorOrVar;
   'border-top-color': ColorOrVar;
   'border-right-color': ColorOrVar;
@@ -98,125 +107,126 @@ type CssPropertyValues = {
   'border-inline-color': ColorOrVar;
   'border-inline-start-color': ColorOrVar;
   'border-inline-end-color': ColorOrVar;
-  'outline-color': ColorOrVar | 'invert';
+  'outline-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['outline-color'][number];
   'text-decoration-color': ColorOrVar;
-  'caret-color': ColorOrVar | 'auto';
-  fill: ColorOrVar | 'none' | 'context-fill' | 'context-stroke';
-  stroke: ColorOrVar | 'none' | 'context-fill' | 'context-stroke';
+  'caret-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['caret-color'][number];
+  fill: ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['fill'][number];
+  stroke: ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['stroke'][number];
   'stroke-width': LengthPercentageOrVar | CssValue['number'];
-  'scrollbar-color': ColorOrVar | 'auto' | `${string} ${string}`;
-  'font-size': LengthPercentageOrVar | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'smaller' | 'larger';
+  'scrollbar-color': ColorOrVar | (typeof CSS_PROPERTY_KEYWORDS)['scrollbar-color'][number] | `${string} ${string}`;
+  'font-size': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['font-size'][number];
   'font-weight': CssValue['font-weight'] | CssVarRef;
   'font-family': CssValue['font-family'] | CssVarRef;
-  'font-style': 'normal' | 'italic' | 'oblique' | `oblique ${string}` | CssVarRef;
-  'font-stretch': CssValue['percentage'] | 'normal' | 'ultra-condensed' | 'extra-condensed' | 'condensed' | 'semi-condensed' | 'semi-expanded' | 'expanded' | 'extra-expanded' | 'ultra-expanded' | CssVarRef;
+  'font-style': (typeof CSS_PROPERTY_KEYWORDS)['font-style'][number] | `oblique ${string}` | CssVarRef;
+  'font-stretch': CssValue['percentage'] | (typeof CSS_PROPERTY_KEYWORDS)['font-stretch'][number] | CssVarRef;
   'font-variant-numeric': string | CssVarRef;
-  'line-height': LengthPercentageOrVar | NumberOrVar | 'normal';
-  'letter-spacing': LengthOrVar | 'normal';
-  'text-align': 'left' | 'right' | 'center' | 'justify' | 'start' | 'end' | CssVarRef;
-  'text-transform': 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana' | CssVarRef;
+  'line-height': LengthPercentageOrVar | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['line-height'][number];
+  'letter-spacing': LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['letter-spacing'][number];
+  'text-align': (typeof CSS_PROPERTY_KEYWORDS)['text-align'][number] | CssVarRef;
+  'text-transform': (typeof CSS_PROPERTY_KEYWORDS)['text-transform'][number] | CssVarRef;
   'text-indent': LengthPercentageOrVar;
-  'text-wrap': 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable' | CssVarRef;
-  'text-overflow': 'clip' | 'ellipsis' | string;
-  'text-decoration-line': 'none' | 'underline' | 'overline' | 'line-through' | 'blink' | string | CssVarRef;
-  'text-shadow': CssValue['shadow'] | 'none' | CssVarRef;
-  'white-space': 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | CssVarRef;
-  'word-break': 'normal' | 'break-all' | 'keep-all' | 'break-word' | CssVarRef;
-  'overflow-wrap': 'normal' | 'break-word' | 'anywhere' | CssVarRef;
-  hyphens: 'none' | 'manual' | 'auto' | CssVarRef;
+  'text-wrap': (typeof CSS_PROPERTY_KEYWORDS)['text-wrap'][number] | CssVarRef;
+  'text-overflow': (typeof CSS_PROPERTY_KEYWORDS)['text-overflow'][number] | string;
+  'text-decoration-line': (typeof CSS_PROPERTY_KEYWORDS)['text-decoration-line'][number] | string | CssVarRef;
+  'text-shadow': CssValue['shadow'] | (typeof CSS_PROPERTY_KEYWORDS)['text-shadow'][number] | CssVarRef;
+  'white-space': (typeof CSS_PROPERTY_KEYWORDS)['white-space'][number] | CssVarRef;
+  'word-break': (typeof CSS_PROPERTY_KEYWORDS)['word-break'][number] | CssVarRef;
+  'overflow-wrap': (typeof CSS_PROPERTY_KEYWORDS)['overflow-wrap'][number] | CssVarRef;
+  hyphens: (typeof CSS_PROPERTY_KEYWORDS)['hyphens'][number] | CssVarRef;
   'list-style-type': string | CssVarRef;
-  'list-style-image': CssValue['url'] | 'none' | CssVarRef;
-  'list-style-position': 'inside' | 'outside' | CssVarRef;
-  'vertical-align': LengthPercentageOrVar | 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom';
-  '-webkit-font-smoothing': 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased';
-  '-webkit-line-clamp': IntegerOrVar | 'none';
-  display: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'inline-table' | 'table-row-group' | 'table-header-group' | 'table-footer-group' | 'table-row' | 'table-cell' | 'table-column-group' | 'table-column' | 'table-caption' | 'list-item' | CssVarRef;
-  visibility: 'visible' | 'hidden' | 'collapse' | CssVarRef;
-  isolation: 'auto' | 'isolate' | CssVarRef;
-  position: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | CssVarRef;
-  'box-sizing': 'content-box' | 'border-box' | CssVarRef;
-  'container-type': 'normal' | 'size' | 'inline-size' | CssVarRef;
-  columns: IntegerOrVar | LengthOrVar | 'auto' | `${number} ${string}`;
-  flex: string | NumberOrVar | 'none' | 'auto' | 'initial';
-  'flex-direction': 'row' | 'row-reverse' | 'column' | 'column-reverse' | CssVarRef;
-  'flex-wrap': 'nowrap' | 'wrap' | 'wrap-reverse' | CssVarRef;
+  'list-style-image': CssValue['url'] | (typeof CSS_PROPERTY_KEYWORDS)['list-style-image'][number] | CssVarRef;
+  'list-style-position': (typeof CSS_PROPERTY_KEYWORDS)['list-style-position'][number] | CssVarRef;
+  'vertical-align': LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['vertical-align'][number];
+  '-webkit-font-smoothing': (typeof CSS_PROPERTY_KEYWORDS)['-webkit-font-smoothing'][number];
+  '-webkit-line-clamp': IntegerOrVar | (typeof CSS_PROPERTY_KEYWORDS)['-webkit-line-clamp'][number];
+  display: (typeof CSS_PROPERTY_KEYWORDS)['display'][number] | CssVarRef;
+  visibility: (typeof CSS_PROPERTY_KEYWORDS)['visibility'][number] | CssVarRef;
+  isolation: (typeof CSS_PROPERTY_KEYWORDS)['isolation'][number] | CssVarRef;
+  position: (typeof CSS_PROPERTY_KEYWORDS)['position'][number] | CssVarRef;
+  'box-sizing': (typeof CSS_PROPERTY_KEYWORDS)['box-sizing'][number] | CssVarRef;
+  'container-type': (typeof CSS_PROPERTY_KEYWORDS)['container-type'][number] | CssVarRef;
+  columns: IntegerOrVar | LengthOrVar | (typeof CSS_PROPERTY_KEYWORDS)['columns'][number] | `${number} ${string}`;
+  flex: string | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['flex'][number];
+  'flex-direction': (typeof CSS_PROPERTY_KEYWORDS)['flex-direction'][number] | CssVarRef;
+  'flex-wrap': (typeof CSS_PROPERTY_KEYWORDS)['flex-wrap'][number] | CssVarRef;
   'flex-grow': NumberOrVar;
   'flex-shrink': NumberOrVar;
-  'justify-content': 'flex-start' | 'flex-end' | 'start' | 'end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'normal' | 'left' | 'right' | CssVarRef;
-  'align-items': 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | `first baseline` | `last baseline` | CssVarRef;
-  'align-content': 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'baseline' | CssVarRef;
-  'align-self': 'auto' | 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'baseline' | CssVarRef;
+  'flex-basis': LengthPercentageOrVar | IntrinsicSize | (typeof CSS_PROPERTY_KEYWORDS)['flex-basis'][number];
+  'justify-content': (typeof CSS_PROPERTY_KEYWORDS)['justify-content'][number] | CssVarRef;
+  'align-items': (typeof CSS_PROPERTY_KEYWORDS)['align-items'][number] | CssVarRef;
+  'align-content': (typeof CSS_PROPERTY_KEYWORDS)['align-content'][number] | CssVarRef;
+  'align-self': (typeof CSS_PROPERTY_KEYWORDS)['align-self'][number] | CssVarRef;
   'place-content': string | CssVarRef;
   'place-items': string | CssVarRef;
   'place-self': string | CssVarRef;
   order: IntegerOrVar;
-  'grid-template-columns': string | 'none' | CssVarRef;
-  'grid-template-rows': string | 'none' | CssVarRef;
-  'grid-column': string | 'auto' | CssVarRef;
-  'grid-column-start': string | 'auto' | CssVarRef;
-  'grid-column-end': string | 'auto' | CssVarRef;
-  'grid-row': string | 'auto' | CssVarRef;
-  'grid-row-start': string | 'auto' | CssVarRef;
-  'grid-row-end': string | 'auto' | CssVarRef;
-  transform: string | 'none' | CssVarRef;
+  'grid-template-columns': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-template-columns'][number] | CssVarRef;
+  'grid-template-rows': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-template-rows'][number] | CssVarRef;
+  'grid-column': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column'][number] | CssVarRef;
+  'grid-column-start': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column-start'][number] | CssVarRef;
+  'grid-column-end': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-column-end'][number] | CssVarRef;
+  'grid-row': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row'][number] | CssVarRef;
+  'grid-row-start': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row-start'][number] | CssVarRef;
+  'grid-row-end': string | (typeof CSS_PROPERTY_KEYWORDS)['grid-row-end'][number] | CssVarRef;
+  transform: string | (typeof CSS_PROPERTY_KEYWORDS)['transform'][number] | CssVarRef;
   'transform-origin': string | CssVarRef;
-  rotate: AngleOrVar | 'none' | `${number}` | `${string} ${string}`;
-  scale: NumberOrVar | 'none' | `${number} ${number}` | `${number} ${number} ${number}`;
-  translate: LengthPercentageOrVar | 'none' | `${string} ${string}` | `${string} ${string} ${string}`;
-  transition: string | 'none' | CssVarRef;
-  'transition-property': string | 'none' | 'all' | CssVarRef;
+  rotate: AngleOrVar | (typeof CSS_PROPERTY_KEYWORDS)['rotate'][number] | `${number}` | `${string} ${string}`;
+  scale: NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['scale'][number] | `${number} ${number}` | `${number} ${number} ${number}`;
+  translate: LengthPercentageOrVar | (typeof CSS_PROPERTY_KEYWORDS)['translate'][number] | `${string} ${string}` | `${string} ${string} ${string}`;
+  transition: string | (typeof CSS_PROPERTY_KEYWORDS)['transition'][number] | CssVarRef;
+  'transition-property': string | (typeof CSS_PROPERTY_KEYWORDS)['transition-property'][number] | CssVarRef;
   'transition-duration': TimeOrVar;
   'transition-delay': TimeOrVar;
   'transition-timing-function': CssValue['easing-function'] | CssVarRef;
-  'transition-behavior': 'normal' | 'allow-discrete' | CssVarRef;
-  animation: string | 'none' | CssVarRef;
+  'transition-behavior': (typeof CSS_PROPERTY_KEYWORDS)['transition-behavior'][number] | CssVarRef;
+  animation: string | (typeof CSS_PROPERTY_KEYWORDS)['animation'][number] | CssVarRef;
   opacity: CssValue['percentage'] | NumberOrVar;
-  'box-shadow': CssValue['shadow'] | 'none' | CssVarRef;
-  filter: string | 'none' | CssVarRef;
-  'backdrop-filter': string | 'none' | CssVarRef;
-  'mix-blend-mode': 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | 'plus-darker' | 'plus-lighter' | CssVarRef;
-  'background-blend-mode': 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity' | CssVarRef;
-  overflow: 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | CssVarRef;
-  'overflow-x': 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | CssVarRef;
-  'overflow-y': 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | CssVarRef;
-  'overscroll-behavior': 'auto' | 'contain' | 'none' | CssVarRef;
-  'scroll-behavior': 'auto' | 'smooth' | CssVarRef;
-  'scroll-snap-align': 'none' | 'start' | 'end' | 'center' | CssVarRef;
-  'scroll-snap-stop': 'normal' | 'always' | CssVarRef;
-  'scroll-snap-type': string | 'none' | CssVarRef;
-  'scrollbar-width': 'auto' | 'thin' | 'none' | CssVarRef;
-  cursor: 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'all-scroll' | 'col-resize' | 'row-resize' | 'n-resize' | 'e-resize' | 's-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'sw-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'zoom-in' | 'zoom-out' | CssValue['url'] | CssVarRef;
-  'pointer-events': 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | CssVarRef;
-  'user-select': 'none' | 'auto' | 'text' | 'contain' | 'all' | CssVarRef;
-  resize: 'none' | 'both' | 'horizontal' | 'vertical' | 'block' | 'inline' | CssVarRef;
-  appearance: 'none' | 'auto' | 'menulist-button' | 'textfield' | CssVarRef;
-  'touch-action': string | 'auto' | 'none' | 'manipulation' | CssVarRef;
-  'will-change': 'auto' | 'scroll-position' | 'contents' | string | CssVarRef;
-  'z-index': IntegerOrVar | 'auto';
-  'aspect-ratio': CssValue['ratio'] | NumberOrVar | 'auto';
-  'object-fit': 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | CssVarRef;
+  'fill-opacity': CssValue['percentage'] | NumberOrVar;
+  'box-shadow': CssValue['shadow'] | (typeof CSS_PROPERTY_KEYWORDS)['box-shadow'][number] | CssVarRef;
+  filter: string | (typeof CSS_PROPERTY_KEYWORDS)['filter'][number] | CssVarRef;
+  'backdrop-filter': string | (typeof CSS_PROPERTY_KEYWORDS)['backdrop-filter'][number] | CssVarRef;
+  'mix-blend-mode': (typeof CSS_PROPERTY_KEYWORDS)['mix-blend-mode'][number] | CssVarRef;
+  'background-blend-mode': (typeof CSS_PROPERTY_KEYWORDS)['background-blend-mode'][number] | CssVarRef;
+  overflow: (typeof CSS_PROPERTY_KEYWORDS)['overflow'][number] | CssVarRef;
+  'overflow-x': (typeof CSS_PROPERTY_KEYWORDS)['overflow-x'][number] | CssVarRef;
+  'overflow-y': (typeof CSS_PROPERTY_KEYWORDS)['overflow-y'][number] | CssVarRef;
+  'overscroll-behavior': (typeof CSS_PROPERTY_KEYWORDS)['overscroll-behavior'][number] | CssVarRef;
+  'scroll-behavior': (typeof CSS_PROPERTY_KEYWORDS)['scroll-behavior'][number] | CssVarRef;
+  'scroll-snap-align': (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-align'][number] | CssVarRef;
+  'scroll-snap-stop': (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-stop'][number] | CssVarRef;
+  'scroll-snap-type': string | (typeof CSS_PROPERTY_KEYWORDS)['scroll-snap-type'][number] | CssVarRef;
+  'scrollbar-width': (typeof CSS_PROPERTY_KEYWORDS)['scrollbar-width'][number] | CssVarRef;
+  cursor: (typeof CSS_PROPERTY_KEYWORDS)['cursor'][number] | CssValue['url'] | CssVarRef;
+  'pointer-events': (typeof CSS_PROPERTY_KEYWORDS)['pointer-events'][number] | CssVarRef;
+  'user-select': (typeof CSS_PROPERTY_KEYWORDS)['user-select'][number] | CssVarRef;
+  resize: (typeof CSS_PROPERTY_KEYWORDS)['resize'][number] | CssVarRef;
+  appearance: (typeof CSS_PROPERTY_KEYWORDS)['appearance'][number] | CssVarRef;
+  'touch-action': string | (typeof CSS_PROPERTY_KEYWORDS)['touch-action'][number] | CssVarRef;
+  'will-change': (typeof CSS_PROPERTY_KEYWORDS)['will-change'][number] | string | CssVarRef;
+  'z-index': IntegerOrVar | (typeof CSS_PROPERTY_KEYWORDS)['z-index'][number];
+  'aspect-ratio': CssValue['ratio'] | NumberOrVar | (typeof CSS_PROPERTY_KEYWORDS)['aspect-ratio'][number];
+  'object-fit': (typeof CSS_PROPERTY_KEYWORDS)['object-fit'][number] | CssVarRef;
   'object-position': string | CssVarRef;
-  'caption-side': 'top' | 'bottom' | 'inline-start' | 'inline-end' | CssVarRef;
-  'border-collapse': 'collapse' | 'separate' | CssVarRef;
-  'table-layout': 'auto' | 'fixed' | CssVarRef;
+  'caption-side': (typeof CSS_PROPERTY_KEYWORDS)['caption-side'][number] | CssVarRef;
+  'border-collapse': (typeof CSS_PROPERTY_KEYWORDS)['border-collapse'][number] | CssVarRef;
+  'table-layout': (typeof CSS_PROPERTY_KEYWORDS)['table-layout'][number] | CssVarRef;
 };
 type CssPropertyName = keyof CssPropertyValues;
 /**
  * Standard CSS properties that accept a `<color>` value. Used to gate
- * the `.withOpacity({...})` builder on `defineStyleProp` — only
+ * any `.withOpacity({...})` builder on `defineStyleProp` — only
  * color-typed props can pair with an opacity sibling (`bg` +
  * `bgOpacity` → class `bg-primary_75` etc.).
  *
  * Custom CSS properties (`--foo`) authored with `cssType: 'color'` are
- * also eligible for `.withOpacity()`; that check happens via the
+ * also eligible for opacity pairing; that check happens via the
  * `cssType` generic on `defineStyleProp`, not in this union.
  */
 type ColorCssProperty = 'background-color' | 'color' | 'text-decoration-color' | 'border-color' | 'border-top-color' | 'border-right-color' | 'border-bottom-color' | 'border-left-color' | 'border-block-color' | 'border-block-start-color' | 'border-block-end-color' | 'border-inline-color' | 'border-inline-start-color' | 'border-inline-end-color' | 'outline-color' | 'caret-color' | 'fill' | 'stroke';
 /**
- * Re-exported for use in callers that need the CSS-wide keyword union
- * (`inherit | initial | unset | revert`) on a non-color-typed property.
- * Not added to {@link CssPropertyValues} entries by default — list locally
- * if you want them.
+ * The CSS-wide keyword union (`inherit | initial | unset | revert`).
+ * Not added to `CssPropertyValues` entries by default — list locally
+ * on a per-property entry if you want them.
  */
 type CssGlobalKeyword = GlobalKeyword; //#endregion
 //#endregion

package/dist/config/dist/types/css-property-keywords.d.ts

@@ -0,0 +1,157 @@
+//#region ../config/dist/types/css-property-keywords.d.ts
+//#region src/types/css-property-keywords.d.ts
+/**
+ * Single source of truth for CSS keyword enums.
+ *
+ * These hand-authored runtime arrays list every plain string-literal
+ * keyword each CSS property accepts. The type unions in
+ * `./css-properties.ts` are DERIVED from these tuples
+ * (`(typeof CSS_PROPERTY_KEYWORDS)['<prop>'][number]`), so the keyword
+ * data lives in exactly one place and is available at runtime — Studio
+ * and other consumers can import the arrays directly instead of
+ * re-declaring a parallel hardcoded map.
+ *
+ * Scope: only concrete keyword literals belong here. Value-type aliases
+ * (lengths, percentages, numbers, colors, `CssVarRef`, intrinsic-size
+ * keywords expressed via shared aliases, template-literal/number types,
+ * bare `string`) stay in `css-properties.ts` and are NOT transcribed.
+ * Properties whose union is purely value-typed (e.g. `flex-grow`) get no
+ * entry here.
+ */
+/** The CSS-wide keyword set, available as a runtime array. */
+declare const CSS_GLOBAL_KEYWORDS: readonly ["inherit", "initial", "unset", "revert", "revert-layer"];
+/**
+ * Per-property keyword tuples. Each tuple holds, in source order, every
+ * plain string-literal keyword that property's union in
+ * `css-properties.ts` lists.
+ */
+declare const CSS_PROPERTY_KEYWORDS: {
+  readonly margin: readonly ["auto"];
+  readonly 'margin-top': readonly ["auto"];
+  readonly 'margin-right': readonly ["auto"];
+  readonly 'margin-bottom': readonly ["auto"];
+  readonly 'margin-left': readonly ["auto"];
+  readonly 'margin-block': readonly ["auto"];
+  readonly 'margin-inline': readonly ["auto"];
+  readonly 'margin-inline-start': readonly ["auto"];
+  readonly 'margin-inline-end': readonly ["auto"];
+  readonly top: readonly ["auto"];
+  readonly right: readonly ["auto"];
+  readonly bottom: readonly ["auto"];
+  readonly left: readonly ["auto"];
+  readonly inset: readonly ["auto"];
+  readonly 'inset-block': readonly ["auto"];
+  readonly 'inset-inline': readonly ["auto"];
+  readonly 'inset-inline-start': readonly ["auto"];
+  readonly 'inset-inline-end': readonly ["auto"];
+  readonly 'inset-block-start': readonly ["auto"];
+  readonly 'inset-block-end': readonly ["auto"];
+  readonly 'max-width': readonly ["none"];
+  readonly 'max-height': readonly ["none"];
+  readonly 'border-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-top-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-right-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-bottom-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-left-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-block-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-inline-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-inline-start-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-inline-end-width': readonly ["thin", "medium", "thick"];
+  readonly 'outline-width': readonly ["thin", "medium", "thick"];
+  readonly 'border-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
+  readonly 'border-top-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
+  readonly 'border-bottom-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
+  readonly 'border-inline-start-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
+  readonly 'border-inline-end-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset"];
+  readonly 'outline-style': readonly ["none", "hidden", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "auto"];
+  readonly 'text-decoration-style': readonly ["solid", "double", "dotted", "dashed", "wavy"];
+  readonly 'text-decoration-thickness': readonly ["auto", "from-font"];
+  readonly 'text-underline-offset': readonly ["auto"];
+  readonly 'outline-color': readonly ["invert"];
+  readonly 'caret-color': readonly ["auto"];
+  readonly fill: readonly ["none", "context-fill", "context-stroke"];
+  readonly stroke: readonly ["none", "context-fill", "context-stroke"];
+  readonly 'scrollbar-color': readonly ["auto"];
+  readonly 'font-size': readonly ["xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", "larger"];
+  readonly 'font-style': readonly ["normal", "italic", "oblique"];
+  readonly 'font-stretch': readonly ["normal", "ultra-condensed", "extra-condensed", "condensed", "semi-condensed", "semi-expanded", "expanded", "extra-expanded", "ultra-expanded"];
+  readonly 'line-height': readonly ["normal"];
+  readonly 'letter-spacing': readonly ["normal"];
+  readonly 'text-align': readonly ["left", "right", "center", "justify", "start", "end"];
+  readonly 'text-transform': readonly ["none", "capitalize", "uppercase", "lowercase", "full-width", "full-size-kana"];
+  readonly 'text-wrap': readonly ["wrap", "nowrap", "balance", "pretty", "stable"];
+  readonly 'text-overflow': readonly ["clip", "ellipsis"];
+  readonly 'text-decoration-line': readonly ["none", "underline", "overline", "line-through", "blink"];
+  readonly 'text-shadow': readonly ["none"];
+  readonly 'white-space': readonly ["normal", "nowrap", "pre", "pre-wrap", "pre-line", "break-spaces"];
+  readonly 'word-break': readonly ["normal", "break-all", "keep-all", "break-word"];
+  readonly 'overflow-wrap': readonly ["normal", "break-word", "anywhere"];
+  readonly hyphens: readonly ["none", "manual", "auto"];
+  readonly 'list-style-image': readonly ["none"];
+  readonly 'list-style-position': readonly ["inside", "outside"];
+  readonly 'vertical-align': readonly ["baseline", "sub", "super", "text-top", "text-bottom", "middle", "top", "bottom"];
+  readonly '-webkit-font-smoothing': readonly ["auto", "none", "antialiased", "subpixel-antialiased"];
+  readonly '-webkit-line-clamp': readonly ["none"];
+  readonly display: readonly ["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "flow-root", "none", "contents", "table", "inline-table", "table-row-group", "table-header-group", "table-footer-group", "table-row", "table-cell", "table-column-group", "table-column", "table-caption", "list-item"];
+  readonly visibility: readonly ["visible", "hidden", "collapse"];
+  readonly isolation: readonly ["auto", "isolate"];
+  readonly position: readonly ["static", "relative", "absolute", "fixed", "sticky"];
+  readonly 'box-sizing': readonly ["content-box", "border-box"];
+  readonly 'container-type': readonly ["normal", "size", "inline-size"];
+  readonly columns: readonly ["auto"];
+  readonly flex: readonly ["none", "auto", "initial"];
+  readonly 'flex-direction': readonly ["row", "row-reverse", "column", "column-reverse"];
+  readonly 'flex-wrap': readonly ["nowrap", "wrap", "wrap-reverse"];
+  readonly 'flex-basis': readonly ["content"];
+  readonly 'justify-content': readonly ["flex-start", "flex-end", "start", "end", "center", "space-between", "space-around", "space-evenly", "stretch", "normal", "left", "right"];
+  readonly 'align-items': readonly ["normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "baseline", "first baseline", "last baseline"];
+  readonly 'align-content': readonly ["normal", "start", "end", "center", "flex-start", "flex-end", "space-between", "space-around", "space-evenly", "stretch", "baseline"];
+  readonly 'align-self': readonly ["auto", "normal", "stretch", "center", "start", "end", "flex-start", "flex-end", "self-start", "self-end", "baseline"];
+  readonly 'grid-template-columns': readonly ["none"];
+  readonly 'grid-template-rows': readonly ["none"];
+  readonly 'grid-column': readonly ["auto"];
+  readonly 'grid-column-start': readonly ["auto"];
+  readonly 'grid-column-end': readonly ["auto"];
+  readonly 'grid-row': readonly ["auto"];
+  readonly 'grid-row-start': readonly ["auto"];
+  readonly 'grid-row-end': readonly ["auto"];
+  readonly transform: readonly ["none"];
+  readonly rotate: readonly ["none"];
+  readonly scale: readonly ["none"];
+  readonly translate: readonly ["none"];
+  readonly transition: readonly ["none"];
+  readonly 'transition-property': readonly ["none", "all"];
+  readonly 'transition-behavior': readonly ["normal", "allow-discrete"];
+  readonly animation: readonly ["none"];
+  readonly 'box-shadow': readonly ["none"];
+  readonly filter: readonly ["none"];
+  readonly 'backdrop-filter': readonly ["none"];
+  readonly 'mix-blend-mode': readonly ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-darker", "plus-lighter"];
+  readonly 'background-blend-mode': readonly ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
+  readonly overflow: readonly ["visible", "hidden", "clip", "scroll", "auto"];
+  readonly 'overflow-x': readonly ["visible", "hidden", "clip", "scroll", "auto"];
+  readonly 'overflow-y': readonly ["visible", "hidden", "clip", "scroll", "auto"];
+  readonly 'overscroll-behavior': readonly ["auto", "contain", "none"];
+  readonly 'scroll-behavior': readonly ["auto", "smooth"];
+  readonly 'scroll-snap-align': readonly ["none", "start", "end", "center"];
+  readonly 'scroll-snap-stop': readonly ["normal", "always"];
+  readonly 'scroll-snap-type': readonly ["none"];
+  readonly 'scrollbar-width': readonly ["auto", "thin", "none"];
+  readonly cursor: readonly ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out"];
+  readonly 'pointer-events': readonly ["auto", "none", "visiblePainted", "visibleFill", "visibleStroke", "visible", "painted", "fill", "stroke", "all"];
+  readonly 'user-select': readonly ["none", "auto", "text", "contain", "all"];
+  readonly resize: readonly ["none", "both", "horizontal", "vertical", "block", "inline"];
+  readonly appearance: readonly ["none", "auto", "menulist-button", "textfield"];
+  readonly 'touch-action': readonly ["auto", "none", "manipulation"];
+  readonly 'will-change': readonly ["auto", "scroll-position", "contents"];
+  readonly 'z-index': readonly ["auto"];
+  readonly 'aspect-ratio': readonly ["auto"];
+  readonly 'object-fit': readonly ["fill", "contain", "cover", "none", "scale-down"];
+  readonly 'caption-side': readonly ["top", "bottom", "inline-start", "inline-end"];
+  readonly 'border-collapse': readonly ["collapse", "separate"];
+  readonly 'table-layout': readonly ["auto", "fixed"];
+};
+/** Names of the CSS properties that have a keyword tuple above. */
+type CssPropertyWithKeywords = keyof typeof CSS_PROPERTY_KEYWORDS; //#endregion
+//#endregion
+export { CSS_GLOBAL_KEYWORDS, CSS_PROPERTY_KEYWORDS, CssPropertyWithKeywords };