I totally agree with it: I find composition a killer feature as it keeps the API of the component open.

An image map is a normal image on a website which has different clickable regions which take you to different pages. Image map functionality allowed polygons of an image to be defined as independent hyperlinks.

<!-- References an image map -->
<img src="image.png" usemap="#map1" />

<map id="map1" name="Map 1">
  <!-- An example of a rectangular area over an image -->
  <area shape="rect" coords="10,10,100,100"
        href="/foo"
        alt="Go to the Foo page"/>

  <!-- An example of a circular area over an image -->
  <area shape="circle" coords="50,50,200"
        href="/bar"
        alt="Go to the Bar page"/>

  <!-- An example of an arbitrary polygon over an image -->
  <area shape="poly" coords="10,10,100,10,100,100,10,100"
        href="/baz"
        alt="Go to the Baz page"/>

  <!-- Fallback if no other area matches -->
  <area shape="default"
        href="/default"
        alt="Go to the Default page"/>
</map>

This guide provides guideline for animations. Here are the following rules:

• 200-500ms is the optimal speed for interface animation
  • on mobile device, the duration of animation should be limited to 200-300ms.
  • on tablets, it should be longer by 3ß% as the screen is bigger so objects overcome the longer path when they change position.
  • on wearables, the duration should be accordingly 30% shorter
• the duration of web transitions should last about 2 times shorter than on mobile devices — between 150–200 ms
• the more bigger the element is, a bot better when it lasts a little longer.
• When objects collide, the energy of collision must be evenly distributed between them according to physical laws. Avoid the bounce effect.
• The movement of the objects should be clear and sharp. Avoid motion blur.
• List items (news cards, article list items) should have a very short delay between its appearance: 20-25 ms.

Easing makes the movement more natural: the object should move with some acceleration or deceleration — just like all live objects in the physical world. There are 3 categories:

• linear motion: it looks very unnatural and artificial to the human eye.
• ease-in (acceleration curve): should be used when the objects fly out of the screen at full speed and won't be displayed again.
• ease-out (deceleration curve): should be used when the element emerges on the screen. his can also be applied to different cards or objects that appear from the outside of the screen.
  • ease-in-out (standard curve): is the most frequently used in interface animation. In doubt, use this animation. Ease-in-out is used when the objects move from one part of the screen to another. The same movement type should be used when the element disappears from the screen but the user can return it to the previous place at any time.

Equal interaction: the appearance of all objects obeys to one particular rule

• A vertical list should be guided in one fluid direction
• Grid should have a diagonal appearance
• subordinate interactions (one central object which attracts all user's attention): animate as minimum objects as possible at one time.
• when the moving objects transform their size disproportionally, they should move along the arc rather than in a straight line.
• if the paths of the moving objects intersect one another, they cannot move through each other. In another case, the moving object can rise above other objects.

If you are logged in or not, use the /home to display the landing page or the default page of a website.

Also, the logo should have the alt="home" as this is what the users of screen readers expect. See the second point of https://jessbudd.com/blog/screen-reader-usability-testing-observations

Mdash is a new kind of UI library. It's 100% standards-based and it's tiny.

Mdash components are comprised of standard HTML, custom HTML, and Custom Elements. As such, Mdash works with any framework (or no framework) and works with all types of web projects: SSR, SPA, PWA, static site, and even popular email clients.

Only 6.8kB. It uses a minimal appearance but adds components that are used everywhere such as switch buttons-

100 buttons that feature styles and hover effects you may not have seen elsewhere.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline

From the https://design.wonderflow.ai/, here are the Stories of each component.

Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes.

Manual-writing styled forms with a CSS only file.

The font Short Stack should also be used. It is available as NPM package.

A react-style library (but only 4 kB!). It is so small and uses JSX.

A component created with Atomico can be used in Html, Vue, Preact, React, Svelte, Solid or any other library.

This seems relevant for small projects or one that needs little interaction without using bare JS. The Lit library needs for example a lot of boilerplates. Here we need a function.

It uses WebGL for it.

Unstyled, accessible components for building high‑quality design systems and web apps in React.

We need this in other frameworks!

Using finite-state machines seems to be a good idea!

A collection of framework-agnostic UI components patterns like an accordion, menu, and dialog that can be used to build design systems for React, Vue, and Solid.js

A collection of UI components made with HTML and CSS

It is possible to display high, medium and low screen sizes by popularity

Another collection of CSS loaders and spinners

Another list of CSS spinners

Customizable CSS loaders and spinners