# 🕸️ @totallyinformation/web-components: v1.3.1 release 2025-06-09

**URL:** https://discourse.nodered.org/t/totallyinformation-web-components-v1-3-1-release-2025-06-09/97514
**Category:** Share Your Projects
**Tags:** uibuilder
**Created:** [9 June 2025 16:17 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-3-1-release-2025-06-09/97514 "2025-06-09T16:17:58Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [9 June 2025 16:17 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-v1-3-1-release-2025-06-09/97514/1 "2025-06-09T16:17:58Z")

</div>

Hi again - a new release of the Totally Information web components package today for your pleasure.

Links: [npm](https://www.npmjs.com/package/@totallyinformation/web-components), [GitHub](https://github.com/TotallyInformation/web-components).

These are not specific to Node-RED or to UIBUILDER and all of the components will work without either. However, some of them do have UIBUILDER enhancements. But you should be able to equally use them with `http-in`/`template`/`http-response` nodes and even with either version of Dashboard.

If you want to use them with UIBUILDER, simply add `@totallyinformation/web-components` via uibuilder's library manager. If you want to use them without installation, they can be used direct from [JSDELIVR](https://www.jsdelivr.com/package/npm/@totallyinformation/web-components).

[Previous release](https://discourse.nodered.org/t/totallyinformation-web-components-v1-2-0-release-2025-06-01/97342)

Main things in this release:

- New `h1-title` component that takes the `<title>` tag from the page and creates an on-page `<h1>` heading with an optional sub-heading.
- Some significant re-organisation to make future development easier.
- Documentation updates for the `data-list` component. Showing how to use nested lists and adding a Node-RED flow demonstrating use with UIBUILDER.

* * *

## v1.3.1

- Fix documentation - no status box for pages with no status front matter.

- Fix test/demo index page - `h1-title` is live.

## v1.3.0

### Test/demo pages

- Re-organised into sub-folders for experiments, alpha, beta and live components.

- New experimental pages.

### **NEW** `h1-title` component

A simple component that uses the page's `<title>` tag as the main heading for the page.

Any slot content is added as a sub-heading with italic, slightly smaller text.

### `data-list` component

- Updated documentation and demo/test page to illustrate how to use the `nested-list` class and `data-depth` attribute to style nested lists.

- Improved warning/error messages - all prefixed with `data-list:` and the instance id.

- Added Node-RED flow example to the documentation to illustrate how to use the `data-list` component with UIBUILDER for Node-RED.

### Default styling

- `uib-brand.css` has beeen updated to version `2025-06-09` in line with UIBUILDER for Node-RED.

### Base component

- **NEW** `hasSlotContent()` method added. This allows you to check if the components `slot` has any content from the light DOM. This is useful for components that may or may not have such content and where you want to apply different styles or behaviour based on that.

### General development

- New script to create new components along with their documentation and test/demo pages. `npm run new-component` or `npm run new-component my-component`.
