vividus

Vividus is a component library for Svelte for now. The main theme is; components that are vivid, robust, easy to inline and easy to use.

Components have granular reactivity, and most of them have reactivity.

Published Componentes

Abbr

It leverages the use of the abbr element, making it full of life!

Normally, an abbreviation should have a title attribute to provide a tooltip to the user, or, even better, say the whole abbreviated word for the screen-reader user. It should normally look like this:
WHO WHO.

See the underline that informs you that you should hover over the abbreviation to see the full word? Also, it is a bit repetitive to type the letter twice; once in the title, and the other enclosed inside the tag. This is not optimum for me. In 2024 this should be more vivid. How about, you hover over the abbreviation and the full word unravles?

The syntax for it is even less repetitive than the abbr element. Unless, you want to customize everything!

Minimally, you should only need the title attribute, while enclosing the acronym letters inside a pair of square parenthesis [I'll tell you why in a second]:
<Abbr title="[W]orld [H]ealth [O]rganization" /> World Health Organization .

But if you are adventurous, you can customize the transition components, namely; --duration, --delay, and --easing function. Pass them as props, like this:
<Abbr title="[W]orld [H]ealth [O]rganization" --duration="3s" />.

Enclosing the acronym letters inside a pair of square parenthesis is a good [and, necessary] idea, because, you can't simply assume all acronym letters are in the same case. How about, messenger Ribo- Neucleic Acid ? or, acronyms that do not use the first letter like e Xtensible Markup Language ? Or even acronyms that have many consecutive letters from the same word like Calefornia Institute of Technology ?
I guess now you know why.

Planned Componentes

Table

A component that helps you create reactive table elements.

RadialFlickMenu

An advanced select element that allows you to navigate through a radial (circular) list. It should look pretty much like Counter-Strike's in-game action menu, where you select the item by moving your pointer/cursor away from the center of the tap/click [also, the center of the circle].