marko 5.25.6 → 5.25.7

package/docs/typescript.md

@@ -357,3 +357,46 @@ _components/color-rotate-button/index.marko_
   <${input.renderBody}/>
 </button>
 ```
+
+## Extend Native Tags (for custom elements)
+
+```ts
+interface MyCustomElementAttributes {
+  // ...
+}
+
+declare global {
+  namespace Marko {
+    namespace NativeTags {
+      // By adding this entry, you can now use `my-custom-element` as a native html tag.
+      "my-custom-element": MyCustomElementAttributes
+    }
+  }
+}
+```
+
+## Extending the "global" HTML Attributes
+
+```ts
+declare global {
+  namespace Marko {
+    interface HTMLAttributes {
+      "my-non-standard-attribute"?: string; // Adds this attribute as available on all HTML tags.
+    }
+  }
+}
+```
+
+## Extending CSS Properties (for custom properties)
+
+```ts
+declare global {
+  namespace Marko {
+    namespace CSS {
+      interface Properties {
+        "--foo"?: string; // adds a support for a custom `--foo` css property.
+      }
+    }
+  }
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "marko",
-    "version": "5.25.6",
+    "version": "5.25.7",
     "license": "MIT",
     "description": "UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.",
     "dependencies": {

package/tags-html.d.ts

@@ -124,6 +124,10 @@ declare global {
       wbr: Tag<_.Marko·Inputᐸʺwbrʺᐳ>;
     }
 
+    namespace CSS {
+      export interface Properties extends csstype.PropertiesHyphen {}
+    }
+
     namespace HTML {
       interface A extends HTMLAttributes<HTMLAnchorElement> {
         /**
@@ -3630,29 +3634,7 @@ declare global {
       type Marko·Inputᐸʺiʺᐳ = { [K in keyof HTML.I]: HTML.I[K] };
       type Marko·Inputᐸʺiframeʺᐳ = { [K in keyof HTML.IFrame]: HTML.IFrame[K] };
       type Marko·Inputᐸʺimgʺᐳ = { [K in keyof HTML.Img]: HTML.Img[K] };
-      type Marko·Inputᐸʺinputʺᐳ = {} & (
-        | HTML.InputHidden
-        | HTML.InputText
-        | HTML.InputTel
-        | HTML.InputURL
-        | HTML.InputEmail
-        | HTML.InputPassword
-        | HTML.InputDate
-        | HTML.InputMonth
-        | HTML.InputWeek
-        | HTML.InputTime
-        | HTML.InputDateTimeLocal
-        | HTML.InputNumber
-        | HTML.InputRange
-        | HTML.InputColor
-        | HTML.InputCheckbox
-        | HTML.InputRadio
-        | HTML.InputFile
-        | HTML.InputSubmit
-        | HTML.InputImage
-        | HTML.InputReset
-        | HTML.InputButton
-      );
+      type Marko·Inputᐸʺinputʺᐳ = { [K in keyof HTML.Input]: HTML.Input[K] };
       type Marko·Inputᐸʺinsʺᐳ = { [K in keyof HTML.Ins]: HTML.Ins[K] };
       type Marko·Inputᐸʺkbdʺᐳ = { [K in keyof HTML.Kbd]: HTML.Kbd[K] };
       type Marko·Inputᐸʺlabelʺᐳ = { [K in keyof HTML.Label]: HTML.Label[K] };
@@ -3737,7 +3719,7 @@ type AttrClass =
   | string
   | AttrClass[]
   | Record<string, AttrMissing | boolean>;
-type AttrStyle = AttrMissing | string | csstype.PropertiesHyphen | AttrStyle[];
+type AttrStyle = AttrMissing | string | Marko.CSS.Properties | AttrStyle[];
 type AttrCrossOrigin = AttrBoolean | "anonymous" | "use-credentials";
 type AttrEventHandler<Event, Target> =
   | AttrMissing