dothtml-interfaces 0.2.7 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml-interfaces",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "description": "Dependency injection interfaces for DOTHtml.",
   "main": "src/index.d.ts",
   "types": "src/index.d.ts",

package/src/i-component.d.ts

@@ -1,6 +1,6 @@
 
 import { IDotDocument } from "./i-dot";
-import IDotCss from "./i-dot-css";
+import IDotCss from "./styles/i-dot-css";
 
 // export type EventNames<T> = T extends { allowedEvents: infer E } ? E : never;
 

package/src/i-dot.d.ts

@@ -1,8 +1,8 @@
 
 import IComponent, { FrameworkItems } from "./i-component";
-import IDotCss, { IDotcssProp } from "./i-dot-css";
+import IDotCss, { IDotcssProp } from "./styles/i-dot-css";
 import IEventBus from "./i-event-bus";
-import IReactive from "./i-reactive";
+import {IReactive} from "./i-reactive";
 
 type DotContentPrimitive = string | number | boolean;
 type DotContentBasic = DotContentPrimitive | Node | Element | NodeList | IComponent | IDotDocument//typeof DotDocument;
@@ -351,11 +351,11 @@ type Styles = string | IDotcssProp;
 // hasEvents<T extends IComponent>(styles: Styles | Styles[]): (Base: new () => T) => new () => T;
 // prop(target: any, propertyKey: string): void;
 
-export type ComponentArgs<TProps extends Array<string>, TEvents extends Array<string>> = {
-    [key in TProps[number]]: any;
-} & {
-    [key in TEvents[number]]: (...args: any[]) => void;
-}
+export type ComponentArgs<TProps extends Array<string> = [], TEvents extends Array<string> = []> = {
+	[key in TProps[number]]?: any;
+} & Partial<{
+	[key in TEvents[number]]?: (...args: any[]) => void;
+}>;
 
 /**
  * Interface for the dot object.
@@ -441,7 +441,7 @@ export interface IDotGlobalAttrs {
 	areaChecked?: AttrVal<string>;
 	areaSelected?: AttrVal<boolean>;
 	accessKey?: AttrVal<string>; // This could potentially be enumerated. But care should be taken as these types are already quite complex.
-	class?: AttrVal<string> | Array<AttrVal<string>> | AttrVal<Array<string>> | Record<string, AttrVal<string>>; // Space-separated. TODO: need tests.
+	class?: AttrVal<string> | Array<AttrVal<string>> | AttrVal<Array<string>> | Record<string, AttrVal<boolean>>; // Space-separated. TODO: need tests.
 	contentEditable?: AttrVal<"true"> | AttrVal<"false"> | AttrVal<"plaintext-only">;
 	contextMenu?: AttrVal<string>;
 	dir?: AttrVal<string>;

package/src/i-reactive.d.ts

@@ -1,5 +1,5 @@
 
-export default interface IReactive<Ti = any, To = Ti>{
+export interface IReactive<Ti = any, To = Ti>{
 	// The untransformed value.
 	_value: Ti;
 	// Get the value.
@@ -12,10 +12,14 @@ export default interface IReactive<Ti = any, To = Ti>{
 	// If a key is not provided, identification is done automatically by the framework by comparing object references.
 	key: string;
 	// Optional transformer that can transform the input.
-	transformer?: (input: Ti)=>To;
+	transform?: (input: Ti)=>To;
 	// subscribeNode(node: Node): number;
 	// subscribeAttr(node: HTMLElement, attributeName: string): number;
 	subscribeCallback(callback: (value: To)=>void): number;
 	detachBinding(id: number);
 	updateObservers(): void;
+}
+
+export interface IReactiveWatcher<T = any>{
+	observerUpdate(value: T, obsreverId: number): void;
 }

package/src/index.d.ts

@@ -2,17 +2,11 @@ import { IDotCore } from "./i-dot";
 
 export * from "./i-dot";
 
-export { default as IDotCss } from "./i-dot-css";
-export * from "./i-dot-css";
+export { default as IDotCss } from "./styles/i-dot-css";
+export * from "./styles/i-dot-css";
 
 
 export { default as IComponent, FrameworkItems } from "./i-component";
 
-export { default as IReactive } from "./i-reactive";
-export { default as IEventBus } from "./i-event-bus";
-
-declare global {
-	interface Window {
-		dot: IDotCore;
-	}
-}
+export { IReactive, IReactiveWatcher } from "./i-reactive";
+export { default as IEventBus } from "./i-event-bus";

package/src/styles/at-rules/i-at-color-profile-builder.d.ts

@@ -0,0 +1,5 @@
+
+export default interface IAtColorProfileBuilder{
+	src?: string;
+	renderingIntent?: "relative-colorimetric"|"absolute-colorimetric"|"perceptual"|"saturation";
+}

package/src/styles/at-rules/i-at-counter-style-builder.d.ts

@@ -0,0 +1,15 @@
+type SystemValue = "cyclic"|"numeric"|"alphabetic"|"symbolic"|"additive"|`fixed ${number}`|`extends ${string}`;
+export default interface IAtCounterStyleBuilder{
+
+	// TODO: need a testcase on this.
+	system?: SystemValue|["fixed", number]|["extends", string];
+
+	symbols?: string;
+	additiveSymbols?: string;
+	negative?: string;
+	prefix?: string;
+	suffix?: string;
+	range?: string;
+	pad?: string;
+	speakAs?: string;
+}

package/src/styles/at-rules/i-at-font-family-builder.d.ts

@@ -0,0 +1,19 @@
+
+type NormalOrPercentage = "normal" | number | `${string}%`;
+type StretchValues = `${number}%`|number|"ultra-condensed"|"extra-condensed"|"condensed"|"semi-condensed"|"normal"|"semi-expanded"|"expanded"|"extra-expanded"|"ultra-expanded";
+
+export default interface IAtFontFamilyBuilder{
+	ascentOverride?: string;
+	descentOverride?: NormalOrPercentage | [NormalOrPercentage] | [NormalOrPercentage, NormalOrPercentage];
+	fontDisplay?: "auto"|"block"|"swap"|"fallback"|"optional";
+	fontFamily: string;
+	fontStretch?: StretchValues | [StretchValues] | [StretchValues, StretchValues];
+	fontStyle?: "normal"|"italic"|"auto"|"oblique"|`oblique ${string}`;
+	fontWeight?: "normal"|"bold"|number|`${number}`;
+	fontFeatureSettings?: string;
+	fontVariationSettings?: string|string[];
+	lineGapOverride?: NormalOrPercentage | [NormalOrPercentage] | [NormalOrPercentage, NormalOrPercentage];
+	sizeAdjust?: `${number}%`|number;
+	src?: string;
+	unicodeRange?: string;
+}

package/src/styles/at-rules/i-at-font-palette-values.d.ts

@@ -0,0 +1,6 @@
+
+export default interface IAtFontPaletteValues{
+	fontFamily?: string;
+	basePalette?: string;
+	overrideColors?: string[];
+}

package/src/styles/at-rules/i-at-keyframes-builder.d.ts

@@ -0,0 +1,8 @@
+import IDotcssProp from "../i-css-prop";
+
+export default interface IAtKeyframesBuilder{
+	to: IDotcssProp;
+	from: IDotcssProp;
+
+	[key: `${number}%`]: IDotcssProp;
+}

package/src/styles/at-rules/i-at-page-builder.d.ts

@@ -0,0 +1,20 @@
+import IDotcssProp from "../i-css-prop";
+
+export default interface IAtPageBuilder extends IDotcssProp{
+	topLeftCorner: IDotcssProp;
+	topLeft: IDotcssProp;
+	topCenter: IDotcssProp;
+	topRight: IDotcssProp;
+	topRightCorner: IDotcssProp;
+	bottomLeftCorner: IDotcssProp;
+	bottomLeft: IDotcssProp;
+	bottomCenter: IDotcssProp;
+	bottomRight: IDotcssProp;
+	bottomRightCorner: IDotcssProp;
+	leftTop: IDotcssProp;
+	leftMiddle: IDotcssProp;
+	leftBottom: IDotcssProp;
+	rightTop: IDotcssProp;
+	rightMiddle: IDotcssProp;
+	rightBottom: IDotcssProp;
+}

package/src/styles/css-types.d.ts

@@ -0,0 +1,141 @@
+import { IReactive } from "../i-reactive";
+
+// Global keyword values.
+export type GKV = IReactive<string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
+
+export type ComplexType = string;
+
+export type ValueOrReactive<T> = T|IReactive<T>;
+
+// BASIC TYPES
+export type Str = `"${string|""}"`|`'${string|""}'`; // TODO: wherever str is required, we could just inject quotes...
+export type Int = number;
+export type Percentage = `${number}%`;
+export type AlphaValue = number | Percentage; // Number should be interpreted as a decimal (x/1);
+export type Ratio = number|`${number}/${number}`;
+
+// export type DigitStr = "0"|"1"|"2"|"3"|"4"|"5"|"6"|"7"|"8"|"9";
+// export type HexStr = DigitStr|"A"|"B"|"C"|"D"|"E"|"F"|"a"|"b"|"c"|"d"|"e"|"f";
+// export type Hex2 = `${HexStr}${HexStr}`;
+// export type Hex3 = `${Hex2}${HexStr}`;
+// export type Hex4 = `${Hex3}${HexStr}`;
+// export type Hex5 = `${Hex4}${HexStr}`;
+// export type Hex6 = `${Hex5}${HexStr}`;
+// export type HexColor = `#${Hex3|Hex6}`;
+export type HexColor = `#${ComplexType}`;
+
+// LENGTH
+// export type AbsoluteUnits = "cm"|"mm"|"in"|"px"|"pt"|"pc"|"Q";
+// export type RelativeUnits = "cap"|"ch"|"em"|"ex"|"ic"|"lh"|"rem"|"rlh"
+// 	|"vh"|"vw"|"vmin"|"vmax"|"vb"|"vi"
+// 	|"cqw"|"cqh"|"cqi"|"cqb"|"cqmin"|"cqmax"
+// 	|"%"; 
+// export type AllLengthUnits = AbsoluteUnits|RelativeUnits;
+// export type NumericLength = number|`${number}${AllLengthUnits}`;
+// export type LengthPercentage = NumericLength|Percentage;
+
+// TIME & FREQUENCY
+export type Time = `${number}${"s"|"ms"}`;
+export type TimePercentage = Time|Percentage;
+export type Frequency = `${number}${"Hz"|"kHz"}`;
+export type FrequencyPercentage = Frequency|Percentage;
+
+// RESOLUTION
+export type Resolution = `${number}${"dpi"|"dpcm"|"dppx"|"x"}`;
+
+// MISC ENUM TYPES
+export type AbsoluteSize = "xx-small"|"x-small"|"small"|"medium"|"large"|"x-large"|"xx-large"|"xxx-large";
+export type BlendMode = "normal"|"multiply"|"screen"|"overlay"|"darken"|"lighten"|"color-dodge"|"color-burn"|"hard-light"|"soft-light"|"difference"|"exclusion"|"hue"|"saturation"|"color"|"luminosity";
+export type LineStyle = "none"|"hidden"|"dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset";
+export type DisplayBox = "contents"|"none"
+export type DisplayInside = "flow"|"flow-root"|"table"|"flex"|"grid"|"ruby";
+export type DisplayInternal = "table-row-group"|"table-header-group"|"table-footer-group"|"table-row"|"table-cell"|"table-column-group"|"table-column"|"table-caption"|"ruby-base"|"ruby-text"|"ruby-base-container"|"ruby-text-container";
+export type DisplayLegacy = "inline-block"|"inline-table"|"inline-flex"|"inline-grid";
+export type DisplayOutside = "block"|"inline"|"run-in";
+export type DisplayFlow = "flow"|"flow-root";
+export type Overflow = "visible"|"hidden"|"clip"|"scroll";
+export type RelativeSize = "smaller"|"larger";
+
+// BASIC SHAPE 
+// TODO need a builder.
+// Most of these are too complex to represent as a typescript type.
+// Realistically they should just be constructed usign a builder rather than setting the strings.
+// https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape
+export type InsetFunction = `inset(${ComplexType})`;
+export type RectFunction = `rect(${ComplexType})`;
+export type XywhFunction = `xywh(${ComplexType})`;
+export type CircleFunction = `circle(${ComplexType})`;
+export type EllipseFunction = `ellipse(${ComplexType})`;
+export type PolygonFunction = `polygon(${ComplexType})`;
+export type PathFunction = `path(${ComplexType})`;
+export type BasicShape = InsetFunction|RectFunction|XywhFunction|CircleFunction|EllipseFunction|PolygonFunction|PathFunction; 
+
+// ANGLES
+export type AngleUnits = "deg"|"turn"|"rad"|"grad";
+export type Angle = number | `${number}${AngleUnits}`; // Pure number should be interpreted as degrees.
+export type AnglePercentage = number | Angle | Percentage; // Number should be interpreted as a decimal (x/1);
+
+// ADVANCED TYPES
+// Box.
+export type VisualBox = "content-box" | "padding-box" | "border-box"; // the three <box> values
+export type RayoutBox = VisualBox | "margin-box" // the <shape-box> values
+export type PaintBox = VisualBox | "fill-box" | "stroke-box"
+export type CoordBox = VisualBox | "fill-box" | "stroke-box" | "view-box"
+export type GeometryBox = RayoutBox | "fill-box" | "stroke-box" | "view-box"
+export type BoxEdge = VisualBox | RayoutBox | PaintBox | CoordBox | GeometryBox;
+
+// DIMENSION
+// export type Dimension = Angle|Time|Frequency|NumericLength;
+
+// Calc.
+export type Calc = ComplexType; 
+
+// It's difficult to compose calc types because they're too complex. See below.
+// May consider adding a builder for this, but not sure what it will look like.
+
+/*
+	// Can't get this working because the types get too complex for TS.
+	// export type Decrement = [
+	//     never, 0, 1, 2, 3, 4, 5, 6, 7
+	// ];
+	// export type CalcConstant = "e"|"-e"|"E"|"pi"|"-pi"|"infinity"|"-infinity"|"NaN"; // Defined on a different page. Not sure what it's for.
+	// export type CalcKeyword = 'e' | 'pi' | 'infinity' | '-infinity' | 'NaN';
+	// export type CalcValue = number | Percentage | Dimension | CalcKeyword;// | CalcSum;
+	// export type CalcProductSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"*"|"/"}${T}${CalcProductSuffix<T, Decrement[Depth]>}`;
+	// export type CalcSumSuffix<T extends CalcValue, Depth extends number> = Depth extends 0 ? string : `${"+"|"-"}${T}${CalcProductSuffix<T, 8>}`;
+	// // TODO: optional space can go here.
+	// export type CalcProduct<T extends CalcValue> = T|`${T}${CalcProductSuffix<T, 8>}`;
+	// export type CalcSum<T extends CalcValue> = CalcProduct<T>|`${CalcProduct<T>}${"+"|"-"}${CalcProduct<T>}`
+	// CalcValue export type definition
+	// Helper types for CalcProduct and CalcSum
+	// export type CalcOperation = '+' | '-' | '*' | '/';
+	// export type CalcProductPart = CalcValue | [CalcOperation, CalcValue];
+*/
+
+// Color Interpolation.
+export type RectangularColorSpace = "srgb"|"srgb-linear"|"display-p3"|"a98-rgb"|"prophoto-rgb"|"rec2020"|"lab"|"oklab"|"xyz"|"xyz-d50"|"xyz-d65";
+export type PolarColorSpace = "hsl"|"hwb"|"lch"|"oklch";
+export type HueInterpolationMethod = `${"shorter"|"longer"|"increasing"|"decreasing"} hue`
+export type ColorInterpolationMethod = RectangularColorSpace|PolarColorSpace|`${PolarColorSpace} ${HueInterpolationMethod}`;
+
+export type Color = string;
+
+// Display List Item
+
+export type DisplayListItem = 
+    | 'list-item'
+    | `${DisplayOutside} list-item`
+    | `list-item ${DisplayOutside}`
+    | `${DisplayFlow} list-item`
+    | `list-item ${DisplayFlow}`
+    | `${DisplayOutside} ${DisplayFlow} list-item`
+    | `${DisplayOutside} list-item ${DisplayFlow}`
+    | `${DisplayFlow} ${DisplayOutside} list-item`
+    | `${DisplayFlow} list-item ${DisplayOutside}`
+    | `list-item ${DisplayOutside} ${DisplayFlow}`
+    | `list-item ${DisplayFlow} ${DisplayOutside}`;
+
+// ID
+export type Ident = string;
+export type CustomIdent = string;
+export type DashedIdent = `--${string}`;

package/src/styles/i-css-prop.d.ts

@@ -0,0 +1,295 @@
+
+import { IReactive } from "../i-reactive";
+import { GKV, ValueOrReactive } from "./css-types";
+import IFilterProp from "./i-filter-prop";
+import IShadowProp from "./i-shadow-prop";
+import { ITransformationProp } from "./i-transformation-prop";
+import ColorProp from "./mapped-types/color-props";
+import LengthProp from "./mapped-types/length-prop";
+
+type BackgroundPositionShorthand2D = string;
+type BackgroundRepeatValues2d = "no-repeat"|"repeat"|"space"|"round";
+type BorderShorthand = string;
+type BorderStyles = "dotted"|"dashed"|"solid"|"double"|"groove"|"ridge"|"inset"|"outset"|"none"|"hidden";
+type FlexShorthand = string;
+type FlexFlowShorthand = string;
+
+// This needs to be built in pieces. There's only so much I can do at once.
+// Some of this was generated using AI. Each item needs to be manually checked.
+// Once it's checked, we can add a ✔️ to the end of the line.
+export default interface IDotcssProp extends 
+	LengthProp<"blockSize"> ,
+	LengthProp<"borderBottomLeftRadius">,
+	LengthProp<"borderBottomRightRadius">,
+	LengthProp<"borderBottomWidth">,
+	LengthProp<"borderLeftWidth">,
+	LengthProp<"borderRightWidth">,
+	LengthProp<"borderTopLeftRadius">,
+	LengthProp<"borderTopRightRadius">,
+	LengthProp<"borderTopWidth">,
+	LengthProp<"bottom">,
+	LengthProp<"height">,
+	LengthProp<"left">,
+	LengthProp<"marginBottom">,
+	LengthProp<"marginLeft">,
+	LengthProp<"marginRight">,
+	LengthProp<"marginTop">,
+	LengthProp<"maxHeight">,
+	LengthProp<"maxWidth">,
+	LengthProp<"minHeight">,
+	LengthProp<"minWidth">,
+	LengthProp<"outlineOffset">,
+	LengthProp<"outlineWidth", 1, "medium"|"thin"|"thick">,
+	LengthProp<"paddingBottom">,
+	LengthProp<"paddingLeft">,
+	LengthProp<"paddingRight">,
+	LengthProp<"paddingTop">,
+	LengthProp<"right">,
+	LengthProp<"textIndent">,
+	LengthProp<"top">,
+	LengthProp<"width">,
+	LengthProp<"lineHeight">,
+	LengthProp<"fontSize">,
+	LengthProp<"flexBasis">,
+	LengthProp<"wordSpacing", 1, "normal">,
+	LengthProp<"borderImageWidth", 1|2|3|4>,
+	LengthProp<"borderRadius", 1|2|3|4>,
+	LengthProp<"borderWidth", 1|2|3|4>,
+	LengthProp<"margin", 1|2|3|4>,
+	LengthProp<"padding", 1|2|3|4>,
+	LengthProp<"backgroundSize", 1|2, "contain"|"cover"|"auto">,
+	LengthProp<"gap", 1|2>,
+
+	ColorProp<"color">,
+	ColorProp<"backgroundColor">,
+	ColorProp<"borderBottomColor">,
+	ColorProp<"borderColor">,
+	ColorProp<"borderLeftColor">,
+	ColorProp<"borderRightColor">,
+	ColorProp<"borderTopColor">,
+	ColorProp<"textDecorationColor">,
+	ColorProp<"outlineColor">,
+	ColorProp<"columnRuleColor">
+{
+	
+	//url: 
+	backgroundImage?: ValueOrReactive<string>;
+	borderImage?: ValueOrReactive<string>;
+	listStyleImage?: ValueOrReactive<string>;
+	content?: ValueOrReactive<string>;
+
+	//complex: 
+	transform?: ValueOrReactive<string>|ITransformationProp;
+	filter?: ValueOrReactive<string>|IFilterProp;
+	backdropFilter?: ValueOrReactive<string>|IFilterProp;
+	
+	//misc numeric: 
+	opacity?: ValueOrReactive<number|string>;
+
+	//misc: 
+	all?: GKV;
+	appearance?: GKV|"none"|"menulist-button"|"textfield"|"button"|"searchfield"|"textarea"|"push-button"|"slider-horizontal"|"checkbox"|"radio"|"square-button"|"menulist"|"listbox"|"meter"|"progress-bar"|"scrollbarbutton-up"|"button-bevel"|"media-mute-button"|"caret"; // ✔️
+	aspectRatio?: ValueOrReactive<string>|{auto?:ValueOrReactive<boolean>, ratio: [ValueOrReactive<number>, ValueOrReactive<number>]|ValueOrReactive<number>}; // TODO: test case.
+
+	background?: GKV|string; // TODO: shorthand. Requires advanced typing.
+	backgroundAttachment?: GKV|"scroll"|"fixed"|"local"; // ✔️
+	backgroundBlendMode?: GKV|Array<IReactive<string>|"darken"|"luminocity"|"normal">; // ✔️
+	backgroundPosition?: GKV|BackgroundPositionShorthand2D;
+	backgroundRepeat?: GKV|BackgroundRepeatValues2d;
+	backgroundClip?: GKV|string;
+	backgroundOrigin?: GKV|"padding-box"|"border-box"|"content-box";
+
+	borderImageOutset?: GKV|string;
+	borderImageRepeat?: GKV|BackgroundRepeatValues2d;
+	borderImageSlice?: GKV|string;
+	borderImageSource?: GKV|string;
+	
+	// TODO: probably should break this down better.
+	border?: GKV|BorderShorthand;
+	borderBottom?: GKV|BorderShorthand;
+	borderLeft?: GKV|BorderShorthand;
+	borderRight?: GKV|BorderShorthand;
+	borderTop?: GKV|BorderShorthand;
+
+	borderBottomStyle?: GKV|BorderStyles;
+	borderLeftStyle?: GKV|BorderStyles;
+	borderRightStyle?: GKV|BorderStyles;
+	borderStyle?: GKV|BorderStyles;
+	borderTopStyle?: GKV|BorderStyles;
+
+	boxDecorationBreak?: GKV|string;
+	boxShadow?: GKV|Array<IShadowProp>; // TODO tests.
+	clear?: GKV|string;
+	clip?: GKV|string;
+	display?: GKV|"inline"|"block"|"contents"|"flex"|"grid"|"inline-block"|"inline-flex"|"inline-grid"|"inline-table"|"list-item"|"run-in"|"table"|"table-caption"|"table-column-group"|"table-header-group"|"table-footer-group"|"table-row-group"|"table-cell"|"table-column"|"table-row"|"none"; // ✔️
+	float?: GKV|"left"|"right"|"none"|"inline-start"|"inline-end"; // ✔️
+	box?: GKV|string; // Can't find docs on this on MSDN.
+	overflow?: GKV|"visible"|"hidden"|"clip"|"scroll"|"auto"; // ✔️
+	overflowX?: GKV|"visible"|"hidden"|"clip"|"scroll"|"auto"; // ✔️
+	overflowY?: GKV|"visible"|"hidden"|"clip"|"scroll"|"auto"; // ✔️
+	position?: GKV|"static"|"relative"|"fixed"|"absolute"|"sticky"; // ✔️
+	visibility?: GKV|string;
+	verticalAlign?: GKV|string;
+	zIndex?: ValueOrReactive<number>;
+	alignContent?: GKV|string;
+	alignItems?: GKV|string;
+	alignSelf?: GKV|string;
+	flex?: GKV|FlexShorthand;
+	//flexBasis?: BasicCommonValues|FlexBasisNames;
+	flexDirection?: GKV|"row"|"row-reverse"|"column"|"column-reverse"; // ✔️
+	flexFlow?: GKV|FlexFlowShorthand;
+	flexGrow?: GKV|ValueOrReactive<number>; // ✔️
+	flexShrink?: GKV|ValueOrReactive<number>; // ✔️
+	flexWrap?: GKV|"nowrap"|"wrap"|"wrap-reverse"; // ✔️
+	grid?: GKV|string;
+	gridArea?: GKV|string;
+	gridAutoColumns?: GKV|string;
+	gridautoRows?: GKV|string;
+	gridColumn?: GKV|string;
+	gridColumnEnd?: GKV|string;
+	gridColumnGap?: GKV|string;
+	gridColumnStart?: GKV|string;
+	gridGap?: GKV|string;
+	gridRow?: GKV|string;
+	gridRowEnd?: GKV|string;
+	gridRowGap?: GKV|string;
+	gridRowStart?: GKV|string;
+	gridTemplate?: GKV|string;
+	gridTemplateAreas?: GKV|string;
+	gridTemplateColumns?: GKV|string;
+	gridTemplateRows?: GKV|string;
+	imageOrientation?: GKV|"from-image"|"none"|"flip"|string; // Note: flip may optionally be accompanied with an angle. This is a complex type.
+	justifyContent?: GKV|"flex-start"|"flex-end"|"center"|"space-between"|"space-around"|"space-evenly"|"start"|"end"|"left"|"right"|"safe flex-start"|"safe flex-end"|"safe center"|"safe space-between"|"safe space-around"|"safe space-evenly"|"unsafe flex-start"|"unsafe flex-end"|"unsafe center"|"unsafe space-between"|"unsafe space-around"|"unsafe space-evenly";
+	order?: GKV|number; // ✔️
+	hangingPunctuation?: GKV|"none"|"first"|"last"|"allow-end"|"force-end";
+	hyphens?: GKV|"none"|"manual"|"auto";
+	letterSpacing?: GKV|"normal"|"initial";
+	lineBreak?: GKV|"auto"|"loose"|"normal"|"strict"|"anywhere";
+	overflowWrap?: GKV|"normal"|"break-word"|"anywhere";
+	tabSize?: GKV|"auto";
+	textAlign?: GKV|"left"|"right"|"center"|"justify"|"start"|"end"|"match-parent";
+	textAlignLast?: GKV|"auto"|"left"|"right"|"center"|"justify"|"start"|"end"|"match-parent";
+	textCombineUpright?: GKV|"none"|"all"|"digits"|"upright";
+	textJustify?: GKV|"auto"|"inter-word"|"inter-character"|"none";
+	textTransform?: GKV|"none"|"capitalize"|"uppercase"|"lowercase"|"full-width"|"full-size-kana";
+	whiteSpace?: GKV|"normal"|"nowrap"|"pre"|"pre-wrap"|"pre-line"|"break-spaces";
+	wordBreak?: GKV|"normal"|"break-all"|"keep-all"|"break-word";
+	wordWrap?: GKV|"normal"|"break-word"|"anywhere";
+	textDecoration?: GKV|"none"|"underline"|"overline"|"line-through"|"blink";
+	textDecorationLine?: GKV|"none"|"underline"|"overline"|"line-through"|"blink";
+	textDecorationStyle?: GKV|"solid"|"double"|"dotted"|"dashed"|"wavy";
+	textShadow?: GKV|string; // Complex.
+	textUnderlinePosition?: GKV|"auto"|"under"|"left"|"right";
+	font?: GKV|string;
+	fontFamily?: GKV|string;
+	fontFeatureSettings?: GKV|"normal";
+	fontKerning?: GKV|"auto"|"normal"|"none";
+	fontLanguageOverride?: GKV|"normal";
+	fontSizeAdjust?: GKV|"none"|"auto";
+	fontStretch?: GKV|ValueOrReactive<number>|`${string}%`|"normal"|"ultra-condensed"|"extra-condensed"|"condensed"|"semi-condensed"|"semi-expanded"|"expanded"|"extra-expanded"|"ultra-expanded";
+	fontStyle?: GKV|"normal"|"italic"|"oblique";
+	fontSynthesis?: GKV|string;
+	fontVariant?: GKV|"normal"|"small-caps";
+	fontVariantAlternates?: GKV|string;
+	fontVariantCaps?: GKV|"all-small-caps"|"petite-caps"|"all-petite-caps"|"unicase"|"titling-caps";
+	fontVariantEastAsian?: GKV|string;
+	fontVariantLigatures?: GKV|string;
+	fontVariantNumeric?: GKV|string;
+	fontVariantPosition?: GKV|string;
+	fontWeight?: GKV|ValueOrReactive<number>|"normal"|"bold"|"bolder"|"lighter";
+	direction?: GKV|"ltr"|"rtl";
+	textOrientation?: GKV|string;
+	unicodeBidi?: GKV|string;
+	userSelect?: GKV|string;
+	writingMode?: GKV|string;
+	borderCollapse?: GKV|string;
+	borderSpacing?: GKV|string;
+	captionSide?: GKV|string;
+	emptyCells?: GKV|string;
+	tableLayout?: GKV|string;
+	counterIncrement?: GKV|string;
+	counterReset?: GKV|string;
+	listStyle?: GKV|string;
+	listStylePosition?: GKV|string;
+	listStyleType?: GKV|string;
+	animation?: GKV|string;
+	animationDelay?: GKV|string;
+	animationDirection?: GKV|string;
+	animationDuration?: GKV|string;
+	animationFillMode?: GKV|string;
+	animationIterationCount?: GKV|string;
+	animationName?: GKV|string;
+	animationPlayState?: GKV|string;
+	animationTimingFunction?: GKV|string;
+	backfaceVisibility?: GKV|"visible"|"hidden";
+	perspective2d?: GKV|string;
+	perspectiveOrigin?: GKV|string;
+	transformOrigin?: GKV|string;
+	transformStyle?: GKV|string;
+	transition?: GKV|string;
+	transitionProperty?: GKV|string;
+	transitionDuration?: GKV|string;
+	transitionTimingFunction?: GKV|string;
+	transitionDelay?: GKV|string;
+	boxSizing?: GKV|string;
+	cursor?: GKV|string;
+	imeMode?: GKV|string;
+	navDown?: GKV|string;
+	navIndex?: GKV|string;
+	navLeft?: GKV|string;
+	navRight?: GKV|string;
+	navUp?: GKV|string;
+	outline?: GKV|BorderShorthand;
+	//outlineOffset?: BasicCommonValues|string; // Now animated.
+	outlineStyle?: GKV|BorderStyles;
+	resize?: GKV|string;
+	textOverflow?: GKV|"clip"|"ellipsis";
+	breakAfter?: GKV|"auto"|"avoid"|"always"|"all"|"avoid-page"|"page"|"left"|"right"|"recto"|"verso";
+	breakBefore?: GKV|"auto"|"avoid"|"always"|"all"|"avoid-page"|"page"|"left"|"right"|"recto"|"verso";
+	breakInside?: GKV|"auto"|"avoid"|"avoid-page"|"avoid-column"|"avoid-region";
+	columnCount?: GKV|"auto"|"initial"|"inherit"|"unset"|"balance"|"auto-fill"|"auto-fit";
+	columnFill?: GKV|"auto"|"balance"|"balance-all"|"balance-none";
+	columnGap?: GKV|string;
+	columnRule?: GKV|string;
+	columnRuleStyle?: GKV|string;
+	columnRuleWidth?: GKV|string;
+	columnSpan?: GKV|string;
+	columnWidth?: GKV|string;
+	columns?: GKV|string;
+	widows?: GKV|string;
+	orphans?: GKV|string;
+	pageBreakAfter?: GKV|string;
+	pageBreakBefore?: GKV|string;
+	pageBreakInside?: GKV|string;
+	marks?: GKV|string;
+	quotes?: GKV|string;
+	imageRendering?: GKV|string;
+	imageResolution?: GKV|string;
+	objectFit?: GKV|string;
+	objectPosition?: GKV|string;
+	mask?: GKV|string;
+	maskType?: GKV|string;
+	mark?: GKV|string;
+	markAfter?: GKV|string;
+	markBefore?: GKV|string;
+	phonemes?: GKV|string;
+	rest?: GKV|string;
+	restAfter?: GKV|string;
+	restBefore?: GKV|string;
+	voiceBalance?: GKV|string;
+	voiceDuration?: GKV|string;
+	voicePitch?: GKV|string;
+	voicePitchRange?: GKV|string;
+	voiceRate?: GKV|string;
+	voiceStress?: GKV|string;
+	voiceVolume?: GKV|string;
+	pointerEvents?: GKV|"auto"|"none";
+
+	// Deprecated.
+	// marqueeDirection?: "up"|"down"|"left"|"right"|BasicCommonValues;
+	// marqueePlayCount?: ValueOrReactive<number>|BasicCommonValues;
+	// marqueeSpeed?: "slow"|"normal"|"fast"|BasicCommonValues;
+	// marqueeStyle?: BasicCommonValues|string;
+}
+
+// export default IDotcssProp;