dothtml-interfaces 0.4.6 → 1.0.0

package/src/{i-event-bus.d.ts → i-event-bus.ts}

@@ -1,11 +1,11 @@
-
-export default interface IEventBus{
-    
-    on (event, callback);
-    
-    off (event, callback);
-    
-    emit (event, ...args);
-    
-    flush (event);
+
+export default interface IEventBus{
+    
+    on (event, callback);
+    
+    off (event, callback);
+    
+    emit (event, ...args);
+    
+    flush (event);
 }

package/src/{index.d.ts → index.ts}

@@ -1,15 +1,15 @@
-import { IDotCore } from "./i-dot";
-
-export * from "./i-dot";
-
-export { default as IDotCss } from "./styles/i-dot-css";
-export * from "./styles/i-dot-css";
-
-
-export { default as IDotComponent, FrameworkItems } from "./i-dot-component";
-
-export { IWatcher } from "./bindings/i-watcher";
-export { IObserver } from "./bindings/i-observer";
-export { IBinding } from "./bindings/i-binding";
-export { IReactive } from "./bindings/i-reactive";
+import { IDotCore } from "./i-dot";
+
+export * from "./i-dot";
+
+export { default as IDotCss } from "./styles/i-dot-css";
+export * from "./styles/i-dot-css";
+
+
+export { default as IDotComponent, FrameworkItems } from "./i-dot-component";
+
+export { IWatcher } from "./bindings/i-watcher";
+export { IObserver } from "./bindings/i-observer";
+export { IBinding } from "./bindings/i-binding";
+export { IReactive } from "./bindings/i-reactive";
 export { default as IEventBus } from "./i-event-bus";

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

@@ -1,5 +1,5 @@
-
-export default interface IAtColorProfileBuilder{
-	src?: string;
-	renderingIntent?: "relative-colorimetric"|"absolute-colorimetric"|"perceptual"|"saturation";
+
+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 → i-at-counter-style-builder.ts}

@@ -1,15 +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;
+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 → i-at-font-family-builder.ts}

@@ -1,19 +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;
+
+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 → i-at-font-palette-values.ts}

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

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

@@ -1,8 +1,8 @@
-import IDotcssProp from "../i-css-prop";
-
-export default interface IAtKeyframesBuilder{
-	to: IDotcssProp;
-	from: IDotcssProp;
-
-	[key: `${number}%`]: IDotcssProp;
+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 → i-at-page-builder.ts}

@@ -1,20 +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;
+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/complex-css-types/{i-filter-prop.d.ts → i-filter-prop.ts}

@@ -1,20 +1,20 @@
-import AngleProp from "../mapped-types/angle-prop";
-import { Percentage, ValueOrReactive } from "../css-types";
-import LengthProp from "../mapped-types/length-prop";
-import IShadowProp from "./i-shadow-prop";
-
-export default interface IFilterProp extends
-	AngleProp<["hueRotate"]>,
-	LengthProp<"blur", 1>
-{
-	// url(commonfilters.svg#filter); // Don't know how this works yet.
-	brightness?: ValueOrReactive<number> | Percentage;
-	contrast?: ValueOrReactive<number> | Percentage;
-	dropShadow?: IShadowProp | IShadowProp[];
-	grayscale?: ValueOrReactive<number> | Percentage;
-	invert?: ValueOrReactive<number> | Percentage;
-	opacity?: ValueOrReactive<number> | Percentage;
-	sepia?: ValueOrReactive<number> | Percentage;
-	saturate?: ValueOrReactive<number> | Percentage;
-	// url(filters.svg#filter) blur(4px) saturate(150%); // example.
+import AngleProp from "../mapped-types/angle-prop";
+import { Percentage, ValueOrReactive } from "../css-types";
+import LengthProp from "../mapped-types/length-prop";
+import IShadowProp from "./i-shadow-prop";
+
+export default interface IFilterProp extends
+	AngleProp<["hueRotate"]>,
+	LengthProp<"blur", 1>
+{
+	// url(commonfilters.svg#filter); // Don't know how this works yet.
+	brightness?: ValueOrReactive<number> | Percentage;
+	contrast?: ValueOrReactive<number> | Percentage;
+	dropShadow?: IShadowProp | IShadowProp[];
+	grayscale?: ValueOrReactive<number> | Percentage;
+	invert?: ValueOrReactive<number> | Percentage;
+	opacity?: ValueOrReactive<number> | Percentage;
+	sepia?: ValueOrReactive<number> | Percentage;
+	saturate?: ValueOrReactive<number> | Percentage;
+	// url(filters.svg#filter) blur(4px) saturate(150%); // example.
 }

package/src/styles/complex-css-types/{i-shadow-prop.d.ts → i-shadow-prop.ts}

@@ -1,12 +1,12 @@
-import ColorProps from "../mapped-types/color-props.js";
-import LengthProp from "../mapped-types/length-prop.js";
-
-
-export default interface IShadowProp extends
-	LengthProp<"length", 2>,
-	LengthProp<"blur">,
-	LengthProp<"spread">,
-	ColorProps<"color">
-{
-	
+import ColorProps from "../mapped-types/color-props.js";
+import LengthProp from "../mapped-types/length-prop.js";
+
+
+export default interface IShadowProp extends
+	LengthProp<"length", 2>,
+	LengthProp<"blur">,
+	LengthProp<"spread">,
+	ColorProps<"color">
+{
+	
 }

package/src/styles/complex-css-types/{i-transformation-prop.d.ts → i-transformation-prop.ts}

@@ -1,33 +1,33 @@
-import AngleProp from "../mapped-types/angle-prop";
-import { ValueOrReactive } from "../css-types";
-import LengthProp from "../mapped-types/length-prop";
-
-// Transforms are special because the order matters and functions can be called mulitple times.
-// To support this functionality, we use an array of transform JSON specs.
-export default interface ITransformationProp extends
-	LengthProp<"translate", 1|2>, 
-	LengthProp<"translate3d", 3>,
-	LengthProp<"translateX">,
-	LengthProp<"translateY">,
-	LengthProp<"translateZ">,
-	LengthProp<"perspective">,
-	AngleProp<["rotate3d"], 4>,
-	AngleProp<["skew"], 1|2>,
-	AngleProp<["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"]>
-{
-	// a, b, c, d, tx, ty
-	matrix?: [ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>];
-	// a1, b1, c1, d1,  a2, b2, c2, d2,  a3, b3, c3, d3,  a4, b4, c4, d4
-	matrix3d?: [
-		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
-		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
-		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
-		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>
-	];
-	
-	scale?: ValueOrReactive<number> | [ValueOrReactive<number>, ValueOrReactive<number>];
-	scale3d?: [ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>];
-	scaleX?: ValueOrReactive<number>;
-	scaleY?: ValueOrReactive<number>;
-	scaleZ?: ValueOrReactive<number>;
+import AngleProp from "../mapped-types/angle-prop";
+import { ValueOrReactive } from "../css-types";
+import LengthProp from "../mapped-types/length-prop";
+
+// Transforms are special because the order matters and functions can be called mulitple times.
+// To support this functionality, we use an array of transform JSON specs.
+export default interface ITransformationProp extends
+	LengthProp<"translate", 1|2>, 
+	LengthProp<"translate3d", 3>,
+	LengthProp<"translateX">,
+	LengthProp<"translateY">,
+	LengthProp<"translateZ">,
+	LengthProp<"perspective">,
+	AngleProp<["rotate3d"], 4>,
+	AngleProp<["skew"], 1|2>,
+	AngleProp<["rotate", "rotateX", "rotateY", "rotateZ", "skewX", "skewY"]>
+{
+	// a, b, c, d, tx, ty
+	matrix?: [ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>];
+	// a1, b1, c1, d1,  a2, b2, c2, d2,  a3, b3, c3, d3,  a4, b4, c4, d4
+	matrix3d?: [
+		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
+		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
+		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, 
+		ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>
+	];
+	
+	scale?: ValueOrReactive<number> | [ValueOrReactive<number>, ValueOrReactive<number>];
+	scale3d?: [ValueOrReactive<number>, ValueOrReactive<number>, ValueOrReactive<number>];
+	scaleX?: ValueOrReactive<number>;
+	scaleY?: ValueOrReactive<number>;
+	scaleZ?: ValueOrReactive<number>;
 }

package/src/styles/{css-types.d.ts → css-types.ts}

@@ -1,142 +1,142 @@
-import { IBinding } from "../bindings/i-binding";
-import { IWatcher } from "../bindings/i-watcher";
-
-// Global keyword values.
-export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
-
-export type ComplexType = string;
-
-export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<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;
+import { IBinding } from "../bindings/i-binding";
+import { IWatcher } from "../bindings/i-watcher";
+
+// Global keyword values.
+export type GKV = IWatcher<string>|IBinding<any, string>|"inherit"|"initial"|"unset"|"revert"|"revert-layer";
+
+export type ComplexType = string;
+
+export type ValueOrReactive<T> = T|IBinding<any, T>|IWatcher<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"; // Esoteric removed: "Q"
+// export type RelativeUnits = "ch"|"em"|"ex"|"lh"|"rem"
+// 	|"vh"|"vw"|"vmin"|"vmax"
+// 	|"cqw"|"cqh"|"cqi"|"cqb"|"cqmin"|"cqmax"
+// 	|"%"; // Esoteric removed: "cap"|"ic"|"rlh"|"vb"|"vi"
+// 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}`;