dothtml 5.0.4 → 5.1.0

package/lib/{i-dotcss.d.ts → styling/i-dotcss.d.ts}

@@ -4,11 +4,13 @@ export declare type RelativeUnits = "em" | "ex" | "ch" | "rem" | "vw" | "vh" | "
 export declare type AllUnits = AbsoluteUnits | RelativeUnits;
 export declare type OptionalWhitespace = "" | " ";
 export declare type UrlType = `url('${string}')`;
-export declare type LengthOrDefault = number | `${number}${AllUnits}`;
+export declare type NumericLength = number | `${number}${AllUnits}`;
+export declare type AngleUnits = "deg" | "turn" | "rad" | "grad";
+export declare type NumericAngle = number | `${number}${AngleUnits}`;
 export declare type BackgroundAttachmentValues = BasicCommonValues | "scroll" | "fixed" | "local";
 export declare type BackgroundRepeatValues = BasicCommonValues | "no-repeat" | "repeat" | "space" | "round";
 export declare type BackgroundOriginValues = BasicCommonValues | "padding-box" | "border-box" | "content-box";
-export declare type BackgroundSizeValues = BasicCommonValues | "auto" | LengthOrDefault | "cover" | "contain";
+export declare type BackgroundSizeValues = BasicCommonValues | "auto" | NumericLength | "cover" | "contain";
 export declare type BackfaceVisibilityValues = BasicCommonValues | "visible" | "hidden";
 export declare type BorderStyles = BasicCommonValues | "dotted" | "dashed" | "solid" | "double" | "groove" | "ridge" | "inset" | "outset" | "none" | "hidden";
 export declare type ColorName = BasicCommonValues | "aliceblue" | "antiquewhite" | "aqua" | "aquamarine" | "azure" | "beige" | "bisque" | "black" | "blanchedalmond" | "blue" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgrey" | "darkgreen" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "fuchsia" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "gray" | "grey" | "green" | "greenyellow" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgrey" | "lightgreen" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "lime" | "limegreen" | "linen" | "magenta" | "maroon" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "navy" | "oldlace" | "olive" | "olivedrab" | "orange" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "purple" | "rebeccapurple" | "red" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "silver" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "teal" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "white" | "whitesmoke" | "yellow" | "yellowgreen";
@@ -19,13 +21,13 @@ export declare type FontVariantValues = BasicCommonValues | "normal" | "small-ca
 export declare type FontVariantCapsValues = FontVariantValues | "all-small-caps" | "petite-caps" | "all-petite-caps" | "unicase" | "titling-caps";
 export declare type FontWeightValues = BasicCommonValues | number | "normal" | "bold" | "bolder" | "lighter";
 export declare type LengthProp = BasicCommonValues | "maxHeight" | "minHeight" | "top" | "bottom" | "height" | "maxHidth" | "minWidth" | "right" | "left" | "width" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "outlineOffset" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "lineHeight" | "flexBasis" | "fontSize";
-export declare type OutlineWidthValues = BasicCommonValues | "medium" | "thin" | "thick" | LengthOrDefault;
+export declare type OutlineWidthValues = BasicCommonValues | "medium" | "thin" | "thick" | NumericLength;
 export declare type PositionNames = BasicCommonValues | "static" | "relative" | "fixed" | "absolute" | "sticky";
 export declare type FlexDirectionNames = BasicCommonValues | "row" | "row-reverse" | "column" | "column-reverse";
 export declare type FlexWrapNames = BasicCommonValues | "nowrap" | "wrap" | "wrap-reverse";
 export declare type ColorFormat = BasicCommonValues | ColorName | number | `#${string}` | `rgb(${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number})` | `rgba(${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number},${OptionalWhitespace}${number})` | `hsl(${number},${OptionalWhitespace}${number}%,${OptionalWhitespace}${number}%)` | `hsla(${number},${OptionalWhitespace}${number}%,${OptionalWhitespace}${number}%,${OptionalWhitespace}${number})`;
 export declare type BackgroundRepeatValues2d = BackgroundRepeatValues | "repeat-x" | "repeat-y" | `${BackgroundRepeatValues} ${BackgroundRepeatValues}`;
-export declare type BorderShorthand = BasicCommonValues | `${number}${AllUnits} ${BorderStyles} ${ColorFormat}`;
+export declare type BorderShorthand = BasicCommonValues | `${BorderStyles}` | `${BorderStyles} ${ColorFormat}` | `${number}${AllUnits} ${BorderStyles} ${ColorFormat}`;
 export declare type BackgroundImageFormat = BasicCommonValues | UrlType | `${UrlType}, ${UrlType}`;
 export declare type BackgroundPositionShorthand2D = BasicCommonValues | `${BasicCommonValues | number} ${BasicCommonValues | number}` | `${number}% ${number}%` | `${"left" | "right" | "center"} ${"top" | "center" | "bottom"}`;
 export declare type BackgroundShorthand = BasicCommonValues | `${ColorFormat} ${UrlType} ${BackgroundRepeatValues} ${BackgroundPositionShorthand2D}`;
@@ -75,7 +77,7 @@ export interface IDotcssProp {
     backgroundSizeVw: IDotcssAnimatable<number>;
     backgroundSizeVMax: IDotcssAnimatable<number>;
     backgroundSizeVMin: IDotcssAnimatable<number>;
-    borderBottomLeftRadius: IDotcssAnimatable<number | string>;
+    borderBottomLeftRadius: IDotcssAnimatable<NumericLength>;
     borderBottomLeftRadiusCm: IDotcssAnimatable<number>;
     borderBottomLeftRadiusCh: IDotcssAnimatable<number>;
     borderBottomLeftRadiusEm: IDotcssAnimatable<number>;
@@ -91,7 +93,7 @@ export interface IDotcssProp {
     borderBottomLeftRadiusVw: IDotcssAnimatable<number>;
     borderBottomLeftRadiusVMax: IDotcssAnimatable<number>;
     borderBottomLeftRadiusVMin: IDotcssAnimatable<number>;
-    borderBottomRightRadius: IDotcssAnimatable<number | string>;
+    borderBottomRightRadius: IDotcssAnimatable<NumericLength>;
     borderBottomRightRadiusCm: IDotcssAnimatable<number>;
     borderBottomRightRadiusCh: IDotcssAnimatable<number>;
     borderBottomRightRadiusEm: IDotcssAnimatable<number>;
@@ -107,7 +109,7 @@ export interface IDotcssProp {
     borderBottomRightRadiusVw: IDotcssAnimatable<number>;
     borderBottomRightRadiusVMax: IDotcssAnimatable<number>;
     borderBottomRightRadiusVMin: IDotcssAnimatable<number>;
-    borderBottomWidth: IDotcssAnimatable<number | string>;
+    borderBottomWidth: IDotcssAnimatable<NumericLength>;
     borderBottomWidthCm: IDotcssAnimatable<number>;
     borderBottomWidthCh: IDotcssAnimatable<number>;
     borderBottomWidthEm: IDotcssAnimatable<number>;
@@ -123,7 +125,7 @@ export interface IDotcssProp {
     borderBottomWidthVw: IDotcssAnimatable<number>;
     borderBottomWidthVMax: IDotcssAnimatable<number>;
     borderBottomWidthVMin: IDotcssAnimatable<number>;
-    borderImageWidth: IDotcssAnimatable<number | string>;
+    borderImageWidth: IDotcssAnimatable<NumericLength>;
     borderImageWidthCm: IDotcssAnimatable<number>;
     borderImageWidthCh: IDotcssAnimatable<number>;
     borderImageWidthEm: IDotcssAnimatable<number>;
@@ -139,7 +141,7 @@ export interface IDotcssProp {
     borderImageWidthVw: IDotcssAnimatable<number>;
     borderImageWidthVMax: IDotcssAnimatable<number>;
     borderImageWidthVMin: IDotcssAnimatable<number>;
-    borderLeftWidth: IDotcssAnimatable<number | string>;
+    borderLeftWidth: IDotcssAnimatable<NumericLength>;
     borderLeftWidthCm: IDotcssAnimatable<number>;
     borderLeftWidthCh: IDotcssAnimatable<number>;
     borderLeftWidthEm: IDotcssAnimatable<number>;
@@ -155,7 +157,7 @@ export interface IDotcssProp {
     borderLeftWidthVw: IDotcssAnimatable<number>;
     borderLeftWidthVMax: IDotcssAnimatable<number>;
     borderLeftWidthVMin: IDotcssAnimatable<number>;
-    borderRadius: IDotcssAnimatable<number | string>;
+    borderRadius: IDotcssAnimatable<NumericLength>;
     borderRadiusCm: IDotcssAnimatable<number>;
     borderRadiusCh: IDotcssAnimatable<number>;
     borderRadiusEm: IDotcssAnimatable<number>;
@@ -171,7 +173,7 @@ export interface IDotcssProp {
     borderRadiusVw: IDotcssAnimatable<number>;
     borderRadiusVMax: IDotcssAnimatable<number>;
     borderRadiusVMin: IDotcssAnimatable<number>;
-    borderRightWidth: IDotcssAnimatable<number | string>;
+    borderRightWidth: IDotcssAnimatable<NumericLength>;
     borderRightWidthCm: IDotcssAnimatable<number>;
     borderRightWidthCh: IDotcssAnimatable<number>;
     borderRightWidthEm: IDotcssAnimatable<number>;
@@ -187,7 +189,7 @@ export interface IDotcssProp {
     borderRightWidthVw: IDotcssAnimatable<number>;
     borderRightWidthVMax: IDotcssAnimatable<number>;
     borderRightWidthVMin: IDotcssAnimatable<number>;
-    borderTopLeftRadius: IDotcssAnimatable<number | string>;
+    borderTopLeftRadius: IDotcssAnimatable<NumericLength>;
     borderTopLeftRadiusCm: IDotcssAnimatable<number>;
     borderTopLeftRadiusCh: IDotcssAnimatable<number>;
     borderTopLeftRadiusEm: IDotcssAnimatable<number>;
@@ -203,7 +205,7 @@ export interface IDotcssProp {
     borderTopLeftRadiusVw: IDotcssAnimatable<number>;
     borderTopLeftRadiusVMax: IDotcssAnimatable<number>;
     borderTopLeftRadiusVMin: IDotcssAnimatable<number>;
-    borderTopRightRadius: IDotcssAnimatable<number | string>;
+    borderTopRightRadius: IDotcssAnimatable<NumericLength>;
     borderTopRightRadiusCm: IDotcssAnimatable<number>;
     borderTopRightRadiusCh: IDotcssAnimatable<number>;
     borderTopRightRadiusEm: IDotcssAnimatable<number>;
@@ -219,7 +221,7 @@ export interface IDotcssProp {
     borderTopRightRadiusVw: IDotcssAnimatable<number>;
     borderTopRightRadiusVMax: IDotcssAnimatable<number>;
     borderTopRightRadiusVMin: IDotcssAnimatable<number>;
-    borderTopWidth: IDotcssAnimatable<number | string>;
+    borderTopWidth: IDotcssAnimatable<NumericLength>;
     borderTopWidthCm: IDotcssAnimatable<number>;
     borderTopWidthCh: IDotcssAnimatable<number>;
     borderTopWidthEm: IDotcssAnimatable<number>;
@@ -235,7 +237,7 @@ export interface IDotcssProp {
     borderTopWidthVw: IDotcssAnimatable<number>;
     borderTopWidthVMax: IDotcssAnimatable<number>;
     borderTopWidthVMin: IDotcssAnimatable<number>;
-    borderWidth: IDotcssAnimatable<number | string>;
+    borderWidth: IDotcssAnimatable<NumericLength>;
     borderWidthCm: IDotcssAnimatable<number>;
     borderWidthCh: IDotcssAnimatable<number>;
     borderWidthEm: IDotcssAnimatable<number>;
@@ -251,7 +253,7 @@ export interface IDotcssProp {
     borderWidthVw: IDotcssAnimatable<number>;
     borderWidthVMax: IDotcssAnimatable<number>;
     borderWidthVMin: IDotcssAnimatable<number>;
-    bottom: IDotcssAnimatable<number | string>;
+    bottom: IDotcssAnimatable<NumericLength>;
     bottomCm: IDotcssAnimatable<number>;
     bottomCh: IDotcssAnimatable<number>;
     bottomEm: IDotcssAnimatable<number>;
@@ -267,7 +269,7 @@ export interface IDotcssProp {
     bottomVw: IDotcssAnimatable<number>;
     bottomVMax: IDotcssAnimatable<number>;
     bottomVMin: IDotcssAnimatable<number>;
-    height: IDotcssAnimatable<number | string>;
+    height: IDotcssAnimatable<NumericLength>;
     heightCm: IDotcssAnimatable<number>;
     heightCh: IDotcssAnimatable<number>;
     heightEm: IDotcssAnimatable<number>;
@@ -283,7 +285,7 @@ export interface IDotcssProp {
     heightVw: IDotcssAnimatable<number>;
     heightVMax: IDotcssAnimatable<number>;
     heightVMin: IDotcssAnimatable<number>;
-    left: IDotcssAnimatable<number | string>;
+    left: IDotcssAnimatable<NumericLength>;
     leftCm: IDotcssAnimatable<number>;
     leftCh: IDotcssAnimatable<number>;
     leftEm: IDotcssAnimatable<number>;
@@ -299,7 +301,7 @@ export interface IDotcssProp {
     leftVw: IDotcssAnimatable<number>;
     leftVMax: IDotcssAnimatable<number>;
     leftVMin: IDotcssAnimatable<number>;
-    margin: IDotcssAnimatable<number | string>;
+    margin: IDotcssAnimatable<NumericLength>;
     marginCm: IDotcssAnimatable<number>;
     marginCh: IDotcssAnimatable<number>;
     marginEm: IDotcssAnimatable<number>;
@@ -315,7 +317,7 @@ export interface IDotcssProp {
     marginVw: IDotcssAnimatable<number>;
     marginVMax: IDotcssAnimatable<number>;
     marginVMin: IDotcssAnimatable<number>;
-    marginBottom: IDotcssAnimatable<number | string>;
+    marginBottom: IDotcssAnimatable<NumericLength>;
     marginBottomCm: IDotcssAnimatable<number>;
     marginBottomCh: IDotcssAnimatable<number>;
     marginBottomEm: IDotcssAnimatable<number>;
@@ -331,7 +333,7 @@ export interface IDotcssProp {
     marginBottomVw: IDotcssAnimatable<number>;
     marginBottomVMax: IDotcssAnimatable<number>;
     marginBottomVMin: IDotcssAnimatable<number>;
-    marginLeft: IDotcssAnimatable<number | string>;
+    marginLeft: IDotcssAnimatable<NumericLength>;
     marginLeftCm: IDotcssAnimatable<number>;
     marginLeftCh: IDotcssAnimatable<number>;
     marginLeftEm: IDotcssAnimatable<number>;
@@ -347,7 +349,7 @@ export interface IDotcssProp {
     marginLeftVw: IDotcssAnimatable<number>;
     marginLeftVMax: IDotcssAnimatable<number>;
     marginLeftVMin: IDotcssAnimatable<number>;
-    marginRight: IDotcssAnimatable<number | string>;
+    marginRight: IDotcssAnimatable<NumericLength>;
     marginRightCm: IDotcssAnimatable<number>;
     marginRightCh: IDotcssAnimatable<number>;
     marginRightEm: IDotcssAnimatable<number>;
@@ -363,7 +365,7 @@ export interface IDotcssProp {
     marginRightVw: IDotcssAnimatable<number>;
     marginRightVMax: IDotcssAnimatable<number>;
     marginRightVMin: IDotcssAnimatable<number>;
-    marginTop: IDotcssAnimatable<number | string>;
+    marginTop: IDotcssAnimatable<NumericLength>;
     marginTopCm: IDotcssAnimatable<number>;
     marginTopCh: IDotcssAnimatable<number>;
     marginTopEm: IDotcssAnimatable<number>;
@@ -379,7 +381,7 @@ export interface IDotcssProp {
     marginTopVw: IDotcssAnimatable<number>;
     marginTopVMax: IDotcssAnimatable<number>;
     marginTopVMin: IDotcssAnimatable<number>;
-    maxHeight: IDotcssAnimatable<number | string>;
+    maxHeight: IDotcssAnimatable<NumericLength>;
     maxHeightCm: IDotcssAnimatable<number>;
     maxHeightCh: IDotcssAnimatable<number>;
     maxHeightEm: IDotcssAnimatable<number>;
@@ -395,7 +397,7 @@ export interface IDotcssProp {
     maxHeightVw: IDotcssAnimatable<number>;
     maxHeightVMax: IDotcssAnimatable<number>;
     maxHeightVMin: IDotcssAnimatable<number>;
-    maxWidth: IDotcssAnimatable<number | string>;
+    maxWidth: IDotcssAnimatable<NumericLength>;
     maxWidthCm: IDotcssAnimatable<number>;
     maxWidthCh: IDotcssAnimatable<number>;
     maxWidthEm: IDotcssAnimatable<number>;
@@ -411,7 +413,7 @@ export interface IDotcssProp {
     maxWidthVw: IDotcssAnimatable<number>;
     maxWidthVMax: IDotcssAnimatable<number>;
     maxWidthVMin: IDotcssAnimatable<number>;
-    minHeight: IDotcssAnimatable<number | string>;
+    minHeight: IDotcssAnimatable<NumericLength>;
     minHeightCm: IDotcssAnimatable<number>;
     minHeightCh: IDotcssAnimatable<number>;
     minHeightEm: IDotcssAnimatable<number>;
@@ -427,7 +429,7 @@ export interface IDotcssProp {
     minHeightVw: IDotcssAnimatable<number>;
     minHeightVMax: IDotcssAnimatable<number>;
     minHeightVMin: IDotcssAnimatable<number>;
-    minWidth: IDotcssAnimatable<number | string>;
+    minWidth: IDotcssAnimatable<NumericLength>;
     minWidthCm: IDotcssAnimatable<number>;
     minWidthCh: IDotcssAnimatable<number>;
     minWidthEm: IDotcssAnimatable<number>;
@@ -443,7 +445,7 @@ export interface IDotcssProp {
     minWidthVw: IDotcssAnimatable<number>;
     minWidthVMax: IDotcssAnimatable<number>;
     minWidthVMin: IDotcssAnimatable<number>;
-    outlineOffset: IDotcssAnimatable<number | string>;
+    outlineOffset: IDotcssAnimatable<NumericLength>;
     outlineOffsetCm: IDotcssAnimatable<number>;
     outlineOffsetCh: IDotcssAnimatable<number>;
     outlineOffsetEm: IDotcssAnimatable<number>;
@@ -459,7 +461,7 @@ export interface IDotcssProp {
     outlineOffsetVw: IDotcssAnimatable<number>;
     outlineOffsetVMax: IDotcssAnimatable<number>;
     outlineOffsetVMin: IDotcssAnimatable<number>;
-    padding: IDotcssAnimatable<number | string>;
+    padding: IDotcssAnimatable<NumericLength>;
     paddingCm: IDotcssAnimatable<number>;
     paddingCh: IDotcssAnimatable<number>;
     paddingEm: IDotcssAnimatable<number>;
@@ -475,7 +477,7 @@ export interface IDotcssProp {
     paddingVw: IDotcssAnimatable<number>;
     paddingVMax: IDotcssAnimatable<number>;
     paddingVMin: IDotcssAnimatable<number>;
-    paddingBottom: IDotcssAnimatable<number | string>;
+    paddingBottom: IDotcssAnimatable<NumericLength>;
     paddingBottomCm: IDotcssAnimatable<number>;
     paddingBottomCh: IDotcssAnimatable<number>;
     paddingBottomEm: IDotcssAnimatable<number>;
@@ -491,7 +493,7 @@ export interface IDotcssProp {
     paddingBottomVw: IDotcssAnimatable<number>;
     paddingBottomVMax: IDotcssAnimatable<number>;
     paddingBottomVMin: IDotcssAnimatable<number>;
-    paddingLeft: IDotcssAnimatable<number | string>;
+    paddingLeft: IDotcssAnimatable<NumericLength>;
     paddingLeftCm: IDotcssAnimatable<number>;
     paddingLeftCh: IDotcssAnimatable<number>;
     paddingLeftEm: IDotcssAnimatable<number>;
@@ -507,7 +509,7 @@ export interface IDotcssProp {
     paddingLeftVw: IDotcssAnimatable<number>;
     paddingLeftVMax: IDotcssAnimatable<number>;
     paddingLeftVMin: IDotcssAnimatable<number>;
-    paddingRight: IDotcssAnimatable<number | string>;
+    paddingRight: IDotcssAnimatable<NumericLength>;
     paddingRightCm: IDotcssAnimatable<number>;
     paddingRightCh: IDotcssAnimatable<number>;
     paddingRightEm: IDotcssAnimatable<number>;
@@ -523,7 +525,7 @@ export interface IDotcssProp {
     paddingRightVw: IDotcssAnimatable<number>;
     paddingRightVMax: IDotcssAnimatable<number>;
     paddingRightVMin: IDotcssAnimatable<number>;
-    paddingTop: IDotcssAnimatable<number | string>;
+    paddingTop: IDotcssAnimatable<NumericLength>;
     paddingTopCm: IDotcssAnimatable<number>;
     paddingTopCh: IDotcssAnimatable<number>;
     paddingTopEm: IDotcssAnimatable<number>;
@@ -539,7 +541,7 @@ export interface IDotcssProp {
     paddingTopVw: IDotcssAnimatable<number>;
     paddingTopVMax: IDotcssAnimatable<number>;
     paddingTopVMin: IDotcssAnimatable<number>;
-    right: IDotcssAnimatable<number | string>;
+    right: IDotcssAnimatable<NumericLength>;
     rightCm: IDotcssAnimatable<number>;
     rightCh: IDotcssAnimatable<number>;
     rightEm: IDotcssAnimatable<number>;
@@ -555,7 +557,7 @@ export interface IDotcssProp {
     rightVw: IDotcssAnimatable<number>;
     rightVMax: IDotcssAnimatable<number>;
     rightVMin: IDotcssAnimatable<number>;
-    top: IDotcssAnimatable<number | string>;
+    top: IDotcssAnimatable<NumericLength>;
     topCm: IDotcssAnimatable<number>;
     topCh: IDotcssAnimatable<number>;
     topEm: IDotcssAnimatable<number>;
@@ -571,7 +573,7 @@ export interface IDotcssProp {
     topVw: IDotcssAnimatable<number>;
     topVMax: IDotcssAnimatable<number>;
     topVMin: IDotcssAnimatable<number>;
-    width: IDotcssAnimatable<number | string>;
+    width: IDotcssAnimatable<NumericLength>;
     widthCm: IDotcssAnimatable<number>;
     widthCh: IDotcssAnimatable<number>;
     widthEm: IDotcssAnimatable<number>;
@@ -587,7 +589,7 @@ export interface IDotcssProp {
     widthVw: IDotcssAnimatable<number>;
     widthVMax: IDotcssAnimatable<number>;
     widthVMin: IDotcssAnimatable<number>;
-    lineHeight: IDotcssAnimatable<number | string>;
+    lineHeight: IDotcssAnimatable<NumericLength>;
     lineHeightCm: IDotcssAnimatable<number>;
     lineHeightCh: IDotcssAnimatable<number>;
     lineHeightEm: IDotcssAnimatable<number>;
@@ -603,7 +605,7 @@ export interface IDotcssProp {
     lineHeightVw: IDotcssAnimatable<number>;
     lineHeightVMax: IDotcssAnimatable<number>;
     lineHeightVMin: IDotcssAnimatable<number>;
-    fontSize: IDotcssAnimatable<number | string>;
+    fontSize: IDotcssAnimatable<NumericLength>;
     fontSizeCm: IDotcssAnimatable<number>;
     fontSizeCh: IDotcssAnimatable<number>;
     fontSizeEm: IDotcssAnimatable<number>;
@@ -619,7 +621,7 @@ export interface IDotcssProp {
     fontSizeVw: IDotcssAnimatable<number>;
     fontSizeVMax: IDotcssAnimatable<number>;
     fontSizeVMin: IDotcssAnimatable<number>;
-    flexBasis: IDotcssAnimatable<number | string>;
+    flexBasis: IDotcssAnimatable<NumericLength>;
     flexBasisCm: IDotcssAnimatable<number>;
     flexBasisCh: IDotcssAnimatable<number>;
     flexBasisEm: IDotcssAnimatable<number>;
@@ -639,7 +641,7 @@ export interface IDotcssProp {
     borderImage: (value: BackgroundImageFormat) => IDotcssProp;
     listStyleImage: (value: BackgroundImageFormat) => IDotcssProp;
     content: (value: BasicCommonValues | UrlType) => IDotcssProp;
-    transformation: any;
+    transform: (transformOrTransformBuilder: BasicCommonValues | TransformationBuilder) => IDotcssProp;
     opacity: IDotcssAnimatable<number | string>;
     background: (value: BasicCommonValues | string) => IDotcssProp;
     backgroundAttachment: (value: BackgroundAttachmentValues) => IDotcssProp;
@@ -837,12 +839,12 @@ export interface IDotcssProp {
     pointerEvents: (value: BasicCommonValues | string) => IDotcssProp;
 }
 export default interface IDotCss extends IDotcssProp {
-    (document?: Element | string): IDotcssProp;
+    (document?: Array<HTMLElement> | HTMLElement | string): IDotcssProp;
     version: string;
 }
 export interface IDotcssAnimatable<T> extends IDotcssProp {
     (value: T): IDotcssProp;
-    animate(value: number, duration: number, style: "ease", complete: Function): IDotcssProp;
+    animate(value: number | string, duration: number, style: "ease", complete: Function): IDotcssProp;
 }
 export interface IDotcssAnimatableColor extends IDotcssProp {
     (value: ColorFormat | Array<number>): IDotcssProp;
@@ -865,3 +867,151 @@ export interface ShowParams {
     showStyle?: "normal" | "fade" | "grow";
     animationStyle?: "ease";
 }
+export interface TransformationBuilder {
+    (trns: ITransformationContext): ITransformationContext | string;
+}
+export type ITransformationContext = {
+    matrix: (a: number, b: number, c: number, d: number, tx: number, ty: number) => ITransformationContext;
+    matrix3d: (a1: number, b1: number, c1: number, d1: number, a2: number, b2: number, c2: number, d2: number, a3: number, b3: number, c3: number, d3: number, a4: number, b4: number, c4: number, d4: number) => ITransformationContext;
+    translate: (x: NumericLength, y?: NumericLength) => ITransformationContext;
+    translateCm: (x: number, y?: number) => ITransformationContext;
+    translateCh: (x: number, y?: number) => ITransformationContext;
+    translateEm: (x: number, y?: number) => ITransformationContext;
+    translateEx: (x: number, y?: number) => ITransformationContext;
+    translateIn: (x: number, y?: number) => ITransformationContext;
+    translateMm: (x: number, y?: number) => ITransformationContext;
+    translateP: (x: number, y?: number) => ITransformationContext;
+    translatePc: (x: number, y?: number) => ITransformationContext;
+    translatePt: (x: number, y?: number) => ITransformationContext;
+    translatePx: (x: number, y?: number) => ITransformationContext;
+    translateRem: (x: number, y?: number) => ITransformationContext;
+    translateVh: (x: number, y?: number) => ITransformationContext;
+    translateVw: (x: number, y?: number) => ITransformationContext;
+    translateVMax: (x: number, y?: number) => ITransformationContext;
+    translateVMin: (x: number, y?: number) => ITransformationContext;
+    translate3d: (x: NumericLength, y: NumericLength, z: NumericLength) => ITransformationContext;
+    translate3dCm: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dCh: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dEm: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dEx: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dIn: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dMm: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dP: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dPc: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dPt: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dPx: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dRem: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dVh: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dVw: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dVMax: (x: number, y: number, z: number) => ITransformationContext;
+    translate3dVMin: (x: number, y: number, z: number) => ITransformationContext;
+    translateX: (v: NumericLength) => ITransformationContext;
+    translateXCm: (v: number) => ITransformationContext;
+    translateXCh: (v: number) => ITransformationContext;
+    translateXEm: (v: number) => ITransformationContext;
+    translateXEx: (v: number) => ITransformationContext;
+    translateXIn: (v: number) => ITransformationContext;
+    translateXMm: (v: number) => ITransformationContext;
+    translateXP: (v: number) => ITransformationContext;
+    translateXPc: (v: number) => ITransformationContext;
+    translateXPt: (v: number) => ITransformationContext;
+    translateXPx: (v: number) => ITransformationContext;
+    translateXRem: (v: number) => ITransformationContext;
+    translateXVh: (v: number) => ITransformationContext;
+    translateXVw: (v: number) => ITransformationContext;
+    translateXVMax: (v: number) => ITransformationContext;
+    translateXVMin: (v: number) => ITransformationContext;
+    translateY: (v: NumericLength) => ITransformationContext;
+    translateYCm: (v: number) => ITransformationContext;
+    translateYCh: (v: number) => ITransformationContext;
+    translateYEm: (v: number) => ITransformationContext;
+    translateYEx: (v: number) => ITransformationContext;
+    translateYIn: (v: number) => ITransformationContext;
+    translateYMm: (v: number) => ITransformationContext;
+    translateYP: (v: number) => ITransformationContext;
+    translateYPc: (v: number) => ITransformationContext;
+    translateYPt: (v: number) => ITransformationContext;
+    translateYPx: (v: number) => ITransformationContext;
+    translateYRem: (v: number) => ITransformationContext;
+    translateYVh: (v: number) => ITransformationContext;
+    translateYVw: (v: number) => ITransformationContext;
+    translateYVMax: (v: number) => ITransformationContext;
+    translateYVMin: (v: number) => ITransformationContext;
+    translateZ: (v: NumericLength) => ITransformationContext;
+    translateZCm: (v: number) => ITransformationContext;
+    translateZCh: (v: number) => ITransformationContext;
+    translateZEm: (v: number) => ITransformationContext;
+    translateZEx: (v: number) => ITransformationContext;
+    translateZIn: (v: number) => ITransformationContext;
+    translateZMm: (v: number) => ITransformationContext;
+    translateZP: (v: number) => ITransformationContext;
+    translateZPc: (v: number) => ITransformationContext;
+    translateZPt: (v: number) => ITransformationContext;
+    translateZPx: (v: number) => ITransformationContext;
+    translateZRem: (v: number) => ITransformationContext;
+    translateZVh: (v: number) => ITransformationContext;
+    translateZVw: (v: number) => ITransformationContext;
+    translateZVMax: (v: number) => ITransformationContext;
+    translateZVMin: (v: number) => ITransformationContext;
+    scale: (x: number, y?: number) => ITransformationContext;
+    scale3d: (x: number, y: number, z: number) => ITransformationContext;
+    scaleX: (v: number) => ITransformationContext;
+    scaleY: (v: number) => ITransformationContext;
+    scaleZ: (v: number) => ITransformationContext;
+    rotate: (v: NumericAngle) => ITransformationContext;
+    rotateDeg: (v: number) => ITransformationContext;
+    rotateTurn: (v: number) => ITransformationContext;
+    rotateRad: (v: number) => ITransformationContext;
+    rotateGrad: (v: number) => ITransformationContext;
+    rotate3d: (x: number, y: number, z: number, a: NumericAngle) => ITransformationContext;
+    rotate3dDeg: (x: number, y: number, z: number, a: number) => ITransformationContext;
+    rotate3dTurn: (x: number, y: number, z: number, a: number) => ITransformationContext;
+    rotate3dRad: (x: number, y: number, z: number, a: number) => ITransformationContext;
+    rotate3dGrad: (x: number, y: number, z: number, a: number) => ITransformationContext;
+    rotateX: (v: NumericAngle) => ITransformationContext;
+    rotateXDeg: (v: number) => ITransformationContext;
+    rotateXTurn: (v: number) => ITransformationContext;
+    rotateXRad: (v: number) => ITransformationContext;
+    rotateXGrad: (v: number) => ITransformationContext;
+    rotateY: (v: NumericAngle) => ITransformationContext;
+    rotateYDeg: (v: number) => ITransformationContext;
+    rotateYTurn: (v: number) => ITransformationContext;
+    rotateYRad: (v: number) => ITransformationContext;
+    rotateYGrad: (v: number) => ITransformationContext;
+    rotateZ: (v: NumericAngle) => ITransformationContext;
+    rotateZDeg: (v: number) => ITransformationContext;
+    rotateZTurn: (v: number) => ITransformationContext;
+    rotateZRad: (v: number) => ITransformationContext;
+    rotateZGrad: (v: number) => ITransformationContext;
+    skew: (x: NumericAngle, y?: NumericAngle) => ITransformationContext;
+    skewDeg: (x: number, y?: number) => ITransformationContext;
+    skewTurn: (x: number, y?: number) => ITransformationContext;
+    skewRad: (x: number, y?: number) => ITransformationContext;
+    skewGrad: (x: number, y?: number) => ITransformationContext;
+    skewX: (v: NumericAngle) => ITransformationContext;
+    skewXDeg: (v: number) => ITransformationContext;
+    skewXTurn: (v: number) => ITransformationContext;
+    skewXRad: (v: number) => ITransformationContext;
+    skewXGrad: (v: number) => ITransformationContext;
+    skewY: (v: NumericAngle) => ITransformationContext;
+    skewYDeg: (v: number) => ITransformationContext;
+    skewYTurn: (v: number) => ITransformationContext;
+    skewYRad: (v: number) => ITransformationContext;
+    skewYGrad: (v: number) => ITransformationContext;
+    perspective: (v: NumericLength) => ITransformationContext;
+    perspectiveCm: (v: number) => ITransformationContext;
+    perspectiveCh: (v: number) => ITransformationContext;
+    perspectiveEm: (v: number) => ITransformationContext;
+    perspectiveEx: (v: number) => ITransformationContext;
+    perspectiveIn: (v: number) => ITransformationContext;
+    perspectiveMm: (v: number) => ITransformationContext;
+    perspectiveP: (v: number) => ITransformationContext;
+    perspectivePc: (v: number) => ITransformationContext;
+    perspectivePt: (v: number) => ITransformationContext;
+    perspectivePx: (v: number) => ITransformationContext;
+    perspectiveRem: (v: number) => ITransformationContext;
+    perspectiveVh: (v: number) => ITransformationContext;
+    perspectiveVw: (v: number) => ITransformationContext;
+    perspectiveVMax: (v: number) => ITransformationContext;
+    perspectiveVMin: (v: number) => ITransformationContext;
+};

package/lib/styling/style-builder.d.ts

@@ -0,0 +1,24 @@
+import IDotCss from "./i-dotcss";
+declare const dotcss: IDotCss;
+/**
+ * The dotcss builder gets extended with all of the css functions at runtime.
+*/
+export declare class _Builder {
+    currentCss: string;
+    targets: Array<HTMLElement>;
+    constructor(targets?: Array<HTMLElement>);
+    toString(): string;
+    hide(style?: {
+        duration: any;
+        hideStyle: any;
+        complete: any;
+    }): this;
+    show(style?: {
+        duration: any;
+        showStyle: any;
+        complete: any;
+    }): import("./i-dotcss").IDotcssProp | this;
+    fadeOut(duration: any, complete: any): this;
+    fadeIn(duration: any, complete: any): import("./i-dotcss").IDotcssProp | this;
+}
+export default dotcss;

package/lib/styling/unit-function-tables.d.ts

@@ -0,0 +1,10 @@
+export declare const AllLengthUnits: ({
+    unit: string;
+    jsName?: undefined;
+} | {
+    unit: string;
+    jsName: string;
+})[];
+export declare const AllAngleUnits: {
+    unit: string;
+}[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml",
-  "version": "5.0.4",
+  "version": "5.1.0",
   "description": "DOThtml is a client-side framework for building single-page applications.",
   "main": "lib/dothtml.js",
   "devDependencies": {
@@ -11,7 +11,7 @@
     "jest": "^27.0.6",
     "ts-jest": "^27.1.4",
     "ts-loader": "^9.2.8",
-    "typescript": "^4.6.3",
+    "typescript": "^4.9.3",
     "webpack": "^5.49.0",
     "webpack-cli": "^4.9.2"
   },

package/src/component.ts

@@ -4,7 +4,7 @@ import { ClassPrefix, eachK, GlobalComponentStack, isF, sT } from "./dot-util";
 import ERR from "./err";
 import { IDotDocument, IDotElement, IDotElementDocument, IDotGenericElement } from "./i-dot";
 import { ArgCallback, ArrayArgCallback, AttrArgCallback } from "./arg-callback-obj";
-import IDotCss from "./i-dotcss";
+import IDotCss from "./styling/i-dotcss";
 
 interface IPropertyContainer{
 	activePropConstructor: Function;

package/src/dot-util.ts

@@ -30,4 +30,40 @@ class _ClassPrefix{
 
 export const ClassPrefix = new _ClassPrefix()
 
-export const GlobalComponentStack: Array<Component> = [];
+export const GlobalComponentStack: Array<Component> = [];
+
+
+export type AnimationType = "geometric"|"exponential"|"ease"|"linear";
+
+export var floatRegex = new RegExp("[-+]?[0-9]*\\.?[0-9]+(?:[eE][-+]?[0-9]+)?", "g");
+
+/**
+ * Function that takes in a bunch of parameters and steps the start value toward the target based on timeRemaining and style.
+ * currentValue is the current value.
+ * targetValue is the target valaue.
+ * timeRemaining is the time remaining in ms.
+ * stepProgress is the size of this step.
+ * totalDuration is the duration of the entire animation from start to finish (not just this step).
+ * style is the type of transition (geometric=exponential, ease, linear).
+ * Returns the result.
+*/
+export function numberStep(startValue: number, targetValue: number, currentTime: number, totalDuration: number, style: AnimationType){
+	
+	startValue = Number(startValue);
+	targetValue = Number(targetValue);
+
+	var timeRemaining  = totalDuration - currentTime;
+
+	switch(style){
+		case "geometric":
+		case "exponential"://This is kind of stupid now that we have ease. I might come back and add it in the future. For now assume ease.
+		//	var m = Math.exp(-1 / timeRemaining);
+		//	return  targetValue + m * (startValue - targetValue);
+		case "ease":
+			var m = (-Math.cos(Math.PI * (currentTime / totalDuration)) + 1) * 0.5;
+			return  startValue + m * (targetValue - startValue);
+		case "linear":
+		default:
+			return startValue + (targetValue - startValue) * (currentTime / totalDuration);
+	}
+}

package/src/dot.ts

@@ -1,7 +1,7 @@
 
 import eventBus from "./event-bus";
 import {IDotCore, IDotGenericElement} from "./i-dot";
-import dotcss from "./style-builder";
+import dotcss, { _Builder } from "./styling/style-builder";
 import ERR from "./err";
 import { DotContent, IDotElementDocument, IDotDocument } from "./i-dot";
 import { ClassPrefix, eachK, GlobalComponentStack, isF, sT, str } from "./dot-util";
@@ -706,7 +706,7 @@ ext("attr", function(attr, value, arg3?){
 			if (!isF(value)) {
 
 				// Objects (except for the css builder :/)
-				if(typeof value == "object" && !(value instanceof dot.css["_Builder"])){
+				if(typeof value == "object" && !(value instanceof _Builder)){
 					var originalValue = value;
 					var valueSetter = function(){
 						var str = "";

package/src/dothtml.ts

@@ -29,6 +29,6 @@ dot.Component = Component;
 export default dot;
 export {default as DotComponent} from "./component";
 export {IDotElement} from "./i-dot";
-export {default as IDotCss} from "./i-dotcss";
+export {default as IDotCss} from "./styling/i-dotcss";
 
 // https://www.youtube.com/JoshSideris