diff --git a/apps/starlight/src/assets/sidebar.ts b/apps/starlight/src/assets/sidebar.ts
index b90eec6..7277ec5 100644
--- a/apps/starlight/src/assets/sidebar.ts
+++ b/apps/starlight/src/assets/sidebar.ts
@@ -30,6 +30,10 @@ export const sidebar: StarlightUserConfigWithPlugins['sidebar'] = [
label: 'Styles and Themes',
slug: 'browser-utils/styles-and-themes',
},
+ {
+ label: 'Types',
+ autogenerate: { directory: 'browser-utils/types' },
+ },
{
label: 'Services',
autogenerate: { directory: 'browser-utils/services' },
diff --git a/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx b/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx
index 0301171..e4b1bfb 100644
--- a/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx
+++ b/apps/starlight/src/content/docs/browser-utils/styles-and-themes.mdx
@@ -3,8 +3,6 @@ title: 'Styles and Themes'
description: '@spuxx/browser-utils provides a set of CSS styles and themes primarily intended for my personal use.'
---
-import TypeDoc from '@docs/browser-utils/types/styles.md';
-
The package provides a set of CSS styles and themes primarily intended for my personal use. You are free to use it in your own projects, but I will not be accepting pull requests or issues requesting changes to this part of the library.
## Styles
@@ -136,7 +134,4 @@ To do this, you can use the `spx-theme` attribute on the element itself.
## Variables and Types
-The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner.
-They are primarily intended for use with [SolidJS](https://www.solidjs.com/) and my [@spuxx/solid](https://spuxx-dev.github.io/jslibs/browser-utils) library.
-
-
+The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner. You can find them [here](types/styles).
diff --git a/apps/starlight/src/content/docs/browser-utils/types/html.mdx b/apps/starlight/src/content/docs/browser-utils/types/html.mdx
new file mode 100644
index 0000000..d775480
--- /dev/null
+++ b/apps/starlight/src/content/docs/browser-utils/types/html.mdx
@@ -0,0 +1,10 @@
+---
+title: 'HTML Types'
+description: 'A selection of HTML-related utility types for use in browser applications.'
+---
+
+import TypeDoc from '@docs/browser-utils/types/html.md';
+
+The package includes a collection of useful TypeScript types that can help with HTML-related use-cases in browser applications.
+
+
diff --git a/apps/starlight/src/content/docs/browser-utils/types/styles.mdx b/apps/starlight/src/content/docs/browser-utils/types/styles.mdx
new file mode 100644
index 0000000..d266a5d
--- /dev/null
+++ b/apps/starlight/src/content/docs/browser-utils/types/styles.mdx
@@ -0,0 +1,11 @@
+---
+title: 'Style-related Types'
+description: 'A selection of style-related utility types for use in browser applications.'
+---
+
+import TypeDoc from '@docs/browser-utils/types/styles.md';
+
+The library also provides a set of variables and types for use with TypeScript. They can help you use the styles correctly and in a type-safe manner.
+They are primarily intended for use with [SolidJS](https://www.solidjs.com/) and my [@spuxx/solid](https://spuxx-dev.github.io/jslibs/browser-utils) library.
+
+
diff --git a/packages/browser-utils/src/main.ts b/packages/browser-utils/src/main.ts
index d2234f5..10766d6 100644
--- a/packages/browser-utils/src/main.ts
+++ b/packages/browser-utils/src/main.ts
@@ -6,3 +6,4 @@ export * from './services/config';
export * from './services/local-storage';
export * from './services/user-agent';
export * from './types/styles';
+export * from './types/html';
diff --git a/packages/browser-utils/src/types/html/index.ts b/packages/browser-utils/src/types/html/index.ts
new file mode 100644
index 0000000..6217814
--- /dev/null
+++ b/packages/browser-utils/src/types/html/index.ts
@@ -0,0 +1,42 @@
+/**
+ * Valid input types according to the HTML specification.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
+ */
+export const InputType = {
+ button: 'button',
+ checkbox: 'checkbox',
+ color: 'color',
+ date: 'date',
+ datetimeLocal: 'datetime-local',
+ email: 'email',
+ file: 'file',
+ hidden: 'hidden',
+ image: 'image',
+ month: 'month',
+ number: 'number',
+ password: 'password',
+ radio: 'radio',
+ range: 'range',
+ reset: 'reset',
+ search: 'search',
+ submit: 'submit',
+ tel: 'tel',
+ text: 'text',
+ time: 'time',
+ url: 'url',
+ week: 'week',
+} as const;
+/**
+ * Valid input types according to the HTML specification.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types}
+ */
+export type InputType = (typeof InputType)[keyof typeof InputType];
+
+/**
+ * Represents an `option` element's data. May be used for `select`, `datalist` and similar
+ * elements.
+ */
+export interface SelectOption {
+ value: string;
+ label: string;
+}