diff --git a/packages/hiccup-html/README.md b/packages/hiccup-html/README.md
index 73c8a9a05d..291e5a25c0 100644
--- a/packages/hiccup-html/README.md
+++ b/packages/hiccup-html/README.md
@@ -11,6 +11,7 @@ This project is part of the
- [About](#about)
- [Supported elements](#supported-elements)
+ - [Head / metadata](#head---metadata)
- [Sections](#sections)
- [Text content](#text-content)
- [Lists](#lists)
@@ -32,30 +33,36 @@ This project is part of the
Type-checked HTML5 element functions for [@thi.ng/hiccup](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup) related infrastructure.
-The following type-checked factory functions are provided **so far**.
-See [`defElement()`](#defelement) for more details.
+The following type-checked factory functions are provided **so far** and
+in many cases include specialized type definitions for element-specific
+attributes. See [`defElement()`](#defelement) below for more details.
### Supported elements
+#### Head / metadata
+
+[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/head.ts)
+
+`base`, `head`, `link`, `meta`, `style`, `title`
+
#### Sections
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/sections.ts)
-`address`, `article`, `aside`, `footer`, `header`, `hgroup`, `main`,
-`nav`, `section`
+`address`, `article`, `aside`, `body`, `footer`, `header`, `hgroup`,
+`main`, `nav`, `section`
#### Text content
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/blocks.ts)
-`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`,
-`pre`, `span`
+`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`, `pre`, `span`
#### Lists
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/lists.ts)
-`ol`, `ul`, `li`, `dl`, `dt`, `dd`
+`datalist`, `dd`, `dl`, `dt`, `li`, `ol`, `ul`
#### Inline
@@ -68,8 +75,10 @@ See [`defElement()`](#defelement) for more details.
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/forms.ts)
-`checkbox`, `inputNumber`, `inputPass`, `inputRange`, `inputText`,
-`label`, `meter`, `option`, `optGroup`, `radio`, `select`
+`button`, `checkbox`, `fieldset`, `form`, `inputColor`, `inputFile`,
+`inputNumber`, `inputPass`, `inputRange`, `inputSearch`, `inputText`,
+`label`, `legend`, `meter`, `option`, `optGroup`, `progress`, `radio`,
+`select`
#### Media
@@ -151,7 +160,7 @@ yarn add @thi.ng/hiccup-html
```
-Package sizes (gzipped, pre-treeshake): ESM: 766 bytes / CJS: 1.01 KB / UMD: 1012 bytes
+Package sizes (gzipped, pre-treeshake): ESM: 943 bytes / CJS: 1.23 KB / UMD: 1.19 KB
## Dependencies
diff --git a/packages/hiccup-html/src/api.ts b/packages/hiccup-html/src/api.ts
index facd98c75b..1c46f524db 100644
--- a/packages/hiccup-html/src/api.ts
+++ b/packages/hiccup-html/src/api.ts
@@ -149,3 +149,40 @@ export interface CORSAttribs {
export interface ReferrerAttribs {
referrerpolicy: AttribVal;
}
+
+export interface ImportanceAttribs {
+ importance: AttribVal<"high" | "low" | "auto">;
+}
+
+export type LinkRel =
+ | "alternate"
+ | "author"
+ | "bookmark"
+ | "canonical"
+ | "dns-prefetch"
+ | "external"
+ | "help"
+ | "icon"
+ | "import"
+ | "license"
+ | "manifest"
+ | "modulepreload"
+ | "next"
+ | "nofollow"
+ | "noopener"
+ | "noreferrer"
+ | "opener"
+ | "pingback"
+ | "preconnect"
+ | "prefetch"
+ | "preload"
+ | "prerender"
+ | "prev"
+ | "search"
+ | "shortlink"
+ | "stylesheet"
+ | "tag";
+
+export interface RelAttribs {
+ rel: AttribVal;
+}
diff --git a/packages/hiccup-html/src/forms.ts b/packages/hiccup-html/src/forms.ts
index 825e19bdd2..fb88477cea 100644
--- a/packages/hiccup-html/src/forms.ts
+++ b/packages/hiccup-html/src/forms.ts
@@ -1,15 +1,34 @@
import { NumOrString } from "@thi.ng/api";
-import { Attribs, AttribVal } from "./api";
+import { Attribs, AttribVal, RelAttribs } from "./api";
import { defElement } from "./def";
-export interface InputAttribs extends Attribs {
+export interface FormAttribs extends Attribs, RelAttribs {
+ "accept-charset": AttribVal;
+ action: AttribVal;
+ autocomplete: AttribVal<"on" | "off">;
+ enctype: AttribVal;
+ method: AttribVal;
+ novalidate: AttribVal;
+ target: AttribVal;
+}
+
+export const form = defElement>("form");
+
+export interface FieldsetAttribs extends Attribs {
+ disabled: AttribVal;
+ form: AttribVal;
+ name: AttribVal;
+}
+
+export const fieldset = defElement>("fieldset");
+
+export const legend = defElement("legend");
+
+export interface InputAttribs extends Attribs, FieldsetAttribs {
// https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
autocomplete: AttribVal;
autofocus: AttribVal;
- disabled: AttribVal;
- form: AttribVal;
list: AttribVal;
- name: AttribVal;
readonly: AttribVal;
required: AttribVal;
type: AttribVal;
@@ -21,6 +40,16 @@ export interface InputCheckboxAttribs extends InputAttribs {
indeterminate: AttribVal;
}
+export interface InputRadioAttribs extends InputAttribs {
+ checked: AttribVal;
+}
+
+export interface InputFileAttribs extends InputAttribs {
+ accept: AttribVal;
+ capture: AttribVal<"user" | "environment">;
+ multiple: AttribVal;
+}
+
export interface InputTextAttribs extends InputAttribs {
dirname: AttribVal;
minlength: AttribVal;
@@ -37,6 +66,8 @@ export interface InputNumericAttribs extends InputAttribs {
value: AttribVal;
}
+export const button = defElement>("button");
+
export const checkbox = defElement, never>(
"input",
{
@@ -44,17 +75,25 @@ export const checkbox = defElement, never>(
}
);
-export const radio = defElement, never>("input", {
+export const radio = defElement, never>("input", {
type: "radio",
});
+export const inputColor = defElement, never>("input", {
+ type: "color",
+});
+
+export const inputFile = defElement, never>("input", {
+ type: "file",
+});
+
export const inputPass = defElement, never>("input", {
type: "password",
});
export const inputNumber = defElement, never>(
"input",
- { type: "numeric" }
+ { type: "number" }
);
export const inputRange = defElement, never>(
@@ -62,6 +101,13 @@ export const inputRange = defElement, never>(
{ type: "range" }
);
+export const inputSearch = defElement, never>(
+ "input",
+ {
+ type: "search",
+ }
+);
+
export const inputText = defElement, never>("input", {
type: "text",
});
@@ -91,6 +137,7 @@ export const select = defElement>("select");
export interface LabelAttribs extends Partial {
for: AttribVal;
+ form?: AttribVal;
}
export const label = defElement("label");
@@ -106,3 +153,10 @@ export interface MeterAttribs extends Attribs {
}
export const meter = defElement>("meter");
+
+export interface ProgressAttribs extends Attribs {
+ max: AttribVal;
+ value: AttribVal;
+}
+
+export const progress = defElement>("progress");
diff --git a/packages/hiccup-html/src/head.ts b/packages/hiccup-html/src/head.ts
new file mode 100644
index 0000000000..c98b0ffbab
--- /dev/null
+++ b/packages/hiccup-html/src/head.ts
@@ -0,0 +1,74 @@
+import {
+ Attribs,
+ AttribVal,
+ CORSAttribs,
+ ImportanceAttribs,
+ ReferrerAttribs,
+ RelAttribs,
+} from "./api";
+import { defElement, defElements } from "./def";
+
+export const [head, title] = defElements(["head", "title"]);
+
+export interface BaseAttribs extends Attribs {
+ href: AttribVal;
+ target: AttribVal;
+}
+
+export const base = defElement, never>("base");
+
+export interface MetaAttribs extends Attribs {
+ charset: AttribVal;
+ content: AttribVal;
+ "http-equiv": AttribVal<
+ | "content-language"
+ | "content-security-policy"
+ | "content-type"
+ | "default-style"
+ | "refresh"
+ | "set-cookie"
+ | "x-ua-compatible"
+ >;
+ name: AttribVal;
+}
+
+export const meta = defElement, never>("meta");
+
+export interface LinkAttribs
+ extends Attribs,
+ CORSAttribs,
+ ImportanceAttribs,
+ ReferrerAttribs,
+ RelAttribs {
+ as: AttribVal<
+ | "audio"
+ | "document"
+ | "embed"
+ | "fetch"
+ | "font"
+ | "image"
+ | "object"
+ | "script"
+ | "style"
+ | "track"
+ | "video"
+ | "worker"
+ >;
+ disabled: AttribVal;
+ href: AttribVal;
+ hreflang: AttribVal;
+ integrity: AttribVal;
+ media: AttribVal;
+ sizes: AttribVal;
+ type: AttribVal;
+}
+
+export const link = defElement, never>("link");
+
+export interface StyleAttribs extends Attribs {
+ media: AttribVal;
+ nonce: AttribVal;
+ type: AttribVal;
+}
+
+export const style = defElement, string>("style");
diff --git a/packages/hiccup-html/src/index.ts b/packages/hiccup-html/src/index.ts
index ec99e1b083..99f22151bd 100644
--- a/packages/hiccup-html/src/index.ts
+++ b/packages/hiccup-html/src/index.ts
@@ -3,6 +3,7 @@ export * from "./def";
export * from "./blocks";
export * from "./forms";
+export * from "./head";
export * from "./inline";
export * from "./lists";
export * from "./media";
diff --git a/packages/hiccup-html/src/inline.ts b/packages/hiccup-html/src/inline.ts
index d356b827b6..3b5cbc513c 100644
--- a/packages/hiccup-html/src/inline.ts
+++ b/packages/hiccup-html/src/inline.ts
@@ -1,13 +1,12 @@
-import { Attribs, AttribVal, ReferrerAttribs } from "./api";
+import { Attribs, AttribVal, ReferrerAttribs, RelAttribs } from "./api";
import { defElement, defElements } from "./def";
import { NumOrString } from "@thi.ng/api";
-interface AnchorAttribs extends Attribs, ReferrerAttribs {
+interface AnchorAttribs extends Attribs, ReferrerAttribs, RelAttribs {
download: AttribVal;
href: AttribVal;
hreflang: AttribVal;
- ping: AttribVal; // space
- rel: AttribVal;
+ ping: AttribVal;
target: AttribVal;
type: AttribVal;
}
diff --git a/packages/hiccup-html/src/lists.ts b/packages/hiccup-html/src/lists.ts
index 0ed39fa342..5222eccaed 100644
--- a/packages/hiccup-html/src/lists.ts
+++ b/packages/hiccup-html/src/lists.ts
@@ -15,4 +15,10 @@ export const ol = defElement>("ol");
export const li = defElement>("li");
-export const [ul, dl, dt, dd] = defElements(["ul", "dl", "dt", "dd"]);
+export const [ul, dl, dt, dd, datalist] = defElements([
+ "ul",
+ "dl",
+ "dt",
+ "dd",
+ "datalist",
+]);
diff --git a/packages/hiccup-html/src/media.ts b/packages/hiccup-html/src/media.ts
index 0d6578069a..bc11194a68 100644
--- a/packages/hiccup-html/src/media.ts
+++ b/packages/hiccup-html/src/media.ts
@@ -1,16 +1,25 @@
-import type { Attribs, AttribVal, CORSAttribs, ReferrerAttribs } from "./api";
+import type {
+ Attribs,
+ AttribVal,
+ CORSAttribs,
+ ImportanceAttribs,
+ ReferrerAttribs,
+} from "./api";
import { defElement } from "./def";
-export interface ImageAttribs extends Attribs, CORSAttribs, ReferrerAttribs {
+export interface ImageAttribs
+ extends Attribs,
+ CORSAttribs,
+ ImportanceAttribs,
+ ReferrerAttribs {
alt: AttribVal;
decoding: AttribVal<"sync" | "async" | "auto">;
height: AttribVal;
- importance: AttribVal<"high" | "low" | "auto">;
ismap: AttribVal;
loading: AttribVal<"eager" | "lazy">;
- sizes: AttribVal; // comma
+ sizes: AttribVal;
src: AttribVal;
- srcset: AttribVal; // comma
+ srcset: AttribVal;
usemap: AttribVal;
width: AttribVal;
}
@@ -22,8 +31,8 @@ export const picture = defElement("picture");
export interface SourceAttribs extends Attribs {
media: AttribVal;
src: AttribVal;
- sizes: AttribVal; // comma
- srcset: AttribVal; // comma
+ sizes: AttribVal;
+ srcset: AttribVal;
type: AttribVal;
}
diff --git a/packages/hiccup-html/src/sections.ts b/packages/hiccup-html/src/sections.ts
index 6aafeada65..35b35ff9c4 100644
--- a/packages/hiccup-html/src/sections.ts
+++ b/packages/hiccup-html/src/sections.ts
@@ -1,4 +1,28 @@
import { defElement, defElements } from "./def";
+import { EventAttribs, Attribs } from "./api";
+
+export type BodyEventAttribs = EventAttribs<
+ | "onafterprint"
+ | "onbeforeprint"
+ | "onbeforeunload"
+ | "onerror"
+ | "onhashchange"
+ | "onlanguagechange"
+ | "onload"
+ | "onmessage"
+ | "onoffline"
+ | "ononline"
+ | "onpopstate"
+ | "onredo"
+ | "onstorage"
+ | "onundo"
+ | "onunload",
+ Event
+>;
+
+export interface BodyAttribs extends Attribs, BodyEventAttribs {}
+
+export const body = defElement>("body");
export const [
address,
@@ -11,6 +35,7 @@ export const [
nav,
section,
] = defElements([
+ "address",
"article",
"aside",
"footer",
diff --git a/packages/hiccup-html/tpl.readme.md b/packages/hiccup-html/tpl.readme.md
index 994e5b764a..e17760ec43 100644
--- a/packages/hiccup-html/tpl.readme.md
+++ b/packages/hiccup-html/tpl.readme.md
@@ -13,30 +13,36 @@ This project is part of the
${pkg.description}
-The following type-checked factory functions are provided **so far**.
-See [`defElement()`](#defelement) for more details.
+The following type-checked factory functions are provided **so far** and
+in many cases include specialized type definitions for element-specific
+attributes. See [`defElement()`](#defelement) below for more details.
### Supported elements
+#### Head / metadata
+
+[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/head.ts)
+
+`base`, `head`, `link`, `meta`, `style`, `title`
+
#### Sections
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/sections.ts)
-`address`, `article`, `aside`, `footer`, `header`, `hgroup`, `main`,
-`nav`, `section`
+`address`, `article`, `aside`, `body`, `footer`, `header`, `hgroup`,
+`main`, `nav`, `section`
#### Text content
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/blocks.ts)
-`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`,
-`pre`, `span`
+`blockquote`, `div`, `figure`, `figcaption`, `hr`, `para`, `pre`, `span`
#### Lists
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/lists.ts)
-`ol`, `ul`, `li`, `dl`, `dt`, `dd`
+`datalist`, `dd`, `dl`, `dt`, `li`, `ol`, `ul`
#### Inline
@@ -49,8 +55,10 @@ See [`defElement()`](#defelement) for more details.
[Source](https://github.com/thi-ng/umbrella/tree/develop/packages/hiccup-html/src/forms.ts)
-`checkbox`, `inputNumber`, `inputPass`, `inputRange`, `inputText`,
-`label`, `meter`, `option`, `optGroup`, `radio`, `select`
+`button`, `checkbox`, `fieldset`, `form`, `inputColor`, `inputFile`,
+`inputNumber`, `inputPass`, `inputRange`, `inputSearch`, `inputText`,
+`label`, `legend`, `meter`, `option`, `optGroup`, `progress`, `radio`,
+`select`
#### Media