marko 5.25.6 → 5.25.8

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.8",
     "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> {
         /**
@@ -1046,7 +1050,7 @@ declare global {
          * Specifies whether the input field should have autocomplete enabled or disabled.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * Indicates whether a file input should use a specific capture method.
@@ -1128,7 +1132,7 @@ declare global {
          * The maximum allowed value for the input.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-max
          */
-        max?: AttrString;
+        max?: AttrStringOrNumber;
 
         /**
          * The maximum number of characters allowed in the input.
@@ -1140,7 +1144,7 @@ declare global {
          * The minimum allowed value for the input.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-min
          */
-        min?: AttrString;
+        min?: AttrStringOrNumber;
 
         /**
          * The minimum number of characters required in the input.
@@ -1171,7 +1175,7 @@ declare global {
          * A short hint to display in the input field before the user enters a value.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-placeholder
          */
-        placeholder?: AttrString;
+        placeholder?: AttrStringOrNumber;
 
         /**
          * Specifies the target element for the popover.
@@ -1213,7 +1217,7 @@ declare global {
          * Specifies the allowed number intervals for the input value.
          * @see https://html.spec.whatwg.org/multipage/input.html#attr-input-step
          */
-        step?: AttrString;
+        step?: AttrStringOrNumber;
 
         /**
          * Controls the data type (and associated control) of the element.
@@ -1775,7 +1779,7 @@ declare global {
          * Controls whether the browser should automatically complete the value for the select.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * Indicates whether the select element should be disabled or not.
@@ -1983,7 +1987,7 @@ declare global {
          * Helps browsers autofill the user's input based on previous entries.
          * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete
          */
-        autocomplete?: AttrOnOff;
+        autocomplete?: AttrAutoComplete;
 
         /**
          * (Safari only). Controls the autocorrect behavior of the <textarea> element.
@@ -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
@@ -3767,33 +3749,60 @@ type AttrBooleanString = AttrMissing | "false" | "true";
 type AttrYesNoString = AttrMissing | "no" | "yes";
 type AttrTriState = AttrBooleanString | "mixed";
 type AttrOnOff = AttrMissing | "on" | "off";
+type AttrAutoComplete =
+  | AttrOnOff
+  | "shipping"
+  | "billing"
+  | "name"
+  | "honorific-prefix"
+  | "given-name"
+  | "additional-name"
+  | "family-name"
+  | "honorific-suffix"
+  | "nickname"
+  | "username"
+  | "new-password"
+  | "current-password"
+  | "one-time-code"
+  | "organization-title"
+  | "organization"
+  | "street-address"
+  | "address-line1"
+  | "address-line2"
+  | "address-line3"
+  | "address-level4"
+  | "address-level3"
+  | "address-level2"
+  | "address-level1"
+  | "country"
+  | "country-name"
+  | "postal-code"
+  | "cc-name"
+  | "cc-given-name"
+  | "cc-additional-name"
+  | "cc-family-name"
+  | "cc-number"
+  | "cc-exp"
+  | "cc-exp-month"
+  | "cc-exp-year"
+  | "cc-csc"
+  | "cc-type"
+  | "transaction-currency"
+  | "transaction-amount"
+  | "language"
+  | "bday"
+  | "bday-day"
+  | "bday-month"
+  | "bday-year"
+  | "sex"
+  | "url"
+  | "photo"
+  | "home"
+  | "work"
+  | "mobile"
+  | "fax"
+  | "pager"
+  | (string & {});
 type Tag<Input> = Input extends Marko.HTMLAttributes<infer Element>
   ? Marko.NativeTag<Input, Element>
   : never;
-type UpperCaseChar =
-  | "A"
-  | "B"
-  | "C"
-  | "D"
-  | "E"
-  | "F"
-  | "G"
-  | "H"
-  | "I"
-  | "J"
-  | "K"
-  | "L"
-  | "M"
-  | "N"
-  | "O"
-  | "P"
-  | "Q"
-  | "R"
-  | "S"
-  | "T"
-  | "U"
-  | "V"
-  | "W"
-  | "X"
-  | "Y"
-  | "Z";