first

.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.env.example

@@ -0,0 +1,12 @@
+# This is the api prefix used in the useFetch composable function.
+# The default value point to the json-server, which is started in the same time as 
+# the dev server is started (see package.json "dev" script)
+# @see /src/composable/useFetch.ts
+# @see /json-server/db.json
+# @see /json-server/config.json
+VITE_API_BASE_URL=http://localhost:8080
+
+# This is the mapbox api used for the map applications
+# @see /src/pages/sidebar/maps-1.vue
+# @see /src/pages/sidebar/maps-2.vue
+VITE_MAPBOX_ACCESS_TOKEN=pk.eyJ1IjoiY3NzbmluamEiLCJhIjoiY2toZW1nYm0zMDAxODJycXFzZ3g4cnZ6diJ9.9ebfrGREuwkauRr_afDTgA

.eslintignore

@@ -0,0 +1,16 @@
+# Ignore artifacts:
+build
+bulma-generated
+dist
+coverage
+node_modules
+public
+README.md
+
+# generated files
+CHANGELOG.md
+bulma-colors.js
+types/components.d.ts
+types/router.d.ts
+types/imports.d.ts
+components-meta.ts

.eslintrc.cjs

@@ -0,0 +1,202 @@
+const stylistic = require('@stylistic/eslint-plugin')
+
+const customized = stylistic.configs.customize({
+  indent: 2,
+  quotes: 'single',
+  semi: false,
+})
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['*.md'],
+      parser: 'markdown-eslint-parser',
+      extends: ['plugin:md/recommended'],
+      rules: {},
+    },
+    {
+      files: ['*.cjs'],
+      plugins: ['sonarjs', '@stylistic'],
+      extends: [
+        'eslint:recommended',
+        'plugin:sonarjs/recommended',
+      ],
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'script',
+      },
+      rules: {
+        ...customized.rules,
+        'no-console': 'off',
+        'no-debugger': 'off',
+        'no-unused-vars': 'off',
+        'no-undef': 'off', // auto-imports are not recognized
+
+        'sonarjs/no-duplicate-string': 'off',
+      },
+    },
+    {
+      files: ['*.js', '*.mjs'],
+      plugins: ['sonarjs', '@stylistic'],
+      extends: [
+        'eslint:recommended',
+        'plugin:sonarjs/recommended',
+      ],
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+      },
+      rules: {
+        ...customized.rules,
+        'no-console': 'off',
+        'no-debugger': 'off',
+        'no-unused-vars': 'off',
+        'no-undef': 'off', // auto-imports are not recognized
+
+        'sonarjs/no-duplicate-string': 'off',
+      },
+    },
+    {
+      files: ['*.ts'],
+      plugins: ['sonarjs', '@typescript-eslint', '@stylistic'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:sonarjs/recommended',
+      ],
+      parserOptions: {
+        ecmaVersion: 'latest',
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        ...customized.rules,
+        'no-console': 'off',
+        'no-debugger': 'off',
+        'no-unused-vars': 'off',
+        'no-undef': 'off', // auto-imports are not recognized
+
+        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+        ],
+        '@typescript-eslint/no-explicit-any': 'off',
+
+        'sonarjs/no-duplicate-string': 'off',
+        'sonarjs/cognitive-complexity': 'off',
+      },
+    },
+    {
+      files: ['*.vue'],
+      plugins: ['sonarjs', '@typescript-eslint', '@stylistic'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:sonarjs/recommended',
+        'plugin:vue/vue3-recommended',
+        'plugin:vuejs-accessibility/recommended',
+      ],
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        ...customized.rules,
+        'no-console': 'off',
+        'no-debugger': 'off',
+        'no-unused-vars': 'off',
+        'no-undef': 'off', // auto-imports are not recognized
+
+        '@typescript-eslint/no-unused-vars': ['error'],
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+        ],
+
+        'vue/script-setup-uses-vars': 'error',
+        'vue/multi-word-component-names': 'off',
+        'vue/max-attributes-per-line': [
+          'error',
+          {
+            singleline: {
+              max: 2,
+            },
+            multiline: {
+              max: 1,
+            },
+          },
+        ],
+        // vue 3.3 allows setup props destructuring
+        'vue/no-setup-props-destructure': 'off',
+        // vue 3.4 allow v-bind shorthand
+        'vue/valid-v-bind': 'off',
+
+        'vuejs-accessibility/form-control-has-label': 'off',
+        'vuejs-accessibility/label-has-for': 'off',
+        'vuejs-accessibility/anchor-has-content': 'off',
+
+        'sonarjs/no-duplicate-string': 'off',
+        'sonarjs/cognitive-complexity': 'off',
+      },
+    },
+    {
+      files: ['*.md.vue'],
+      plugins: ['@typescript-eslint', '@stylistic'],
+      extends: [
+        'eslint:recommended',
+        'plugin:@typescript-eslint/eslint-recommended',
+        'plugin:vue/vue3-recommended',
+      ],
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+        sourceType: 'module',
+        tsconfigRootDir: __dirname,
+      },
+      rules: {
+        ...customized.rules,
+        'no-console': 'off',
+        'no-debugger': 'off',
+        'no-unused-vars': 'off',
+        'no-undef': 'off', // auto-imports are not recognized
+
+        '@typescript-eslint/no-unused-vars': ['off'],
+        '@typescript-eslint/consistent-type-imports': [
+          'error',
+          { prefer: 'type-imports', fixStyle: 'inline-type-imports' },
+        ],
+
+        'vue/script-setup-uses-vars': 'error',
+        'vue/multi-word-component-names': 'off',
+        'vue/max-attributes-per-line': [
+          'error',
+          {
+            singleline: {
+              max: 2,
+            },
+            multiline: {
+              max: 1,
+            },
+          },
+        ],
+        // vue 3.3 allows setup props destructuring
+        'vue/no-setup-props-destructure': 'off',
+        // vue 3.4 allow v-bind shorthand
+        'vue/valid-v-bind': 'off',
+
+        'vuejs-accessibility/form-control-has-label': 'off',
+        'vuejs-accessibility/label-has-for': 'off',
+        'vuejs-accessibility/anchor-has-content': 'off',
+
+        'sonarjs/no-duplicate-string': 'off',
+      },
+    },
+  ],
+}

.stylelintignore

@@ -0,0 +1,10 @@
+# Ignore artifacts:
+build
+dist
+coverage
+node_modules
+public
+
+*.md
+generated-vars.sass
+generated-fallback.css

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "lokalise.i18n-ally",
+    "dbaeumer.vscode-eslint",
+    "syler.sass-indented",
+    "stylelint.vscode-stylelint",
+    "antfu.goto-alias",
+    "antfu.iconify"
+  ]
+}

.vscode/launch.json

@@ -0,0 +1,19 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Vuero app (SPA)",
+      "type": "chrome",
+      "request": "launch",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}",
+      "skipFiles": [
+        "<node_internals>/**",
+        "${workspaceRoot}/node_modules/**"
+      ]
+    },
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "eslint.enable": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "json",
+    "markdown",
+    "typescript",
+    "vue"
+  ],
+  "i18n-ally.localesPaths": "src/locales",
+  "i18n-ally.enabledParsers": ["yaml", "json", "json5"],
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keystyle": "nested",
+  "files.associations": {
+    "*.json": "jsonc"
+  },
+  "typescript.preferences.autoImportFileExcludePatterns": ["vue-router$"],
+  "vue.codeActions.enabled": false
+}

Dockerfile

@@ -0,0 +1,34 @@
+FROM bitnami/node:20 AS build
+WORKDIR /app
+
+ARG VITE_API_BASE_URL=""
+ARG VITE_MAPBOX_ACCESS_TOKEN=""
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+COPY package.json ./
+RUN pnpm install --no-lockfile
+
+COPY . .
+RUN VITE_API_BASE_URL=$VITE_API_BASE_URL \
+  VITE_MAPBOX_ACCESS_TOKEN=$VITE_MAPBOX_ACCESS_TOKEN \
+  NODE_OPTIONS=--max-old-space-size=6144 \
+  pnpm ssr:build
+
+FROM bitnami/node:20 AS prod
+WORKDIR /app
+
+RUN corepack enable && corepack prepare pnpm@latest --activate
+
+COPY package.json ./
+RUN pnpm install --no-lockfile --prod
+
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/json-server ./json-server
+COPY --from=build /app/server ./server
+
+EXPOSE 3000 8080
+
+ENV NODE_ENV=production
+
+CMD ["pnpm", "ssr:start"]

LICENSE.md

@@ -0,0 +1,306 @@
+# Envato License
+
+> If you buy a theme for personal use or a client and the site is
+> not duplicated and does not sell, the **regular license is enough**.
+
+> If you buy a theme for personal or client use and the site sells products
+> or services, you are obliged to buy the **extended license**.
+
+## Envato Regular License ([view online](https://themeforest.net/licenses/terms/regular))
+
+1.  The Regular License grants you, the purchaser, an ongoing, non-exclusive,
+    worldwide license to make use of the digital work (Item) you have selected.
+    Read the rest of this license for the details that apply to your
+    use of the Item, as well as the [FAQs](https://themeforest.net/licenses/faq)
+    (which form part of this license).
+
+1.  You are licensed to use the Item to create one single End Product for
+    yourself or for one client (a “single application”), and the
+    End Product can be distributed for Free.
+
+1.  An End Product is one of the following things,
+    both requiring an application of skill and effort.
+
+    1.  For an Item that is a template, the End Product is a customised
+        implementation of the Item.
+
+        > For example: the item is a website
+        > theme and the end product is the final website customised
+        > with your content.
+
+    1.  For other types of Item, an End Product is a work that incorporates the
+        Item as well as other things, so that it is larger in scope and
+        different in nature than the Item.
+
+        > For example: the item is a button graphic
+        > and the end product is a website.
+        > See the [FAQs](https://themeforest.net/licenses/faq) for examples
+        > and information about End Products and the single application
+        > requirement.
+
+1.  You can create one End Product for a client, and you can transfer that
+    single End Product to your client for any fee. This license is then
+    transferred to your client.
+
+1.  You can make any number of copies of the single End Product,
+    as long as the End Product is distributed for Free.
+
+1.  You can modify or manipulate the Item. You can combine the Item with other
+    works and make a derivative work from it. The resulting works are subject
+    to the terms of this license. You can do these things as long as the
+    End Product you then create is one that’s permitted under clause 3.
+
+    > For example: You can license a flyer template, include your own photos,
+    > modify the layout and get it printed to promote your event.
+
+1.  You can’t Sell the End Product, except to one client.
+    (If you or your client want to Sell the End Product,
+    you will need the Extended License.)
+
+1.  You can’t re-distribute the Item as stock, in a tool or template,
+    or with source files. You can’t do this with an Item either on
+    its own or bundled with other items, and even if you modify the Item.
+    You can’t re-distribute or make available the Item as-is or
+    with superficial modifications.
+
+    These things are not allowed even if the re-distribution is for Free.
+
+    > If you’re an Envato author you can use other items in your item’s preview
+    > without a license, under conditions. See the [author licensing FAQs](https://themeforest.net/licenses/faq#faq-section-author).
+
+    > For example: You can’t purchase an HTML template, convert it to a
+    > WordPress theme and sell or give it to more than one client.
+    > You can’t license an item and then make it available as-is on your
+    > website for your users to download.
+
+1.  You can’t use the Item in any application allowing an end user to
+    customise a digital or physical product to their specific needs,
+    such as an “on demand”, “made to order” or “build it yourself” application.
+    You can use the Item in this way only if you purchase a
+    separate license for each final product incorporating the
+    Item that is created using the application.
+
+    > Examples of “on demand”, “made to order” or “build it yourself”
+    > applications: website builders, “create your own” slideshow apps,
+    > and e-card generators. You will need one license for each
+    > product created by a customer, or contact us at [Help Center](http://help.market.envato.com/hc/en-us)
+    > to discuss.
+
+1.  Although you can modify the Item and therefore delete unwanted
+    components before creating your single End Product,
+    you can’t extract and use a single component of an Item on a
+    stand-alone basis.
+
+    > For example: You license a website theme containing icons.
+    > You can delete unwanted icons from the theme.
+    > But you can't extract an icon to use outside of the theme.
+
+1.  You must not permit an end user of the End Product to extract the
+    Item and use it separately from the End Product.
+
+1.  You can’t use an Item in a logo, trademark, or service mark.  
+    Looking for a logo? See our [GraphicRiver logos section](http://graphicriver.net/category/logo-templates?_ga=2.247802052.294898880.1626368611-277376300.1618173274),
+    which has its own license.
+
+1.  For some Items, a component of the Item will be sourced by the author
+    from elsewhere and different license terms may apply to the component,
+    such as someone else’s license or an open source or
+    creative commons license. If so, the component will be identified by
+    the author in the Item’s description page or in the Item’s
+    downloaded files. The other license will apply to that component
+    instead of this license. This license will apply to the rest of the Item.
+
+    > For example: A theme might contain images licensed under a
+    > Creative Commons CCBY license. The CCBY license applies to those
+    > specific images. This license applies to the rest of the theme.
+
+1.  For some items, a GNU General Public License (GPL) or
+    another open source license applies. The open source license
+    applies in the following ways:
+
+    1.  Some Items, even if entirely created by the author, may be
+        partially subject to the open source license: a ‘split license’ applies.
+        This means that the open source license applies to an extent that’s
+        determined by the open source license terms and the nature of the
+        Item, and this license applies to the rest of the Item.  
+        Split and other open source licensing is relevant for themes and
+        plug-ins for WordPress and other open source platforms.
+        Where split licensing applies, this is noted in the Item’s
+        download files: for more information, see this Help Center article
+
+    1.  For some Items, the author may have chosen to apply a GPL license
+        to the entire Item. This means that the relevant GPL license will apply
+        to the entire Item instead of this license. Where an Item is
+        entirely under a GPL license, it will be identified as a GPL item and
+        the license noted in the download files:
+        for more information see the [FAQs](https://themeforest.net/licenses/faq)
+
+1.  You can only use the Item for lawful purposes. Also,
+    if an Item contains an image of a person, even if the Item is model-released
+    you can’t use it in a way that creates a fake identity, implies personal
+    endorsement of a product by the person, or in a way that is defamatory,
+    obscene or demeaning, or in connection with sensitive subjects.
+
+    > For more information on sensitive subjects, see our [FAQs](https://themeforest.net/licenses/faq).
+
+1.  Items that contain digital versions of real products,
+    trademarks or other intellectual property owned by others have not been
+    property released. These Items are licensed on the basis of
+    editorial use only. It is your responsibility to consider whether your use
+    of these Items requires a clearance and if so, to obtain that clearance from
+    the intellectual property rights owner.
+
+1.  This license applies in conjunction with the [Envato Market Terms](https://themeforest.net/legal/market)
+    for your use of Envato Market. If there is an inconsistency between
+    this license and the Envato Market Terms, this license will apply
+    to the extent necessary to resolve the inconsistency.
+
+1.  This license can be terminated if you breach it. If that happens,
+    you must stop making copies of or distributing the End Product until
+    you remove the Item from it.
+
+1.  The author of the Item retains ownership of the Item but grants
+    you the license on these terms. This license is between the author
+    of the Item and you. Envato Pty Ltd is not a party to this license
+    or the one giving you the license.
+
+## Envato Extended License ([view online](https://themeforest.net/licenses/terms/extended))
+
+1.  The Extended License grants you, the purchaser, an ongoing,
+    non-exclusive, worldwide license to make use of the digital
+    work (Item) you have selected. Read the rest of this license for the
+    details that apply to your use of the Item, as well as the [FAQs](https://themeforest.net/licenses/faq)
+    (which form part of this license).
+
+1.  You are licensed to use the Item to create one single End Product for
+    yourself or for one client (a “single application”),
+    and the End Product may be Sold.
+
+1.  An End Product is one of the following things, both requiring an
+    application of skill and effort.
+
+    1.  For an Item that is a template, the End Product is a
+        customised implementation of the Item.
+
+        > For example, the item is a magazine template and the end product
+        > is the finished magazine.
+
+    1.  For other types of Item, an End Product is something that
+        incorporates the Item as well as other things, so that it is
+        larger in scope and different in nature than the Item.
+
+        > For example, the item is a set of icons and the end product is
+        > a mobile app for sale. See the [FAQs](https://themeforest.net/licenses/faq)
+        > for examples and information about End Products and
+        > the single application requirement.
+
+1.  You can create the End Product for a client, and this license is
+    then transferred from you to your client.
+
+1.  You can Sell and make any number of copies of the single End Product.
+
+1.  You can modify or manipulate the Item. You can combine the Item with
+    other works and make a derivative work from it. The resulting works are
+    subject to the terms of this license. You can do these things as
+    long as the End Product you then create is one that’s
+    permitted under clause 3.
+
+    > For example: you can license a vector, manipulate it and add your
+    > own elements to create an illustration that’s used as a book cover.
+
+1.  This license is a “single application” license and not a
+    “multi-use” license, which means that you can’t use the Item to
+    create more than one unique End Product.
+
+1.  You can’t re-distribute the Item as stock, in a tool or template,
+    or with source files. You can’t do this with an Item either on its
+    own or bundled with other items, and even if you modify the Item.
+    You can’t re-distribute or make available the Item as-is or
+    with superficial modifications.
+
+    > For example: You can't license a number of vector files, and
+    > redistribute/resell them as a clip-art pack.
+
+    > If you’re an Envato author you can use other items in your item’s
+    > preview without a license, under conditions.
+    > See the [author licensing FAQs](https://themeforest.net/licenses/faq#faq-section-author).
+
+1.  You can’t use the Item in any application allowing an end user to
+    customise a digital or physical product to their specific needs,
+    such as an “on demand”, “made to order” or “build it yourself” application.
+    You can use the Item in this way only if you purchase a separate
+    license for each final product incorporating the Item that is created
+    using the application.
+
+    > Examples of “on demand”, “made to order” or “build it yourself”
+    > applications: website builders, “create your own” slideshow apps,
+    > and e-card generators. You will need one license for each product
+    > created by a customer, or contact us at [Help Center](http://help.market.envato.com/hc/en-ushttp://help.market.envato.com/hc/en-us)
+    > to discuss.
+
+1.  Although you can modify the Item and therefore delete components
+    before creating your single End Product, you can’t extract and
+    use a single component of an Item on a stand-alone basis.
+
+    > For example: You license a game starter kit.
+    > You can delete unwanted 3D models from the file.
+    > But you can’t extract and use a 3D model outside of the game starter kit.
+
+1.  You must not permit an end user of the End Product to extract the
+    Item and use it separately from the End Product.
+
+1.  You can’t use an Item in a logo, trademark, or service mark.
+
+    > Looking for a logo? See our [GraphicRiver logos](http://graphicriver.net/category/logo-templates?_ga=2.211654485.131496368.1626370327-277376300.1618173274) section,
+    > which has its own license.
+
+1.  For some Items, a component of the Item will be sourced by the
+    author from elsewhere and different license terms may apply to
+    the component, such as someone else’s license or an open source or
+    creative commons license. If so, the component will be identified by
+    the author in the Item’s description page or in the Item’s
+    downloaded files. The other license will apply to that component instead
+    of this license. This license will apply to the rest of the Item.
+
+1.  Some Items are partially subject to a GNU General Public License (GPL)
+    or another open source license even if the Item was entirely created by
+    the author. For these Items, a ‘split license’ applies. This means that
+    the open source license applies to an extent that’s determined by the
+    open source license terms and the nature of the Item, and this
+    license applies to the rest of the Item.
+
+    > For more information, see [this Help Center article](http://support.envato.com/index.php?/Knowledgebase/Article/View/428).
+    > This is most common for themes for WordPress and other
+    > open source platforms. Where split licensing applies,
+    > this is noted in the Item’s download files.
+
+1.  You can only use the Item for lawful purposes. Also,
+    if an Item contains an image of a person, even if the Item is
+    model-released you can’t use it in a way that creates a fake identity,
+    implies personal endorsement of a product by the person, or in a way that
+    is defamatory, obscene or demeaning, or in connection with
+    sensitive subjects.
+
+    > For more information on sensitive subjects, see our [FAQs](https://themeforest.net/licenses/faq).
+
+1.  Items that contain digital versions of real products,
+    trademarks or other intellectual property owned by others have not
+    been property released. These Items are licensed on the basis of
+    editorial use only. It is your responsibility to consider whether
+    your use of these Items requires a clearance and if so,
+    to obtain that clearance from the intellectual property rights owner.
+
+1.  This license applies in conjunction with the Envato Market Terms
+    for your use of the Envato Market sites. If there is an inconsistency
+    between this license and the [Envato Market Terms](https://themeforest.net/legal/market),
+    this license will apply to the extent necessary to
+    resolve the inconsistency.
+
+1.  This license can be terminated if you breach it.
+    If that happens, you must stop making copies of or distributing
+    the End Product until you remove the Item from it.
+
+1.  The author of the Item retains ownership of the Item but grants you
+    the license on these terms. This license is between the author of the
+    Item and you. Envato Pty Ltd is not a party to this license or the
+    one giving you the license.

README.md

@@ -0,0 +1,93 @@
+# oa
+
+
+
+## Getting started
+
+To make it easy for you to get started with GitLab, here's a list of recommended next steps.
+
+Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
+
+## Add your files
+
+- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
+- [ ] [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
+
+```
+cd existing_repo
+git remote add origin https://git.hmsn.ink/kospo/svcm/oa.git
+git branch -M main
+git push -uf origin main
+```
+
+## Integrate with your tools
+
+- [ ] [Set up project integrations](http://git.hmsn.ink/kospo/svcm/oa/-/settings/integrations)
+
+## Collaborate with your team
+
+- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
+- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
+- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
+- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
+- [ ] [Set auto-merge](https://docs.gitlab.com/user/project/merge_requests/auto_merge/)
+
+## Test and Deploy
+
+Use the built-in continuous integration in GitLab.
+
+- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/)
+- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
+- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
+- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
+- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
+
+***
+
+# Editing this README
+
+When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
+
+## Suggestions for a good README
+
+Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
+
+## Name
+Choose a self-explaining name for your project.
+
+## Description
+Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
+
+## Badges
+On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
+
+## Visuals
+Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
+
+## Installation
+Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
+
+## Usage
+Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
+
+## Support
+Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
+
+## Roadmap
+If you have ideas for releases in the future, it is a good idea to list them in the README.
+
+## Contributing
+State if you are open to contributions and what your requirements are for accepting them.
+
+For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
+
+You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
+
+## Authors and acknowledgment
+Show your appreciation to those who have contributed to the project.
+
+## License
+For open source projects, say how it is licensed.
+
+## Project status
+If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.

bulma-css-vars.config.cjs

@@ -0,0 +1,17 @@
+module.exports = {
+  sassEntryFile: 'src/scss/main.scss',
+  jsOutputFile: 'src/scss/bulma-generated/bulma-colors.ts',
+  sassOutputFile: 'src/scss/bulma-generated/generated-vars.sass',
+  cssFallbackOutputFile: 'src/scss/bulma-generated/generated-fallback.css',
+  colorDefs: {
+    white: '#FFF',
+    primary: '#FFF',
+    dark: '#FFF',
+    link: '#FFF',
+    info: '#FFF',
+    success: '#FFF',
+    warning: '#FFF',
+    danger: '#FFF',
+  },
+  transition: null,
+}

documentation/accordion-image/accordion-image-documentation.md

@@ -0,0 +1,54 @@
+### Image accordion
+
+A nice experimental and playful CSS only image
+accordion component: `<VAccordionImage />`.
+Images simply stack on mobile.
+Pass an **Array** to the `items` props to render the accordion.
+Check markup for more details about usage.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const data = [
+  {
+    image: 'https://source.unsplash.com/FV3GConVSss/1600x900',
+    title: 'Office Part I',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  {
+    image: 'https://source.unsplash.com/rRiAzFkJPMo/1600x900',
+    title: 'Office Part II',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  {
+    image: 'https://source.unsplash.com/tvleqH3p1os/1600x900',
+    title: '12 Great Landscapes',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  {
+    image: 'https://source.unsplash.com/-Xv7k95vOFA/1600x900',
+    title: 'Team Meetup',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  {
+    image: 'https://source.unsplash.com/F6NvgzU3RfM/1600x900',
+    title: 'Purple Shades',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  {
+    image: 'https://source.unsplash.com/5E5N49RWtbA/1600x900',
+    title: 'Blue Note',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+]
+</script>
+
+<template>
+  <div class="column is-12">
+    <VAccordionImage :items="accordionImagesData" />
+  </div>
+</template>
+```
+
+<!--/code-->

documentation/accordion/accordion-default-documentation.md

@@ -0,0 +1,40 @@
+### VAccordion
+
+Vuero provides 2 accordion components with enough styling to be able to use
+them out of the box: `<VAccordion />` and `<VCollapse />`.
+In the simple accordion, each item can be openened separately, whereas in the
+exclusive accordion, only one item can be expanded at a time.
+Pass an **Array** to the `items` props to render the accordion.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const data = [
+  {
+    title: 'Accordion Item 1',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+  {
+    title: 'Accordion Item 2',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+  {
+    title: 'Accordion Item 3',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+]
+</script>
+
+<template>
+  <div class="column is-6">
+    <VAccordion :items="data" />
+  </div>
+
+  <div class="column is-6">
+    <VAccordion :items="data" exclusive />
+  </div>
+</template>
+```
+
+<!--/code-->

documentation/action/v-action-documentation.md

@@ -0,0 +1,37 @@
+### VAction
+
+Vuero provides a versatile small button component named
+`<VAction />` components can have different colors.
+VActions can be `rounded`, `hoverable` or `grey` using the related props.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VAction> Action </VAction>
+    <VAction rounded>
+      Action
+    </VAction>
+    <VAction hoverable>
+      Action
+    </VAction>
+    <VAction grey>
+      Action
+    </VAction>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VAction> Action </VAction>
+  <VAction rounded> Action </VAction>
+  <VAction hoverable> Action </VAction>
+  <VAction grey> Action </VAction>
+</VButtons>
+
+<!--/example-->

documentation/animated-checkbox/animated-checkbox-documentation.md

@@ -0,0 +1,145 @@
+---
+state:
+  options:
+    - 'Option 2'
+    - 'Option 7'
+---
+
+### VAnimatedCheckbox
+
+Vuero provides nicely styled switch segment when you need to
+display such control in your forms. Vuero `VAnimatedCheckbox` component have
+several color modififers. Available modifiers are `primary`, `success`,
+`info`, `warning` and `danger`.
+Please refer to the markup for more details about usage.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const options = ref(['Option 2', 'Option 7'])
+</script>
+
+<template>
+  <VField grouped>
+    <VFlex column-gap="1rem">
+      <VControl>
+        <VAnimatedCheckbox v-model="options" value="Option 1" />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 2"
+          color="primary"
+          checked
+        />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 3"
+          color="success"
+          checked
+        />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 4"
+          color="info"
+          checked
+        />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 5"
+          color="warning"
+          checked
+        />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 6"
+          color="danger"
+          checked
+        />
+      </VControl>
+      <VControl>
+        <VAnimatedCheckbox
+          v-model="options"
+          value="Option 7"
+          color="purple"
+          checked
+        />
+      </VControl>
+    </VFlex>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped horizontal>
+  <VFlex column-gap="1rem">
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 1"
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 2"
+        color="primary"
+        checked
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 3"
+        color="success"
+        checked
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 4"
+        color="info"
+        checked
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 5"
+        color="warning"
+        checked
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 6"
+        color="danger"
+        checked
+      />
+    </VControl>
+    <VControl>
+      <VAnimatedCheckbox
+        v-model="frontmatter.state.options"
+        value="Option 7"
+        color="purple"
+        checked
+      />
+    </VControl>
+  </VFlex>
+</VField>
+
+<!--/example-->

documentation/avatar-stack/avatar-stack-medium-documentation.md

@@ -0,0 +1,52 @@
+### Medium stack
+
+Vuero avatars can be stacked in an slighlty overlaping line.
+Use the `<VAvatarStack />` component. The component takes 2 props:
+`avatars` and `size`. Available sizes are normal, `small` and `medium`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const users = [
+  {
+    id: 0,
+    picture: 'https://media.cssninja.io/content/avatars/7.jpg',
+    initials: 'AC',
+    color: 'info',
+  },
+  {
+    id: 1,
+    picture: null,
+    initials: 'JP',
+    color: 'info',
+  },
+  // etc...
+]
+</script>
+
+<template>
+  <VAvatarStack :avatars="users" size="medium" />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+<div class="avatar-stack">
+    <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="medium" />
+    <VAvatar initials="JO" color="info" size="medium" />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" size="medium" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" />
+    <VAvatar initials="CP" color="success" size="medium" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" />
+    <div class="v-avatar is-medium">
+        <span class="avatar is-more">
+            <span class="inner">
+                <span>+2</span>
+            </span>
+        </span>
+    </div>
+</div>
+
+<!--/example-->

documentation/avatar-stack/avatar-stack-regular-documentation.md

@@ -0,0 +1,53 @@
+### Regular stack
+
+Vuero avatars can be stacked in an slighlty overlaping line.
+Use the `<VAvatarStack />` component. The component takes 2 props:
+`avatars` and `size`. Available sizes are normal, `small` and `medium`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const users = [
+  {
+    id: 0,
+    picture: 'https://media.cssninja.io/content/avatars/7.jpg',
+    initials: 'AC',
+    color: 'info',
+    test: true,
+  },
+  {
+    id: 1,
+    picture: null,
+    initials: 'JP',
+    color: 'info',
+  },
+  // etc...
+]
+</script>
+
+<template>
+  <VAvatarStack :avatars="users" />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+<div class="avatar-stack">
+    <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" />
+    <VAvatar initials="JO" color="info" />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" />
+    <VAvatar initials="CP" color="success" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" />
+    <div class="v-avatar">
+        <span class="avatar is-more">
+            <span class="inner">
+                <span>+2</span>
+            </span>
+        </span>
+    </div>
+</div>
+
+<!--/example-->

documentation/avatar-stack/avatar-stack-small-documentation.md

@@ -0,0 +1,52 @@
+### Small stack
+
+Vuero avatars can be stacked in an slighlty overlaping line.
+Use the `<VAvatarStack />` component. The component takes 2 props:
+`avatars` and `size`. Available sizes are normal, `small` and `medium`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const users = [
+  {
+    id: 0,
+    picture: 'https://media.cssninja.io/content/avatars/7.jpg',
+    initials: 'AC',
+    color: 'info',
+  },
+  {
+    id: 1,
+    picture: null,
+    initials: 'JP',
+    color: 'info',
+  },
+  // etc...
+]
+</script>
+
+<template>
+  <VAvatarStack :avatars="users" size="small" />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+<div class="avatar-stack">
+    <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
+    <VAvatar initials="JO" color="info" size="small" />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="small" />
+    <VAvatar initials="CP" color="success" size="small" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="small" />
+    <div class="v-avatar is-small">
+        <span class="avatar is-more">
+            <span class="inner">
+                <span>+2</span>
+            </span>
+        </span>
+    </div>
+</div>
+
+<!--/example-->

documentation/avatar/avatar-badge-documentation.md

@@ -0,0 +1,61 @@
+### Avatar badge
+
+Vuero avatars can have badge images attached to them.
+Simply add a 1:1 ratio image URL to the avatar component using the `badge` prop.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/7.jpg"
+      size="small"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar
+      picture="/images/avatars/svg/vuero-1.svg"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/11.jpg"
+      badge="/images/icons/flags/united-states-of-america.svg"
+      size="medium"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/21.jpg"
+      badge="/images/icons/flags/united-states-of-america.svg"
+      size="large"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/13.jpg"
+      badge="/images/icons/flags/united-states-of-america.svg"
+      size="big"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/5.jpg"
+      badge="/images/icons/flags/united-states-of-america.svg"
+      size="xl"
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="medium" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="large" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="big" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="xl" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-default-documentation.md

@@ -0,0 +1,41 @@
+### VAvatar
+
+Vuero `<VAvatar />` components are rounded images used for media
+and personal pages. Avatar sizes can be controled with 'size' prop.
+Available size prop values `small`, `medium`, `large`, `big` and `xl`.
+See code for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" />
+    <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-dot-colors-documentation.md

@@ -0,0 +1,69 @@
+### Dot colors
+
+Avatar dots can have different colors. Set the `dotColor` prop
+to `primary`, `info`, `warning`, `danger` or `grey` to change the dot color.
+See code for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/7.jpg"
+      size="medium"
+      dot
+    />
+    <VAvatar
+      picture="/images/avatars/svg/vuero-1.svg"
+      size="medium"
+      dot
+      dot-color="primary"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/11.jpg"
+      size="medium"
+      dot
+      dot-color="info"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/21.jpg"
+      size="medium"
+      dot
+      dot-color="warning"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/13.jpg"
+      size="medium"
+      dot
+      dot-color="danger"
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/5.jpg"
+      size="medium"
+      dot
+      dot-color="grey"
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="medium" dot />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" size="medium" dot dotColor="primary" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot dotColor="info" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="medium" dot dotColor="warning" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="medium" dot dotColor="danger" />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" dot dotColor="grey" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-dot-documentation.md

@@ -0,0 +1,61 @@
+### Avatar dot
+
+Avatars can have a small dot attached to them,
+if you'd like to show a user status for example.
+Add the `dot` prop to the target avatar component.
+See code for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/7.jpg"
+      size="small"
+      dot
+    />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" dot />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/11.jpg"
+      size="medium"
+      dot
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/21.jpg"
+      size="large"
+      dot
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/13.jpg"
+      size="big"
+      dot
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/5.jpg"
+      size="xl"
+      dot
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" dot />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" dot />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" dot />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" dot />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" dot />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-dot-squared-documentation.md

@@ -0,0 +1,69 @@
+### Squared dot
+
+Avatars can have a small dot attached to them, if you'd like to
+show a user status for example. Add the `dot` prop
+to the target avatar component. See code for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/7.jpg"
+      size="small"
+      dot
+      squared
+    />
+    <VAvatar
+      picture="/images/avatars/svg/vuero-1.svg"
+      dot
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/11.jpg"
+      size="medium"
+      dot
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/21.jpg"
+      size="large"
+      dot
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/13.jpg"
+      size="big"
+      dot
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/5.jpg"
+      size="xl"
+      dot
+      squared
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" dot squared />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" dot squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" dot squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" dot squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" dot squared />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-fake-badge-documentation.md

@@ -0,0 +1,60 @@
+### Fake badge
+
+When the provided picture URL is null, the avatar component
+falls back to a fake avatar. Fake avatars can also have badges.
+See the code examples for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      initials="CT"
+      size="small"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar initials="CT" badge="/images/icons/flags/united-states-of-america.svg" />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar
+      initials="CT"
+      size="large"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar
+      initials="CT"
+      size="big"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+    <VAvatar
+      initials="CT"
+      size="xl"
+      badge="/images/icons/flags/united-states-of-america.svg"
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar initials="CT" size="small" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar initials="CT" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar initials="CT" size="medium" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar initials="CT" size="large" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar initials="CT" size="big" badge="/images/icons/flags/united-states-of-america.svg" />
+  <VAvatar initials="CT" size="xl" badge="/images/icons/flags/united-states-of-america.svg" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-fake-color-documentation.md

@@ -0,0 +1,98 @@
+### Fake avatar colors
+
+Fake avatars can have different colors to break monotony.
+You can change the avatar color passing one of the following values
+to the `color` prop: `primary`, `success`, `info`, `warning`, `danger`,
+`h-purple`, `h-orange`, `h-blue`, `h-green`, `h-red`, `h-yellow`.
+Supports dark mode.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar initials="CT" size="medium" />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="primary"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="success"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="info"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="warning"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="danger"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-purple"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-orange"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-blue"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-green"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-red"
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-yellow"
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar initials="CT" size="medium"/>
+  <VAvatar initials="CT" size="medium" color="primary" />
+  <VAvatar initials="CT" size="medium" color="success" />
+  <VAvatar initials="CT" size="medium" color="info" />
+  <VAvatar initials="CT" size="medium" color="warning" />
+  <VAvatar initials="CT" size="medium" color="danger" />
+  <VAvatar initials="CT" size="medium" color="h-purple" />
+  <VAvatar initials="CT" size="medium" color="h-orange" />
+  <VAvatar initials="CT" size="medium" color="h-blue" />
+  <VAvatar initials="CT" size="medium" color="h-green" />
+  <VAvatar initials="CT" size="medium" color="h-red" />
+  <VAvatar initials="CT" size="medium" color="h-yellow" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-fake-documentation.md

@@ -0,0 +1,41 @@
+### Fake avatar
+
+When the provided picture URL is null, the avatar component
+falls back to a fake avatar. Same size mofifiers are available.
+Use the `initials` prop to pass initials to the component.
+See the code examples for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar initials="CT" size="small" />
+    <VAvatar initials="CT" />
+    <VAvatar initials="CT" size="medium" />
+    <VAvatar initials="CT" size="large" />
+    <VAvatar initials="CT" size="big" />
+    <VAvatar initials="CT" size="xl" />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar initials="CT" size="small" />
+  <VAvatar initials="CT" />
+  <VAvatar initials="CT" size="medium" />
+  <VAvatar initials="CT" size="large" />
+  <VAvatar initials="CT" size="big" />
+  <VAvatar initials="CT" size="xl" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-fake-square-documentation.md

@@ -0,0 +1,61 @@
+### Fake squared
+
+When the provided picture URL is null, the avatar component
+falls back to a fake avatar. Same size mofifiers are available.
+Use the `initials` prop to pass initials to the component.
+See the code examples for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      initials="CT"
+      size="small"
+      squared
+    />
+    <VAvatar initials="CT" squared />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="large"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="big"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="xl"
+      squared
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar initials="CT" size="small" squared />
+  <VAvatar initials="CT" squared />
+  <VAvatar initials="CT" size="medium" squared />
+  <VAvatar initials="CT" size="large" squared />
+  <VAvatar initials="CT" size="big" squared />
+  <VAvatar initials="CT" size="xl" squared />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-fake-squared-color-documentation.md

@@ -0,0 +1,113 @@
+### Fake squared colors
+
+Fake avatars can have different colors to break monotony.
+You can change the avatar color passing one of the following
+values to the `color` prop: `primary`, `success`, `info`, `warning`,
+`danger`, `h-purple`, `h-orange`, `h-blue`, `h-green`, `h-red`, `h-yellow`.
+Supports dark mode.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      initials="CT"
+      size="medium"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="primary"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="success"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="info"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="warning"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="danger"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-purple"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-orange"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-blue"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-green"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-red"
+      squared
+    />
+    <VAvatar
+      initials="CT"
+      size="medium"
+      color="h-yellow"
+      squared
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar initials="CT" size="medium" squared/>
+  <VAvatar initials="CT" size="medium" color="primary" squared />
+  <VAvatar initials="CT" size="medium" color="success" squared />
+  <VAvatar initials="CT" size="medium" color="info" squared />
+  <VAvatar initials="CT" size="medium" color="warning" squared />
+  <VAvatar initials="CT" size="medium" color="danger" squared />
+  <VAvatar initials="CT" size="medium" color="h-purple" squared />
+  <VAvatar initials="CT" size="medium" color="h-orange" squared />
+  <VAvatar initials="CT" size="medium" color="h-blue" squared />
+  <VAvatar initials="CT" size="medium" color="h-green" squared />
+  <VAvatar initials="CT" size="medium" color="h-red" squared />
+  <VAvatar initials="CT" size="medium" color="h-yellow" squared />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-handle-fallback-documentation.md

@@ -0,0 +1,62 @@
+### Fallback avatar
+
+Vuero Avatars automatically fall back to a placeholder
+when no valid URL is provided for the `picture` prop.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      placeholder="https://via.placeholder.com/64?text=32x32"
+      picture="no-file.jpg"
+      size="small"
+    />
+    <VAvatar
+      placeholder="https://via.placeholder.com/80?text=40x40"
+      picture="no-file.jpg"
+    />
+    <VAvatar
+      placeholder="https://via.placeholder.com/100?text=50x50"
+      picture="no-file.jpg"
+      size="medium"
+    />
+    <VAvatar
+      placeholder="https://via.placeholder.com/136?text=68x68"
+      picture="no-file.jpg"
+      size="large"
+    />
+    <VAvatar
+      placeholder="https://via.placeholder.com/160?text=80x80"
+      picture="no-file.jpg"
+      size="big"
+    />
+    <VAvatar
+      placeholder="https://via.placeholder.com/200?text=100x100"
+      picture="no-file.jpg"
+      size="xl"
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar placeholder="https://via.placeholder.com/64?text=32x32" picture="no-file.jpg" size="small" />
+  <VAvatar placeholder="https://via.placeholder.com/80?text=40x40" picture="no-file.jpg" />
+  <VAvatar placeholder="https://via.placeholder.com/100?text=50x50" picture="no-file.jpg" size="medium" />
+  <VAvatar placeholder="https://via.placeholder.com/136?text=68x68" picture="no-file.jpg" size="large" />
+  <VAvatar placeholder="https://via.placeholder.com/160?text=80x80" picture="no-file.jpg" size="big" />
+  <VAvatar placeholder="https://via.placeholder.com/200?text=100x100" picture="no-file.jpg" size="xl" />
+</VFlex>
+
+<!--/example-->

documentation/avatar/avatar-square-documentation.md

@@ -0,0 +1,60 @@
+### Squared avatar
+
+Avatars can have a square shape instead of a circle shape
+by adding the `squared` prop to the avatar component.
+See code for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VFlex
+    flex-wrap="wrap"
+    align-items="flex-end"
+    row-gap=".5rem"
+    column-gap=".25rem"
+  >
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/7.jpg"
+      size="small"
+      squared
+    />
+    <VAvatar picture="/images/avatars/svg/vuero-1.svg" squared />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/11.jpg"
+      size="medium"
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/21.jpg"
+      size="large"
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/13.jpg"
+      size="big"
+      squared
+    />
+    <VAvatar
+      picture="https://media.cssninja.io/content/avatars/5.jpg"
+      size="xl"
+      squared
+    />
+  </VFlex>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
+  <VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" squared />
+  <VAvatar picture="/images/avatars/svg/vuero-1.svg" squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" squared />
+  <VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" squared />
+</VFlex>
+
+<!--/example-->

documentation/block/v-block-base-documentation.md

@@ -0,0 +1,51 @@
+### VBlock
+
+Vuero provides a versatile flex block media component named `<VBlock />`.
+VBlock has 2 named slots. One for the `icon` element, which can
+be whatever you want, and one for the `action`.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock title="Anna B." subtitle="UX Designer">
+    <template #icon>
+      <VAvatar
+        size="medium"
+        picture="https://media.cssninja.io/content/avatars/19.jpg"
+        badge="/images/icons/flags/germany.svg"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Anna B." subtitle="UX Designer">
+        <template #icon>
+          <VAvatar 
+            size="medium" 
+            picture="https://media.cssninja.io/content/avatars/19.jpg" 
+            badge="/images/icons/flags/germany.svg" 
+          />
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/block/v-block-base-responsive-documentation.md

@@ -0,0 +1,57 @@
+### Responsive mobile
+
+`<VBlock />` can be made responsive for the mobile viewport by
+adding the `mResponsive` prop to the component.
+When set to responsive mode, the flex block elements stack
+to fit in the available space. Resize your screen to see it in action.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock
+    title="Anna B."
+    subtitle="UX Designer"
+    center
+    m-responsive
+  >
+    <template #icon>
+      <VAvatar
+        size="medium"
+        picture="https://media.cssninja.io/content/avatars/19.jpg"
+        badge="/images/icons/flags/germany.svg"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Anna B." subtitle="UX Designer" center mResponsive>
+        <template #icon>
+          <VAvatar
+            size="medium"
+            picture="https://media.cssninja.io/content/avatars/19.jpg"
+            badge="/images/icons/flags/germany.svg"
+          />
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/block/v-block-center-documentation.md

@@ -0,0 +1,55 @@
+### Centered align
+
+You can adjust the `<VBlock />` component flex alignment
+using the `center` prop. This will apply the `flex` property
+`align-items: center;` to the component.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock
+    title="Anna B."
+    subtitle="UX Designer"
+    center
+  >
+    <template #icon>
+      <VAvatar
+        size="medium"
+        picture="https://media.cssninja.io/content/avatars/19.jpg"
+        badge="/images/icons/flags/germany.svg"
+      />
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Anna B." subtitle="UX Designer" center>
+        <template #icon>
+          <VAvatar
+            size="medium"
+            picture="https://media.cssninja.io/content/avatars/19.jpg"
+            badge="/images/icons/flags/germany.svg"
+          />
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/block/v-block-center-responsive-documentation.md

@@ -0,0 +1,64 @@
+### Tablet responsive
+
+`<VBlock />` can be made responsive for the tablet portrait viewport
+by adding the `tResponsive` prop to the component. When set to responsive mode,
+the flex block elements stack to fit in the available space.
+Resize your screen to see it in action.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock
+    title="Team Tasks"
+    subtitle="View all tasks"
+    center
+    m-responsive
+    t-responsive
+  >
+    <template #icon>
+      <VIconBox
+        color="info"
+        size="medium"
+        rounded
+      >
+        <VIcon icon="lucide:chrome" />
+      </VIconBox>
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock 
+        title="Team Tasks" 
+        subtitle="View all tasks" 
+        center 
+        m-responsive
+        t-responsive
+      >
+        <template #icon>
+          <VIconBox color="info" size="medium" rounded>
+            <VIcon icon="lucide:chrome"/>
+          </VIconBox>
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/block/v-block-icon-center-documentation.md

@@ -0,0 +1,55 @@
+### Icon centered
+
+You can adjust the `<VBlock />` component flex alignment using
+the `center` prop. This will apply the `flex` property
+`align-items: center;` to the component.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock
+    title="Team Tasks"
+    subtitle="View all tasks"
+    center
+  >
+    <template #icon>
+      <VIconBox
+        color="info"
+        size="medium"
+        rounded
+      >
+        <VIcon icon="lucide:chrome" />
+      </VIconBox>
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Team Tasks" subtitle="View all tasks" center>
+        <template #icon>
+          <VIconBox color="info" size="medium" rounded>
+            <VIcon icon="lucide:chrome"/>
+          </VIconBox>
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/block/v-block-icon-documentation.md

@@ -0,0 +1,47 @@
+### VBlock icon
+
+Vuero provides a versatile flex block media component named
+`<VBlock />`. VBlock has 2 named slots. One for the `icon` element,
+which can be whatever you want, and one for the `action`.
+
+<!--code-->
+
+```vue
+<template>
+  <VBlock title="Team Tasks" subtitle="View all tasks">
+    <template #icon>
+      <VIconBox color="success" rounded>
+        <VIcon icon="lucide:clock" />
+      </VIconBox>
+    </template>
+    <template #action>
+      <VButton color="primary" elevated>
+        View
+      </VButton>
+    </template>
+  </VBlock>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+  <div class="control">
+    <div class="l-card">
+      <VBlock title="Team Tasks" subtitle="View all tasks">
+        <template #icon>
+          <VIconBox color="success" rounded>
+            <VIcon icon="lucide:clock"/>
+          </VIconBox>
+        </template>
+        <template #action>
+          <VButton color="primary" elevated>View</VButton>
+        </template>
+      </VBlock>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/breadcrumb/breadcrumb-arrow-documentation.md

@@ -0,0 +1,63 @@
+---
+breadcrumb:
+  - label: Vuero
+    hideLabel: true
+    icon: lucide:home
+    link: https://vuero.cssninja.io/
+  - label: Components
+    icon: lucide:cpu
+    to:
+      name: /components/
+  - label: VBreadcrumb
+---
+
+### Arrow Separator
+
+Breadcrumb items can be separated by alternative separators.
+To display arrow breadcrumb separators,
+set the `separator` prop to `arrow`. See markup for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const breadcrumb = [
+  {
+    label: 'Vuero',
+    hideLabel: true,
+    icon: 'lucide:home',
+    // use external links
+    link: 'https://vuero.cssninja.io/',
+  },
+  {
+    label: 'Components',
+    icon: 'lucide:cpu',
+    // or generate a router link with 'to' props
+    to: '/components/',
+  },
+  {
+    label: 'VBreadcrumb',
+  },
+]
+</script>
+
+<template>
+  <VBreadcrumb :items="breadcrumb" separator="arrow" />
+  <VBreadcrumb
+    :items="breadcrumb"
+    separator="arrow"
+    with-icons
+  />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div>
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" />
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" with-icons />
+</div>
+
+<!--/example-->

documentation/breadcrumb/breadcrumb-bullet-documentation.md

@@ -0,0 +1,62 @@
+---
+breadcrumb:
+  - label: Vuero
+    hideLabel: true
+    icon: lucide:home
+    link: https://vuero.cssninja.io/
+  - label: Components
+    icon: lucide:cpu
+    to:
+      name: /components/
+  - label: VBreadcrumb
+---
+
+### Bullet Separator
+
+Breadcrumb items can be separated by alternative separators.
+To display bullet breadcrumb separators,
+set the `separator` prop to `bullet`. See markup for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const breadcrumb = [
+  {
+    icon: 'lucide:home',
+    hideLabel: true,
+    // use external links
+    link: 'https://vuero.cssninja.io/',
+  },
+  {
+    label: 'Components',
+    icon: 'lucide:cpu',
+    // or generate a router link with 'to' props
+    to: '/components/',
+  },
+  {
+    label: 'VBreadcrumb',
+  },
+]
+</script>
+
+<template>
+  <VBreadcrumb :items="breadcrumb" separator="bullet" />
+  <VBreadcrumb
+    :items="breadcrumb"
+    separator="bullet"
+    with-icons
+  />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div>
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" />
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" with-icons />
+</div>
+
+<!--/example-->

documentation/breadcrumb/breadcrumb-default-documentation.md

@@ -0,0 +1,62 @@
+---
+breadcrumb:
+  - label: Vuero
+    hideLabel: true
+    icon: lucide:home
+    link: https://vuero.cssninja.io/
+  - label: Components
+    icon: lucide:cpu
+    to:
+      name: /components/
+  - label: VBreadcrumb
+---
+
+### Default Separator
+
+Vuero provides a `<VBreadcrumb />` component.
+Default breadcrumb items are separated by a slash sign.
+To show icons, use the `with-icons` prop. You can also change the alignment
+by using the `align` prop (possible values are `center` and `right`).
+Pass an **Array** to the `items` prop to render the component.
+See markup for more details about usage.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const breadcrumb = [
+  {
+    label: 'Vuero',
+    hideLabel: true,
+    icon: 'lucide:home',
+    // use external links
+    link: 'https://vuero.cssninja.io/',
+  },
+  {
+    label: 'Components',
+    icon: 'lucide:cpu',
+    // or generate a router link with 'to' props
+    to: '/components/',
+  },
+  {
+    label: 'VBreadcrumb',
+  },
+]
+</script>
+
+<template>
+  <VBreadcrumb :items="breadcrumb" />
+  <VBreadcrumb :items="breadcrumb" with-icons />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div>
+  <VBreadcrumb :items="frontmatter.breadcrumb" />
+  <VBreadcrumb :items="frontmatter.breadcrumb" with-icons />
+</div>
+
+<!--/example-->

documentation/breadcrumb/breadcrumb-dot-documentation.md

@@ -0,0 +1,63 @@
+---
+breadcrumb:
+  - label: Vuero
+    hideLabel: true
+    icon: lucide:home
+    link: https://vuero.cssninja.io/
+  - label: Components
+    icon: lucide:cpu
+    to:
+      name: /components/
+  - label: VBreadcrumb
+---
+
+### Dot Separator
+
+Breadcrumb items can be separated by alternative separators.
+To display dot breadcrumb separators, set the `separator` prop to `dot`.
+See markup for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const breadcrumb = [
+  {
+    label: 'Vuero',
+    hideLabel: true,
+    icon: 'lucide:home',
+    // use external links
+    link: 'https://vuero.cssninja.io/',
+  },
+  {
+    label: 'Components',
+    icon: 'lucide:cpu',
+    // or generate a router link with 'to' props
+    to: '/components/',
+  },
+  {
+    label: 'VBreadcrumb',
+  },
+]
+</script>
+
+<template>
+  <VBreadcrumb :items="breadcrumb" separator="dot" />
+  <VBreadcrumb
+    :items="breadcrumb"
+    separator="dot"
+    with-icons
+  />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div>
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" />
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" with-icons />
+</div>
+
+<!--/example-->

documentation/breadcrumb/breadcrumb-succeeds-documentation.md

@@ -0,0 +1,62 @@
+---
+breadcrumb:
+  - label: Vuero
+    hideLabel: true
+    icon: lucide:home
+    link: https://vuero.cssninja.io/
+  - label: Components
+    icon: lucide:cpu
+    to:
+      name: /components/
+  - label: VBreadcrumb
+---
+
+### Succeeds Separator
+
+Breadcrumb items can be separated by alternative separators.
+To display succeeds breadcrumb separators,
+set the `separator` prop to `succeeds`. See markup for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const breadcrumb = [
+  {
+    label: 'Vuero',
+    hideLabel: true,
+    icon: 'lucide:home',
+    // use external links
+    link: 'https://vuero.cssninja.io/',
+  },
+  {
+    label: 'Components',
+    icon: 'lucide:cpu',
+    // or generate a router link with 'to' props
+    to: '/components/',
+  },
+  {
+    label: 'VBreadcrumb',
+  },
+]
+</script>
+
+<template>
+  <VBreadcrumb :items="breadcrumb" separator="succeeds" />
+  <VBreadcrumb
+    :items="breadcrumb"
+    separator="succeeds"
+    with-icons
+  />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+<div>
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" />
+  <VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" with-icons />
+</div>
+
+<!--/example-->

documentation/button/v-button-addons-documentation.md

@@ -0,0 +1,47 @@
+### Addons
+
+You can easily create `<VButton />` addons and group them together
+by wrapping them inside a `<div class="field is-grouped"><div>` element.
+You can mix any button styles.
+
+<!--code-->
+
+```vue
+<template>
+  <VField addons>
+    <VControl>
+      <VButton icon="fas fa-align-left">
+        Left
+      </VButton>
+    </VControl>
+    <VControl>
+      <VButton icon="fas fa-align-center">
+        Center
+      </VButton>
+    </VControl>
+    <VControl>
+      <VButton icon="fas fa-align-right">
+        Right
+      </VButton>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField addons>
+  <VControl>
+    <VButton icon="fas fa-align-left"> Left </VButton>
+  </VControl>
+  <VControl>
+    <VButton icon="fas fa-align-center"> Center </VButton>
+  </VControl>
+  <VControl>
+    <VButton icon="fas fa-align-right"> Right </VButton>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/button/v-button-base-documentation.md

@@ -0,0 +1,60 @@
+---
+state:
+  clicked: 0
+---
+
+### VButton
+
+Vuero provides a `<VButton />` component if you don't want to use the
+simple Html button. VButtons can be made bold and rounded
+by using the `bold` and `rounded` props on the component.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const clicked = ref(0)
+</script>
+
+<template>
+  <VButtons>
+    <VButton @click="clicked++">
+      clicked: {{ clicked }}
+    </VButton>
+    <VButton bold @click="clicked++">
+      clicked: {{ clicked }}
+    </VButton>
+    <VButton rounded @click="clicked++">
+      clicked: {{ clicked }}
+    </VButton>
+    <VButton
+      bold
+      rounded
+      @click="clicked++"
+    >
+      clicked: {{ clicked }}
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton @click="frontmatter.state.clicked++">
+    clicked: {{ frontmatter.state.clicked }}
+  </VButton>
+  <VButton bold @click="frontmatter.state.clicked++">
+    clicked: {{ frontmatter.state.clicked }}
+  </VButton>
+  <VButton rounded @click="frontmatter.state.clicked++">
+    clicked: {{ frontmatter.state.clicked }}
+  </VButton>
+  <VButton bold rounded @click="frontmatter.state.clicked++">
+    clicked: {{ frontmatter.state.clicked }}
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-colors-documentation.md

@@ -0,0 +1,66 @@
+### Colors
+
+`<VButton />` components can have different colors.
+Use the `color` prop on the component to change its color.
+Available color values are `primary`, `info`, `success`, `warning`,
+`danger` and `white`.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton color="primary">
+      Button
+    </VButton>
+    <VButton color="info">
+      Button
+    </VButton>
+    <VButton color="success">
+      Button
+    </VButton>
+    <VButton color="warning">
+      Button
+    </VButton>
+    <VButton color="danger">
+      Button
+    </VButton>
+    <VButton color="dark">
+      Button
+    </VButton>
+    <VButton color="white">
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+    <VButton color="primary">
+        Button
+    </VButton>
+    <VButton color="info">
+        Button
+    </VButton>
+    <VButton color="success">
+        Button
+    </VButton>
+    <VButton color="warning">
+        Button
+    </VButton>
+    <VButton color="danger">
+        Button
+    </VButton>
+    <VButton color="dark">
+      Button
+    </VButton>
+    <VButton color="white">
+        Button
+    </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-colors-light-documentation.md

@@ -0,0 +1,51 @@
+### Light Colors
+
+`<VButton />` solid color can have a very light tint of their original color.
+Use the `color` prop to set a solid color and
+use the `light` modifier prop to make a light colored button.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton color="primary" light>
+      Button
+    </VButton>
+    <VButton color="info" light>
+      Button
+    </VButton>
+    <VButton color="success" light>
+      Button
+    </VButton>
+    <VButton color="warning" light>
+      Button
+    </VButton>
+    <VButton color="danger" light>
+      Button
+    </VButton>
+    <VButton color="dark" light>
+      Button
+    </VButton>
+    <VButton light>
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton color="primary" light> Button </VButton>
+  <VButton color="info" light> Button </VButton>
+  <VButton color="success" light> Button </VButton>
+  <VButton color="warning" light> Button </VButton>
+  <VButton color="danger" light> Button </VButton>
+  <VButton color="dark" light> Button </VButton>
+  <VButton light> Button </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-colors-outlined-documentation.md

@@ -0,0 +1,55 @@
+### Outlined Colors
+
+`<VButton />` solid color can have an outlined button style.
+Use the `color` prop to set a solid color and
+use the `outlined` modifier prop to make an outlined button.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton color="primary" outlined>
+      Button
+    </VButton>
+    <VButton color="info" outlined>
+      Button
+    </VButton>
+    <VButton color="success" outlined>
+      Button
+    </VButton>
+    <VButton color="warning" outlined>
+      Button
+    </VButton>
+    <VButton color="danger" outlined>
+      Button
+    </VButton>
+    <VButton color="dark" outlined>
+      Button
+    </VButton>
+    <VButton outlined>
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton color="primary" outlined> Button </VButton>
+  <VButton color="info" outlined> Button </VButton>
+  <VButton color="success" outlined> Button </VButton>
+  <VButton color="warning" outlined> Button </VButton>
+  <VButton color="danger" outlined> Button </VButton>
+  <VButton color="dark" outlined>
+    Button
+  </VButton>
+  <VButton outlined>
+    Button
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-disabled-documentation.md

@@ -0,0 +1,52 @@
+### Disabled
+
+`<VButton />` components can be disabled and not responsive to pointer events.
+Use the `disabled` prop to set a button in a disabled state.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton color="primary" disabled>
+      Button
+    </VButton>
+    <VButton color="info" disabled>
+      Button
+    </VButton>
+    <VButton color="success" disabled>
+      Button
+    </VButton>
+    <VButton color="warning" disabled>
+      Button
+    </VButton>
+    <VButton color="danger" disabled>
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton color="primary" disabled>
+      Button
+  </VButton>
+  <VButton color="info" disabled>
+      Button
+  </VButton>
+  <VButton color="success" disabled>
+      Button
+  </VButton>
+  <VButton color="warning" disabled>
+      Button
+  </VButton>
+  <VButton color="danger" disabled>
+      Button
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-elevated-documentation.md

@@ -0,0 +1,53 @@
+### Elevation
+
+`<VButton />` components can be elevated using box shadows.
+Use the `raised` prop to show a box shadow on hover or
+use the `elevated` prop to set a permanent box shadow.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton color="primary" raised>
+      Button
+    </VButton>
+    <VButton color="info" raised>
+      Button
+    </VButton>
+    <VButton color="success" raised>
+      Button
+    </VButton>
+    <VButton color="warning" raised>
+      Button
+    </VButton>
+    <VButton color="danger" elevated>
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+    <VButton color="primary" raised>
+        Button
+    </VButton>
+    <VButton color="info" raised>
+        Button
+    </VButton>
+    <VButton color="success" raised>
+        Button
+    </VButton>
+    <VButton color="warning" raised>
+        Button
+    </VButton>
+    <VButton color="danger" elevated>
+        Button
+    </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-fa-documentation.md

@@ -0,0 +1,46 @@
+### Font Awesome
+
+`<VButton />` components work well with Font Awesome Icons.
+Add an icon name inside the `icon` prop to set a Font Awesome icon.
+You can also create square and circle buttons with a single icon
+using the `<VIconButton />` component.
+Please refer to markup for detailed examples.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton
+      color="primary"
+      icon="fab fa-twitter"
+      elevated
+    >
+      Tweet Now
+    </VButton>
+    <VButton
+      color="success"
+      icon="fas fa-check"
+      raised
+      rounded
+    >
+      Save Changes
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton color="primary" icon="fab fa-twitter" elevated>
+    Tweet Now
+  </VButton>
+  <VButton color="success" icon="fas fa-check" raised rounded>
+    Save Changes
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-feather-documentation.md

@@ -0,0 +1,46 @@
+### Lucide Icons
+
+`<VButton />` components work well with Font Awesome Icons.
+Add an icon name inside the `icon` prop to set a Font Awesome icon.
+You can also create square and circle buttons with a single icon
+using the `<VIconButton />` component.
+Please refer to markup for detailed examples.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton
+      color="info"
+      icon="lucide:twitter"
+      elevated
+    >
+      Tweet Now
+    </VButton>
+    <VButton
+      color="danger"
+      icon="lucide:gitlab"
+      raised
+      rounded
+    >
+      Commit Code
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton color="info" icon="lucide:twitter" elevated>
+      Tweet Now
+  </VButton>
+  <VButton color="danger" icon="lucide:gitlab" raised rounded>
+      Commit Code
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-group-documentation.md

@@ -0,0 +1,45 @@
+### Button group
+
+You can easily align `<VButton />` components and group them together
+by wrapping them inside a `<VButtons />` element.
+You can mix any button styles.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton icon="lucide:eye">
+      View
+    </VButton>
+    <VButton icon="lucide:edit-2">
+      View
+    </VButton>
+    <VButton
+      color="primary"
+      icon="fas fa-check"
+      elevated
+    >
+      Approve
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton icon="lucide:eye">
+    View
+  </VButton>
+  <VButton icon="lucide:edit-2">
+    View
+  </VButton>
+  <VButton color="primary" icon="fas fa-check" elevated>
+    Approve
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-link-documentation.md

@@ -0,0 +1,51 @@
+### RouterLink
+
+`<VButton />` provides a `to` property that can be used like
+on `<RouterLink />`. You can also use a `href` property to render
+a standard `<a>` tag. If none is used a `<button>` is rendered insted.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton to="/">
+      Home
+    </VButton>
+    <VButton bold to="/">
+      Home
+    </VButton>
+    <VButton rounded href="https://vuero.cssninja.io">
+      Home
+    </VButton>
+    <VButton
+      bold
+      rounded
+      href="https://vuero.cssninja.io"
+    >
+      Home
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons>
+  <VButton to="/">
+    Home
+  </VButton>
+  <VButton bold to="/">
+    Home
+  </VButton>
+  <VButton rounded href="https://vuero.cssninja.io">
+    Home
+  </VButton>
+  <VButton bold rounded href="https://vuero.cssninja.io">
+    Home
+  </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-button-placeload-documentation.md

@@ -0,0 +1,50 @@
+### Placeload
+
+`<VButton />` components can have a placeloading status.
+Use the `placeload` prop on the component to change its state.
+
+<!--code-->
+
+```vue
+<template>
+  <VButtons>
+    <VButton placeload="40px">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="primary">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="info">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="success">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="warning">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="danger">
+      Button
+    </VButton>
+    <VButton placeload="40px" color="white">
+      Button
+    </VButton>
+  </VButtons>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VButtons class="placeload-wrap">
+    <VButton placeload="40px"> Button </VButton>
+    <VButton placeload="40px" color="primary"> Button </VButton>
+    <VButton placeload="40px" color="info"> Button </VButton>
+    <VButton placeload="40px" color="success"> Button </VButton>
+    <VButton placeload="40px" color="warning"> Button </VButton>
+    <VButton placeload="40px" color="danger"> Button </VButton>
+    <VButton placeload="40px" color="white"> Button </VButton>
+</VButtons>
+
+<!--/example-->

documentation/button/v-buttons-props-documentation.md

@@ -0,0 +1,13 @@
+---
+disable_code: true
+slimscroll: true
+---
+
+### VButtons Props
+
+Here is the full props available for `<VButtons />` component:
+
+| Props  | Default                                       | Type                |
+| ------ | --------------------------------------------- | ------------------- |
+| addons | <span class="is-boolean">`false`</span>       | boolean             |
+| align  | <span class="is-undefined">`undefined`</span> | `centered`, `right` |

documentation/card-action/v-card-action-content-documentation.md

@@ -0,0 +1,32 @@
+### Content
+
+You can add content inside the `<VCardAction />` component. It will act as
+any other component slot.
+
+<!--code-->
+
+```vue
+<template>
+  <VCardAction
+    avatar="https://media.cssninja.io/content/avatars/19.jpg"
+    badge="/images/icons/flags/germany.svg"
+    title="Greta K."
+    subtitle="Sales Manager"
+  >
+    <template #action>
+      <VTag
+        color="green"
+        label="trending"
+        rounded
+      />
+    </template>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCardAction>
+</template>
+```
+
+<!--/code-->

documentation/card-action/v-card-action-documentation.md

@@ -0,0 +1,32 @@
+### VCardAction
+
+The `<VCardAction />` component is a enhamcement and port to Vue
+of the classic bulma card component, a classy and easy way
+to display post-like content. The component has several props
+to pass in the content you want to display.
+Check the code example for more details.
+
+<!--code-->
+
+<!--code-->
+
+```vue
+<template>
+  <VCardAction
+    avatar="https://media.cssninja.io/content/avatars/19.jpg"
+    badge="/images/icons/flags/germany.svg"
+    title="Greta K."
+    subtitle="Sales Manager"
+  >
+    <template #action>
+      <VTag
+        color="green"
+        label="trending"
+        rounded
+      />
+    </template>
+  </VCardAction>
+</template>
+```
+
+<!--/code-->

documentation/card-advanced/v-card-advanced-documentation.md

@@ -0,0 +1,90 @@
+### VCardAdvanced
+
+Vuero ships with a `<VCardAdvanced />` component that features a card header,
+body, and footer, to display any type of content.
+Card header and footer have both a left and right `slots` where you
+can insert your UI elements/components. You can also control the card radius
+using the `radius` prop.
+
+<!--code-->
+
+```vue
+<template>
+  <VCardAdvanced>
+    <template #header-left>
+      <VBlock
+        title="Anna B."
+        subtitle="UX Designer"
+        center
+      >
+        <template #icon>
+          <VAvatar
+            picture="https://media.cssninja.io/content/avatars/19.jpg"
+            badge="/images/icons/flags/germany.svg"
+          />
+        </template>
+      </VBlock>
+    </template>
+    <template #header-right>
+      <VAvatarStack
+        :avatars="[
+          {
+            id: 5,
+            picture: 'https://media.cssninja.io/content/avatars/12.jpg',
+            initials: 'JS',
+            color: 'info',
+          },
+          {
+            id: 22,
+            picture: 'https://media.cssninja.io/content/avatars/22.jpg',
+            initials: 'JH',
+            color: 'info',
+          },
+          {
+            id: 40,
+            picture: 'https://media.cssninja.io/content/avatars/40.jpg',
+            initials: 'SM',
+            color: 'h-purple',
+          },
+          {
+            id: 3,
+            picture: 'https://media.cssninja.io/content/avatars/5.jpg',
+            initials: 'ML',
+            color: 'danger',
+          },
+        ]"
+        :limit="3"
+        size="small"
+      />
+    </template>
+    <template #content>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+        multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+        ridens.
+      </p>
+    </template>
+    <template #footer-left>
+      <div class="tags">
+        <VTag
+          label="Sales"
+          color="solid"
+          rounded
+        />
+        <VTag
+          label="Business"
+          color="solid"
+          rounded
+        />
+      </div>
+    </template>
+    <template #footer-right>
+      <VButton color="primary" raised>
+        Action
+      </VButton>
+    </template>
+  </VCardAdvanced>
+</template>
+```
+
+<!--/code-->

documentation/card-media/v-card-media-documentation.md

@@ -0,0 +1,31 @@
+### VCardMedia
+
+The `<VCardMedia />` component is a enhamcement and port to Vue
+of the classic bulma card component, a classy and easy way
+to display media content. The component has several props
+to pass in the content you want to display.
+Check the code example for more details.
+
+<!--code-->
+
+```vue
+<template>
+  <VCardMedia
+    image="https://media.cssninja.io/content/photos/apps/1.jpg"
+    avatar="https://media.cssninja.io/content/avatars/19.jpg"
+    badge="/images/icons/flags/germany.svg"
+    title="Greta K."
+    subtitle="Sales Manager"
+  >
+    <p class="pb-4">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ego vero isti, inquam,
+      permitto. Id Sextilius factum negabat. Apparet statim, quae sint officia, quae
+      actiones. Sed hoc sane concedamus...
+    </p>
+
+    <a class="action-link" tabindex="0">Read More</a>
+  </VCardMedia>
+</template>
+```
+
+<!--/code-->

documentation/card-social/v-card-social-documentation.md

@@ -0,0 +1,27 @@
+### VCardSocial
+
+The `<VCardSocial />` component is a enhamcement and port to Vue
+of the classic bulma card component, a classy and easy way
+to display post-like content. The component has several props
+to pass in the content you want to display.
+Check the code example for more details.
+
+<!--code-->
+
+```vue
+<template>
+  <VCardSocial
+    title="Featured Tweet"
+    network="twitter"
+    avatar="https://media.cssninja.io/content/avatars/19.jpg"
+    username="@gretak"
+    :hashtags="['#bulmaio', '#css', '#responsive']"
+    share-label="Retweet"
+    like-label="Like"
+  >
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
+  </VCardSocial>
+</template>
+```
+
+<!--/code-->

documentation/card/card-base-documentation.md

@@ -0,0 +1,51 @@
+---
+disable_example: true
+---
+
+### VCard
+
+Vuero cards are very versatile and can be used in any type of layout.
+Vuero provides 3 main Html cards with the following classes: `.s-card`,
+`.r-card` and `.l-card`. The main difference each one of those is
+the border radius, giving a unique look and feel to each one of them.
+
+<!--code-->
+
+```vue
+<template>
+  <VCard radius="small">
+    <h3 class="title is-5 mb-2">
+      Iam an S-Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard>
+    <h3 class="title is-5 mb-2">
+      Iam an R-Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard radius="large">
+    <h3 class="title is-5 mb-2">
+      Iam an L-Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+</template>
+```
+
+<!--/code-->

documentation/card/card-colors-documentation.md

@@ -0,0 +1,83 @@
+---
+disable_example: true
+---
+
+### Colored Card
+
+Vuero cards can have colored backgrounds when you need them to.
+To display Available color modifiers are `is-primary`, `is-secondary`,
+`is-info`, `is-success`, `is-warning` and `is-danger`.
+
+<!--code-->
+
+```vue
+<template>
+  <VCard radius="small" color="primary">
+    <h3 class="title is-5 mb-2">
+      Primary Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard color="secondary">
+    <h3 class="title is-5 mb-2">
+      Secondary Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard radius="large" color="info">
+    <h3 class="title is-5 mb-2">
+      Info Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard radius="small" color="success">
+    <h3 class="title is-5 mb-2">
+      Success Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard color="warning">
+    <h3 class="title is-5 mb-2">
+      Warning Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard radius="large" color="danger">
+    <h3 class="title is-5 mb-2">
+      Danger L-Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+</template>
+```
+
+<!--/code-->

documentation/card/card-elevated-documentation.md

@@ -0,0 +1,50 @@
+---
+disable_example: true
+---
+
+### Elevated Card
+
+Vuero cards can be elevated and show a light box shadow.
+To display elevated cards, simply add the `is-raised`
+class to the target card element.
+
+<!--code-->
+
+```vue
+<template>
+  <VCard radius="small" elevated>
+    <h3 class="title is-5 mb-2">
+      Iam an Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard elevated>
+    <h3 class="title is-5 mb-2">
+      Iam an Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+
+  <VCard radius="large" elevated>
+    <h3 class="title is-5 mb-2">
+      Iam an Card
+    </h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+      multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+      ridens.
+    </p>
+  </VCard>
+</template>
+```
+
+<!--/code-->

documentation/card/card-structured-documentation.md

@@ -0,0 +1,67 @@
+---
+disable_example: true
+---
+
+### Structured Card
+
+Vuero cards can have a small flex header where you can put
+come content. Check the markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VCard radius="small" elevated>
+    <div class="card-head">
+      <VBlock
+        title="Greta K."
+        subtitle="Sales Manager"
+        center
+        class="no-margin"
+      >
+        <template #icon>
+          <Tippy
+            class="has-help-cursor"
+            interactive
+            :offset="[0, 10]"
+            placement="top-start"
+          >
+            <VAvatar
+              picture="https://media.cssninja.io/content/avatars/19.jpg"
+              badge="/images/icons/flags/germany.svg"
+            />
+            <template #content>
+              <UserPopoverContent
+                :user="{
+                  id: 19,
+                  avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
+                  badge: '/images/icons/flags/germany.svg',
+                  username: 'Greta K.',
+                  fullName: 'Greta Kroppfer',
+                  initials: 'GK',
+                  color: 'h-yellow',
+                  location: 'Los Angeles, CA',
+                  position: 'Sales Manager',
+                  bio: 'This is a nice user description that we can use as demo content.',
+                }"
+              />
+            </template>
+          </Tippy>
+        </template>
+      </VBlock>
+
+      <UserCardDropdown />
+    </div>
+
+    <div class="card-inner">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam praeteritis? At
+        multis se probavit. Quoniam, si dis placet, ab Epicuro loqui discimus. Et ille
+        ridens.
+      </p>
+    </div>
+  </VCard>
+</template>
+```
+
+<!--/code-->

documentation/checkbox/checkbox-outlined-circle-documentation.md

@@ -0,0 +1,138 @@
+---
+state:
+  options: 'Option 2'
+---
+
+### Outlined circle
+
+Vuero checkboxes can be circles instead of squares. Simply add the `circle`
+attribute to your checkbox element.
+See the code example for more details about usage.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const options = ref('Option 2')
+</script>
+
+<template>
+  <VField class="is-flex">
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 1"
+        label="Option 1"
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 2"
+        label="Option 2"
+        color="primary"
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 3"
+        label="Option 3"
+        color="info"
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 4"
+        label="Option 4"
+        color="success"
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 5"
+        label="Option 5"
+        color="warning"
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 6"
+        label="Option 6"
+        color="danger"
+        circle
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField class="is-flex">
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 1"
+      label="Option 1"
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 2"
+      label="Option 2"
+      color="primary"
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 3"
+      label="Option 3"
+      color="info"
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 4"
+      label="Option 4"
+      color="success"
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 5"
+      label="Option 5"
+      color="warning"
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 6"
+      label="Option 6"
+      color="danger"
+      circle
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/checkbox/checkbox-outlined-documentation.md

@@ -0,0 +1,99 @@
+---
+state:
+  option1: true
+  option2: false
+  option3: false
+  option4: true
+  option5: false
+  option6: false
+---
+
+### VCheckbox
+
+Vuero provides default styled checkboxes in 2 main styles, `outlined` (default)
+and `solid`. Those checkboxes also support all main colors.
+The available colors are `primary`, `success`, `info`,
+`warning`, `danger`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const option1 = ref(true)
+const option2 = ref(false)
+const option3 = ref(false)
+const option4 = ref(true)
+const option5 = ref(false)
+const option6 = ref(false)
+</script>
+
+<template>
+  <VField class="is-flex">
+    <VControl raw subcontrol>
+      <VCheckbox v-model="option1" label="Option 1" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="option2"
+        label="Option 2"
+        color="primary"
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="option3"
+        label="Option 3"
+        color="info"
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="option4"
+        label="Option 4"
+        color="success"
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="option5"
+        label="Option 5"
+        color="warning"
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="option6"
+        label="Option 6"
+        color="danger"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField class="is-flex">
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option1" label="Option 1" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option2" label="Option 2" color="primary" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option3" label="Option 3" color="info" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option4" label="Option 4" color="success" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option5" label="Option 5" color="warning" />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox v-model="frontmatter.state.option6" label="Option 6" color="danger" />
+    </VControl>
+  </VField>
+
+<!--/example-->

documentation/checkbox/checkbox-solid-circle-documentation.md

@@ -0,0 +1,150 @@
+---
+state:
+  options: 'Option 2'
+---
+
+### Solid circle
+
+Vuero checkboxes can be circles instead of squares. Simply add the `circle`
+attribute to your checkbox element.
+See the code example for more details about usage.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const options = ref('Option 2')
+</script>
+
+<template>
+  <VField class="is-flex">
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 1"
+        label="Option 1"
+        solid
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 2"
+        label="Option 2"
+        color="primary"
+        solid
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 3"
+        label="Option 3"
+        color="info"
+        solid
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 4"
+        label="Option 4"
+        color="success"
+        solid
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 5"
+        label="Option 5"
+        color="warning"
+        solid
+        circle
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        true-value="Option 6"
+        label="Option 6"
+        color="danger"
+        solid
+        circle
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField class="is-flex">
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 1"
+      label="Option 1"
+      solid
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 2"
+      label="Option 2"
+      color="primary"
+      solid
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 3"
+      label="Option 3"
+      color="info"
+      solid
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 4"
+      label="Option 4"
+      color="success"
+      solid
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 5"
+      label="Option 5"
+      color="warning"
+      solid
+      circle
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      trueValue="Option 6"
+      label="Option 6"
+      color="danger"
+      solid
+      circle
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/checkbox/checkbox-solid-documentation.md

@@ -0,0 +1,142 @@
+---
+state:
+  options: false
+---
+
+### Complex object value
+
+You can use complex object values to store the state of the checkbox by using
+the `trueValue` and `falseValue` props.
+
+Note that alternative checkbox style with `solid` attribute.
+Those checkboxes also support all main colors.
+The available modifiers are `primary`, `success`, `info`,
+`warning`, `danger`.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const options = ref(false)
+</script>
+
+<template>
+  <VField class="is-flex">
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option1', label: 'Option 1' }"
+        label="Option 1"
+        solid
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option2', label: 'Option 2' }"
+        label="Option 2"
+        color="primary"
+        solid
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option3', label: 'Option 3' }"
+        label="Option 3"
+        color="info"
+        solid
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option4', label: 'Option 4' }"
+        label="Option 4"
+        color="success"
+        solid
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option5', label: 'Option 5' }"
+        label="Option 5"
+        color="warning"
+        solid
+      />
+    </VControl>
+    <VControl raw subcontrol>
+      <VCheckbox
+        v-model="options"
+        :true-value="{ name: 'option6', label: 'Option 6' }"
+        label="Option 6"
+        color="danger"
+        solid
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField class="is-flex">
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option1', label: 'Option 1' }"
+      label="Option 1"
+      solid
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option2', label: 'Option 2' }"
+      label="Option 2"
+      color="primary"
+      solid
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option3', label: 'Option 3' }"
+      label="Option 3"
+      color="info"
+      solid
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option4', label: 'Option 4' }"
+      label="Option 4"
+      color="success"
+      solid
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option5', label: 'Option 5' }"
+      label="Option 5"
+      color="warning"
+      solid
+    />
+  </VControl>
+  <VControl raw subcontrol>
+    <VCheckbox
+      v-model="frontmatter.state.options"
+      :trueValue="{ name: 'option6', label: 'Option 6' }"
+      label="Option 6"
+      color="danger"
+      solid
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/collapse/accordion-collapse-documentation.md

@@ -0,0 +1,40 @@
+### VCollapse
+
+Vuero provides 2 collapse component variations:
+`<VCollapse />` and `<VCollapse with-chevron />`.  
+There are 2 available variations that you can use to change the
+collapse header icon. Pass an **Array** to the `items` props to render
+the chosen collapse component. Check markup for more details.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+const data = [
+  {
+    title: 'Accordion Item 1',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+  {
+    title: 'Accordion Item 2',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+  {
+    title: 'Accordion Item 3',
+    content: 'Sed ut perspiciatis unde omnis iste ...',
+  },
+]
+</script>
+
+<template>
+  <div class="column is-6">
+    <VCollapse :items="data" />
+  </div>
+
+  <div class="column is-6">
+    <VCollapse :items="data" with-chevron />
+  </div>
+</template>
+```
+
+<!--/code-->

documentation/control/v-control-validation-documentation.md

@@ -0,0 +1,67 @@
+### Validation
+
+Vuero offers `VControl` validation styles to go with any type of
+form validation library you could use in your project.
+Use the props shown in the code examples to handle validation.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl icon="lucide:user" is-valid>
+      <VInput
+        type="text"
+        placeholder="Username"
+        value="Superman"
+      />
+      <p class="help has-text-success">
+        This username is available
+      </p>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl icon="lucide:lock" has-error>
+      <VInput
+        type="text"
+        placeholder="Password"
+        value="passwd"
+      />
+      <p class="help has-text-danger">
+        The password must contains 8 characters
+      </p>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<form method="post" novalidate @submit.prevent>
+  <VField>
+    <VControl icon="lucide:user" is-valid>
+      <VInput
+        type="text"
+        placeholder="Username"
+        value="Superman"
+        autocomplete="username"
+      />
+      <p class="help has-text-success">This username is available</p>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl icon="lucide:lock" has-error>
+      <VInput
+        type="text"
+        placeholder="Password"
+        value="passwd"
+        autocomplete="current-password"
+      />
+      <p class="help has-text-danger">The password must contains 8 characters</p>
+    </VControl>
+  </VField>
+</form>
+
+<!--/example-->

documentation/control/v-control-validation-rounded-documentation.md

@@ -0,0 +1,71 @@
+### Validation rounded
+
+Vuero offers `VControl` validation styles to go with any type of form validation
+library you could use in your project.
+Use the props shown in the code examples to handle validation.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl icon="lucide:user" is-valid>
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="Username"
+        value="Superman"
+      />
+      <p class="help has-text-success">
+        This username is available
+      </p>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl icon="lucide:lock" has-error>
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="Password"
+        value="passwd"
+      />
+      <p class="help has-text-danger">
+        The password must contains 8 characters
+      </p>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<form method="post" novalidate @submit.prevent>
+  <VField>
+    <VControl icon="lucide:user" is-valid>
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="Username"
+        value="Superman"
+        autocomplete="username"
+      />
+      <p class="help has-text-success">This username is available</p>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl icon="lucide:lock" has-error>
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="Password"
+        value="passwd"
+        autocomplete="current-password"
+      />
+      <p class="help has-text-danger">The password must contains 8 characters</p>
+    </VControl>
+  </VField>
+</form>
+
+<!--/example-->

documentation/control/v-control-validation-vee-zod-documentation.md

@@ -0,0 +1,471 @@
+### VeeValidate and Zod
+
+[VeeValidate](https://vee-validate.logaretm.com/v4/) offer a great set of tools
+to validate your forms wich work perfectly with vuero.
+We recommand you to use [zod](https://github.com/colinhacks/zod) to
+declare schema for VeeValidate forms but you can also use [yup]()
+if you already are familiar with it.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+import { toTypedSchema } from '@vee-validate/zod'
+import { useField, useFieldArray, useForm } from 'vee-validate'
+import { z } from 'zod'
+import VueScrollTo from 'vue-scrollto'
+
+const notyf = useNotyf()
+const { scrollTo } = VueScrollTo
+
+// This is the Zod schema for the form input
+// It's used to define the shape that the form data will have
+const zodSchema = z
+  .object({
+    email: z
+      .string({
+        required_error: 'Enter your email first',
+      })
+      .email('A valid email address should be provided'),
+    rating: z
+      .number({
+        required_error: 'Enter a valid rating first',
+      })
+      .gte(1, 'The rating should be at least 1'),
+    password: z
+      .string({
+        required_error: 'Enter your password to sign in',
+      })
+      .min(8, 'Your password should contains at least 8 characters'),
+    passwordCheck: z.string(),
+    birthdate: z
+      .date({
+        invalid_type_error: 'Please enter a valid date',
+        required_error: 'Please enter a date',
+      })
+      .max(new Date(), 'You cannot be born in the future')
+      .nullable(),
+    agreeTerms: z
+      .boolean()
+      .refine(value => value, 'You must agree our terms of service'),
+    area: z.object({
+      timezone: z.string().min(1, 'Please select a timezone'),
+    }),
+    interests: z
+      .string()
+      .array()
+      .min(2, 'You must select at least 2 center of interest')
+      .max(3, 'You can select up to 3 center of interest'),
+    allergens: z.string().array().max(4, 'You can select up to 4 allergen'),
+    feedback: z
+      .array(
+        z.object({
+          title: z
+            .string()
+            .min(10, 'Your experience title should be at least 10 characters'),
+          rating: z.number().gte(1, 'The rating should be at least 1'),
+        }),
+      )
+      .min(1, 'You must send at least 1 feedback')
+      .max(3, 'You can send up to 3 feedbacks'),
+    emailOptin: z.boolean(),
+  })
+  .refine(data => data.password === data.passwordCheck, {
+    message: 'The confirmation does not match the password',
+    path: ['passwordCheck'],
+  })
+
+// Zod has a great infer method that will
+// infer the shape of the schema into a TypeScript type
+type FormInput = z.infer<typeof zodSchema>
+
+// we need to declare the schema for the form
+const validationSchema = toTypedSchema(zodSchema)
+
+// Set initial values for the form
+const initialValues = computed<FormInput>(() => ({
+  email: '',
+  password: '',
+  rating: 1,
+  passwordCheck: '',
+  birthdate: null,
+  interests: [],
+  allergens: [],
+  feedback: [],
+  agreeTerms: false,
+  emailOptin: false,
+}))
+
+// here we create a vee-validate form context that
+// will be used in all vuero form components
+const { handleSubmit, setFieldError, handleReset, values, errors } = useForm({
+  validationSchema,
+  initialValues,
+})
+
+const { remove, push, fields } = useFieldArray<FormInput['feedback'][0]>('feedback')
+const { errorMessage } = useField<FormInput['feedback'][0]>('feedback')
+
+const loading = ref(false)
+
+// here we handle our form submission
+const handleSignup = handleSubmit(async (values) => {
+  if (loading.value) return
+
+  loading.value = true
+
+  await sleep(1600)
+
+  if (values.email !== 'awesome@cssninja.io') {
+    setFieldError('email', 'This email is already taken! Tip: use awesome@cssninja.io')
+    scrollTo('#email')
+    loading.value = false
+    return
+  }
+
+  notyf.primary('You have successfully signed up!')
+  loading.value = false
+})
+</script>
+
+<template>
+  <form
+    method="post"
+    novalidate
+    @submit.prevent="handleSignup"
+  >
+    <VField
+      id="email"
+      v-slot="{ field }"
+      label="Your email"
+    >
+      <VControl icon="lucide:user">
+        <VInput
+          type="email"
+          placeholder="john.doe@gmail.com"
+          autocomplete="username"
+        />
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+      </VControl>
+    </VField>
+    <VField
+      id="password"
+      v-slot="{ field }"
+      label="Choose a password"
+    >
+      <VControl icon="lucide:lock">
+        <VInput
+          type="password"
+          placeholder="Not$3cret"
+          autocomplete="new-password"
+        />
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+      </VControl>
+    </VField>
+    <VField
+      id="passwordCheck"
+      v-slot="{ field }"
+      label="Confirm your new password"
+    >
+      <VControl icon="lucide:check">
+        <VInput
+          type="password"
+          placeholder="Not$3cret"
+          autocomplete="new-password"
+        />
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+      </VControl>
+    </VField>
+    <VField
+      id="birthdate"
+      v-slot="{ field }"
+      label="Birthdate"
+    >
+      <VControl icon="lucide:calendar">
+        <ClientOnly>
+          <VDatePicker
+            :model-value="field?.value"
+            color="green"
+            trim-weeks
+            @update:model-value="field?.handleChange"
+          >
+            <template #default="{ inputValue, inputEvents }">
+              <input
+                class="input"
+                type="text"
+                :value="inputValue"
+                placeholder="Select your birthdate"
+                v-on="inputEvents"
+              >
+              <p v-if="field?.errorMessage" class="help is-danger">
+                {{ field.errorMessage }}
+              </p>
+            </template>
+          </VDatePicker>
+        </ClientOnly>
+      </VControl>
+    </VField>
+    <VField
+      id="interests"
+      v-slot="{ field }"
+      class="pb-4"
+      label="Choose 2 or 3 center of interests"
+    >
+      <VControl>
+        <VSelect multiple size="9">
+          <VOption value="Food">
+            Food
+          </VOption>
+          <VOption value="Home Appliances">
+            Home Appliances
+          </VOption>
+          <VOption value="Computer & Office">
+            Computer & Office
+          </VOption>
+          <VOption value="Home Improvement">
+            Home Improvement
+          </VOption>
+          <VOption value="Home & Garden">
+            Home & Garden
+          </VOption>
+          <VOption value="Sports & Entertainment">
+            Sports & Entertainment
+          </VOption>
+          <VOption value="Toys & Hobbies">
+            Education & Office Supplies
+          </VOption>
+          <VOption value="Security & Protection">
+            Security & Protection
+          </VOption>
+          <VOption value="Lights & Lighting">
+            Lights & Lighting
+          </VOption>
+        </VSelect>
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+        <p class="help">
+          Hold down the <kbd>Ctrl</kbd> (windows) / <kbd>Command</kbd> (Mac) button to
+          select multiple options.
+        </p>
+      </VControl>
+    </VField>
+    <VField
+      id="area"
+      v-slot="{ field }"
+      class="pb-4"
+      label="Choose your timezone"
+    >
+      <VControl>
+        <VSelect>
+          <VOption :value="{ timezone: 'europe/paris', label: 'Paris' }">
+            europe
+          </VOption>
+          <VOption :value="{ timezone: 'asia/tokyo', label: 'Tokyo' }">
+            asia
+          </VOption>
+          <VOption :value="{ timezone: 'america/new_york', label: 'New York' }">
+            america
+          </VOption>
+          <VOption :value="{ timezone: 'australia/sydney', label: 'Sydney' }">
+            australia
+          </VOption>
+        </VSelect>
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+      </VControl>
+    </VField>
+    <VField
+      id="allergens"
+      v-slot="{ field }"
+      label="Pick your allergens"
+    >
+      <VControl>
+        <VCheckbox
+          class="pl-0"
+          color="primary"
+          value="peanuts"
+        >
+          Peanuts
+        </VCheckbox>
+        <VCheckbox
+          id="allergens-milk"
+          color="primary"
+          value="milk"
+        >
+          Milk
+        </VCheckbox>
+        <VCheckbox
+          id="allergens-egg"
+          color="primary"
+          value="egg"
+        >
+          Egg
+        </VCheckbox>
+        <VCheckbox
+          id="allergens-fish"
+          color="primary"
+          value="fish"
+        >
+          Fish
+        </VCheckbox>
+        <VCheckbox
+          id="allergens-soybeans"
+          color="primary"
+          value="soybeans"
+        >
+          Soybeans
+        </VCheckbox>
+      </VControl>
+      <p v-if="field?.errorMessage" class="help is-danger">
+        {{ field.errorMessage }}
+      </p>
+    </VField>
+    <div class="py-4">
+      <!-- eslint-disable-next-line vue/require-v-for-key -->
+      <div v-for="(element, index) in fields" class="my-3">
+        <div class="columns">
+          <VField
+            :id="`feedback[${index}].title`"
+            v-slot="{ field }"
+            label="Name your experience"
+            class="column is-two-fifths"
+          >
+            <VControl>
+              <VInput
+                type="email"
+                placeholder="john.doe@gmail.com"
+                autocomplete="username"
+              />
+              <p v-if="field?.errorMessage" class="help is-danger">
+                {{ field.errorMessage }}
+              </p>
+            </VControl>
+          </VField>
+          <VField
+            :id="`feedback[${index}].rating`"
+            v-slot="{ field }"
+            class="ml-4"
+            label="Give a rating"
+          >
+            <VControl>
+              <VRangeRating class="mt-5" size="medium" />
+              <p v-if="field?.errorMessage" class="help is-danger">
+                {{ field.errorMessage }}
+              </p>
+            </VControl>
+          </VField>
+          <VIconButton
+            class="is-remove"
+            :style="{}"
+            light
+            raised
+            circle
+            color="danger"
+            icon="lucide:trash-2"
+            @click="() => remove(index)"
+          />
+        </div>
+      </div>
+      <div class="mb-5">
+        <VButton @click="() => push({ rating: 3, title: '' })">
+          Add feedback
+        </VButton>
+        <p v-if="errorMessage" class="help is-danger">
+          {{ errorMessage }}
+        </p>
+      </div>
+    </div>
+    <VField id="agreeTerms" v-slot="{ field }">
+      <VControl>
+        <VCheckbox paddingless>
+          I agree to the <a href="#">terms and conditions</a>
+        </VCheckbox>
+
+        <p v-if="field?.errorMessage" class="help is-danger">
+          {{ field.errorMessage }}
+        </p>
+      </VControl>
+    </VField>
+    <VField id="emailOptin">
+      <VControl>
+        <VCheckbox color="primary" paddingless>
+          I want to receive exclusive news and updates
+        </VCheckbox>
+      </VControl>
+    </VField>
+    <VButtons class="pt-4">
+      <VButton
+        :loading="loading"
+        type="submit"
+        color="primary"
+      >
+        Submit
+      </VButton>
+      <VButton type="reset" @click="handleReset">
+        Reset
+      </VButton>
+    </VButtons>
+    <div class="demo-code-wrapper">
+      <div class="demo-state">
+        <pre>{{ values }}</pre>
+      </div>
+      <div class="demo-state">
+        <pre>{{ errors }}</pre>
+      </div>
+    </div>
+  </form>
+</template>
+
+<style lang="scss" scoped>
+.is-remove {
+  margin-inline-start: 1.5rem;
+  margin-top: 2.25rem;
+}
+
+.demo-code-wrapper {
+  display: flex;
+  flex-direction: column-reverse;
+  margin-top: 2rem;
+  overflow-x: auto;
+
+  .demo-code {
+    flex-grow: 1;
+  }
+
+  .demo-state {
+    // flex-grow: 1;
+    position: relative;
+    margin-bottom: 1.5rem;
+    max-width: 100%;
+
+    &::before {
+      position: absolute;
+      top: 0.6em;
+      inset-inline-end: 1em;
+      z-index: 2;
+      font-size: 0.8rem;
+      color: #888;
+      content: 'values';
+    }
+  }
+}
+
+@media only screen and (width <= 767px) {
+  .is-remove {
+    margin-inline-start: 1rem;
+    margin-top: 1em;
+    margin-bottom: 2.25rem;
+  }
+}
+</style>
+```
+
+<!--/code-->

documentation/dropdown/dropdown-button-hover-documentation.md

@@ -0,0 +1,102 @@
+### Hover buttons
+
+Vuero's `<VDropdown />` component can also be opened
+on hover or after any custom event.
+Please refer to the markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown>
+    <template #button="{ open, toggle }">
+      <VButton
+        icon="lucide:help-circle"
+        class="is-trigger"
+        @mouseenter="open"
+        @focusin="open"
+        @click="toggle"
+      >
+        Hover me!
+      </VButton>
+    </template>
+
+    <template #content="{ close }">
+      <div
+        role="button"
+        tabIndex="0"
+        @mouseleave="close"
+        @focusout="close"
+      >
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider">
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </div>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown>
+      <template #button="{ open, toggle }">
+        <VButton
+          icon="lucide:alert-triangle"
+          class="is-trigger"
+          color="warning"
+          @mouseenter="open"
+          @focusin="open"
+          @click="toggle"
+        >
+          Hover me!
+        </VButton>
+      </template>
+      <template #content="{ close }">
+        <div @mouseleave="close" @focusout="close">
+          <a href="#" class="dropdown-item"> Dropdown item </a>
+          <a href="#" class="dropdown-item"> Other dropdown item </a>
+          <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+          <a href="#" class="dropdown-item"> Other dropdown item </a>
+          <hr class="dropdown-divider" />
+          <a href="#" class="dropdown-item"> With a divider </a>
+        </div>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Primary button" up>
+      <template #button="{ open, toggle }">
+        <VButton
+          icon="lucide:help-circle"
+          class="is-trigger"
+          @mouseenter="open"
+          @focusin="open"
+          @click="toggle"
+        >
+          Hover me!
+        </VButton>
+      </template>
+      <template #content="{ close }">
+        <div @mouseleave="close" @focusout="close">
+          <a href="#" class="dropdown-item"> Dropdown item </a>
+          <a href="#" class="dropdown-item"> Other dropdown item </a>
+          <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+          <a href="#" class="dropdown-item"> Other dropdown item </a>
+          <hr class="dropdown-divider" />
+          <a href="#" class="dropdown-item"> With a divider </a>
+        </div>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-button-slot-documentation.md

@@ -0,0 +1,70 @@
+### Context Menu
+
+Vuero's `<VDropdown />` component can also be displayed
+as a context menu holding a single icon.
+The icon can be whatever you want with the specific `icon` prop set.
+Please refer to the markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown icon="lucide:more-vertical">
+    <template #content>
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown icon="lucide:more-horizontal">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown icon="lucide:more-vertical">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown icon="lucide:help-circle" up>
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-colors-documentation.md

@@ -0,0 +1,94 @@
+### Dropdown Colors
+
+You can customize the `<VDropdown />`, using `color` property.
+Refer to the dropdown prop documentation for full customization options.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown title="Primary" color="primary">
+    <template #content>
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown title="Primary" color="primary">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Danger" color="danger">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Warning" color="warning">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Info" color="info">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Success" color="success">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-documentation.md

@@ -0,0 +1,74 @@
+### VDropdown
+
+You can use a `<VDropdown />` component to display a menu that
+will hold your options. pass the `right` prop to the component to align
+it to the right instead of left, which is the default.
+Use the `up` prop to make it a dropup.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown
+    title="Dropdown button"
+    right
+    up
+  >
+    <template #content>
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown title="Dropdown button">
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Dropdown right" right>
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Dropdown up" up>
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-modern-documentation.md

@@ -0,0 +1,56 @@
+### Modern Dropdown
+
+If you add in some specific markup, `<VDropdown />` buttons can
+be enhanced into modern dropdowns with an animated caret icon.
+Use the `modern` prop on the component.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown title="Modern dropdown" modern>
+    <template #content>
+      <a href="#" class="dropdown-item"> Dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+      <a href="#" class="dropdown-item"> Other dropdown item </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item"> With a divider </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown title="Modern rounded" class="is-rounded" rounded modern>
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Modern dropdown" modern up right>
+      <template #content>
+        <a href="#" class="dropdown-item"> Dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
+        <a href="#" class="dropdown-item"> Other dropdown item </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item"> With a divider </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-with-icons-documentation.md

@@ -0,0 +1,148 @@
+### Menu with Icons
+
+`<VDropdown />` menu items can have icons and a more structured layout.
+Use the `spaced` prop with the provided markup in the code example.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown title="Dropdown with icon" spaced>
+    <template #content>
+      <a href="#" class="dropdown-item is-media">
+        <div class="icon">
+          <i class="lnil lnil-coins" />
+        </div>
+        <div class="meta">
+          <span>Invest</span>
+          <span>Buy more stocks</span>
+        </div>
+      </a>
+      <a href="#" class="dropdown-item is-media is-active">
+        <div class="icon">
+          <i class="lnil lnil-dollar-up" />
+        </div>
+        <div class="meta">
+          <span>Compare</span>
+          <span>Compare with others</span>
+        </div>
+      </a>
+      <a href="#" class="dropdown-item is-media">
+        <div class="icon">
+          <i class="lnil lnil-bank" />
+        </div>
+        <div class="meta">
+          <span>Trade</span>
+          <span>View opportunities</span>
+        </div>
+      </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item is-media">
+        <div class="icon">
+          <i class="lnil lnil-wallet-alt-1" />
+        </div>
+        <div class="meta">
+          <span>Wallet</span>
+          <span>Open stock wallet</span>
+        </div>
+      </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown title="Dropdown with icon" spaced>
+      <template #content>
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <i class="lnil lnil-coins"></i>
+          </div>
+          <div class="meta">
+            <span>Invest</span>
+            <span>Buy more stocks</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media is-active">
+          <div class="icon">
+            <i class="lnil lnil-dollar-up"></i>
+          </div>
+          <div class="meta">
+            <span>Compare</span>
+            <span>Compare with others</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <i class="lnil lnil-bank"></i>
+          </div>
+          <div class="meta">
+            <span>Trade</span>
+            <span>View opportunities</span>
+          </div>
+        </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <i class="lnil lnil-wallet-alt-1"></i>
+          </div>
+          <div class="meta">
+            <span>Wallet</span>
+            <span>Open stock wallet</span>
+          </div>
+        </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="With unicons" spaced>
+      <template #content>
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <VIcon icon="uil:pagelines"/>
+          </div>
+          <div class="meta">
+            <span>Invest</span>
+            <span>Buy more stocks</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media is-active">
+          <div class="icon">
+            <VIcon icon="uil:meeting-board"/>
+          </div>
+          <div class="meta">
+            <span>Compare</span>
+            <span>Compare with others</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <VIcon icon="uil:social-distancing"/>
+          </div>
+          <div class="meta">
+            <span>Trade</span>
+            <span>View opportunities</span>
+          </div>
+        </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item is-media">
+          <div class="icon">
+            <VIcon icon="uil:palette"/>
+          </div>
+          <div class="meta">
+            <span>Wallet</span>
+            <span>Open stock wallet</span>
+          </div>
+        </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/dropdown/dropdown-with-images-documentation.md

@@ -0,0 +1,174 @@
+### Menu with Images
+
+`<VDropdown />` menus items can have images and more original layout.
+Use the `spaced` prop with the provided markup in the code example.
+The inner images can be be made rounded by adding
+the `is-rounded` class to the image element.
+
+<!--code-->
+
+```vue
+<template>
+  <VDropdown title="Dropdown with image" spaced>
+    <template #content>
+      <a href="#" class="dropdown-item is-media">
+        <img
+          class="item-img"
+          src="/images/avatars/svg/vuero-1.svg"
+          alt=""
+        >
+        <div class="meta">
+          <span>Erik K.</span>
+          <span>New York, NY</span>
+        </div>
+      </a>
+      <a href="#" class="dropdown-item is-media is-active">
+        <img
+          class="item-img"
+          src="https://media.cssninja.io/content/avatars/7.jpg"
+          alt=""
+        >
+        <div class="meta">
+          <span>Alice C.</span>
+          <span>San Diego, CA</span>
+        </div>
+      </a>
+      <a href="#" class="dropdown-item is-media">
+        <img
+          class="item-img"
+          src="https://media.cssninja.io/content/avatars/25.jpg"
+          alt=""
+        >
+        <div class="meta">
+          <span>Melany W.</span>
+          <span>San Jose, CA</span>
+        </div>
+      </a>
+      <hr class="dropdown-divider">
+      <a href="#" class="dropdown-item is-media">
+        <img
+          class="item-img"
+          src="https://media.cssninja.io/content/avatars/9.jpg"
+          alt=""
+        >
+        <div class="meta">
+          <span>Anna B</span>
+          <span>San Francisco, CA</span>
+        </div>
+      </a>
+    </template>
+  </VDropdown>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField horizontal style="gap: 0.5rem;">
+  <VControl>
+    <VDropdown title="Dropdown with image" spaced>
+      <template #content>
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img"
+            src="/images/avatars/svg/vuero-1.svg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Erik K.</span>
+            <span>New York, NY</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media is-active">
+          <img
+            class="item-img"
+            src="https://media.cssninja.io/content/avatars/7.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Alice C.</span>
+            <span>San Diego, CA</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img"
+            src="https://media.cssninja.io/content/avatars/25.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Melany W.</span>
+            <span>San Jose, CA</span>
+          </div>
+        </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img"
+            src="https://media.cssninja.io/content/avatars/9.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Anna B</span>
+            <span>San Francisco, CA</span>
+          </div>
+        </a>
+      </template>
+    </VDropdown>
+  </VControl>
+
+  <VControl>
+    <VDropdown title="Dropdown with rounded image" spaced>
+      <template #content>
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img is-rounded"
+            src="/images/avatars/svg/vuero-1.svg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Erik K.</span>
+            <span>New York, NY</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media is-active">
+          <img
+            class="item-img is-rounded"
+            src="https://media.cssninja.io/content/avatars/7.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Alice C.</span>
+            <span>San Diego, CA</span>
+          </div>
+        </a>
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img is-rounded"
+            src="https://media.cssninja.io/content/avatars/25.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Melany W.</span>
+            <span>San Jose, CA</span>
+          </div>
+        </a>
+        <hr class="dropdown-divider" />
+        <a href="#" class="dropdown-item is-media">
+          <img
+            class="item-img is-rounded"
+            src="https://media.cssninja.io/content/avatars/9.jpg"
+            alt=""
+          />
+          <div class="meta">
+            <span>Anna B</span>
+            <span>San Francisco, CA</span>
+          </div>
+        </a>
+      </template>
+    </VDropdown>
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/colors-documentation.md

@@ -0,0 +1,13 @@
+---
+disable_code: true
+disable_example: true
+---
+
+### Theme Colors
+
+Vuero use native CSS variables to define colors. 
+You can use any color format you want, including new CSS4 color formats like 
+HSL, HSLA, HWB, etc.
+
+You can edit them with colors pickers below, 
+then update `src/scss/css-variables/_colors.scss` file with your new colors.

documentation/elements/content/content-blockquotes-documentation.md

@@ -0,0 +1,78 @@
+### Blockquotes
+
+Vuero provides `blockquote` html element styling.
+Wrap your `blockquote` element inside a `div` with the `content` class.
+Blockquotes can have different colors.
+Available color modifier classes are `is-primary`, `is-success`,
+`is-info`, `is-warning` and `is-danger`.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="content">
+    <blockquote>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
+        enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
+        Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
+        vobis placet.
+      </p>
+    </blockquote>
+
+    <blockquote class="is-primary">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
+        enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
+        Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
+        vobis placet.
+      </p>
+    </blockquote>
+
+    <blockquote class="is-success">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
+        enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
+        Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
+        vobis placet.
+      </p>
+    </blockquote>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="content">
+  <blockquote>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Ergo, inquit, tibi Q. Est enim effectrix multarum et
+      magnarum voluptatum. Equidem, sed audistine modo de
+      Carneade? Dici enim nihil potest verius. Praeteritis,
+      inquit, gaudeo. Aliter autem vobis placet.
+    </p>
+  </blockquote>
+  <blockquote class="is-primary">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Ergo, inquit, tibi Q. Est enim effectrix multarum et
+      magnarum voluptatum. Equidem, sed audistine modo de
+      Carneade? Dici enim nihil potest verius. Praeteritis,
+      inquit, gaudeo. Aliter autem vobis placet.
+    </p>
+  </blockquote>
+  <blockquote class="is-success">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      Ergo, inquit, tibi Q. Est enim effectrix multarum et
+      magnarum voluptatum. Equidem, sed audistine modo de
+      Carneade? Dici enim nihil potest verius. Praeteritis,
+      inquit, gaudeo. Aliter autem vobis placet.
+    </p>
+  </blockquote>
+</div>
+
+<!--/example-->

documentation/elements/content/content-dividers-documentation.md

@@ -0,0 +1,89 @@
+### Horizontal dividers
+
+Vuero provides dividers for your textual content.
+You can use horizontal and vertical dividers by passing
+the divider text as a `data-content` html attribute.
+See the code example for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="columns">
+    <div class="column is-5">
+      <div class="content">
+        <p>
+          Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
+          ipsum, ut blandit est tellus sit amet turpis.
+        </p>
+        <div class="is-divider" data-content="OR" />
+        <p>
+          Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
+          ipsum, ut blandit est tellus sit amet turpis.
+        </p>
+      </div>
+    </div>
+
+    <div class="column is-5 is-offset-1">
+      <div class="columns">
+        <div class="column">
+          <p>
+            Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
+            ipsum, ut blandit est tellus sit amet turpis.
+          </p>
+        </div>
+        <div class="is-divider-vertical" data-content="OR" />
+        <div class="column">
+          <p>
+            Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
+            ipsum, ut blandit est tellus sit amet turpis.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns">
+  <div class="column is-5">
+    <div class="content">
+      <p>
+        Ut venenatis, nisl scelerisque sollicitudin fermentum,
+        quam libero hendrerit ipsum, ut blandit est tellus sit
+        amet turpis.
+      </p>
+      <div class="is-divider" data-content="OR"></div>
+      <p>
+        Ut venenatis, nisl scelerisque sollicitudin fermentum,
+        quam libero hendrerit ipsum, ut blandit est tellus sit
+        amet turpis.
+      </p>
+    </div>
+  </div>
+  <div class="column is-5 is-offset-1">
+    <div class="columns">
+      <div class="column">
+        <p>
+          Ut venenatis, nisl scelerisque sollicitudin fermentum,
+          quam libero hendrerit ipsum, ut blandit est tellus sit
+          amet turpis.
+        </p>
+      </div>
+      <div class="is-divider-vertical" data-content="OR"></div>
+      <div class="column">
+        <p>
+          Ut venenatis, nisl scelerisque sollicitudin fermentum,
+          quam libero hendrerit ipsum, ut blandit est tellus sit
+          amet turpis.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/elements/content/content-ordered-lists-documentation.md

@@ -0,0 +1,117 @@
+### Ordered Lists
+
+Ordered lists `ol` are also genrated using a div with the content class.
+Ordered list bullets can be controlled with the type attribute.
+Available types are `type="1"`, `type="A"`, `type="a"`, `type="I"`, `type="i"`
+
+<!--code-->
+
+```vue
+<template>
+  <div class="columns">
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ol type="1">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ol>
+      </div>
+    </div>
+
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ol type="A">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ol>
+      </div>
+    </div>
+
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ol class="is-light" type="a">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ol>
+      </div>
+    </div>
+
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ol class="is-light" type="I">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ol>
+      </div>
+    </div>
+
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ol class="is-light" type="i">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ol>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns">
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ol type="1">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ol>
+    </div>
+  </div>
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ol type="A">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ol>
+    </div>
+  </div>
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ol class="is-light" type="a">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ol>
+    </div>
+  </div>
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ol class="is-light" type="I">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ol>
+    </div>
+  </div>
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ol class="is-light" type="i">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ol>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/elements/content/content-subtitles-documentation.md

@@ -0,0 +1,71 @@
+### Subtitles
+
+To create a subtitle, you can add the `subtitle` class to any html element.
+Subtitle sizes can be controlled with numbered modifiers using
+the patter `is-*` where `*` represents a number between 4 and 6.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="columns">
+    <div class="column is-3">
+      <h1 class="title is-3 toc-ignore">
+        This is a title
+      </h1>
+      <p class="subtitle is-4">
+        This is a huge subtitle
+      </p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-4 toc-ignore">
+        This is a title
+      </h2>
+      <p class="subtitle is-4">
+        This is a big subtitle
+      </p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-5 toc-ignore">
+        This is a title
+      </h2>
+      <p class="subtitle is-5">
+        This is a medium subtitle
+      </p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-6 toc-ignore">
+        This is a title
+      </h2>
+      <p class="subtitle is-6">
+        This is a smaller subtitle
+      </p>
+    </div>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns">
+  <div class="column is-3">
+    <h1 class="title is-3 toc-ignore">This is a title</h1>
+    <p class="subtitle is-4">This is a huge subtitle</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-4 toc-ignore">This is a title</h2>
+    <p class="subtitle is-4">This is a big subtitle</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-5 toc-ignore">This is a title</h2>
+    <p class="subtitle is-5">This is a medium subtitle</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-6 toc-ignore">This is a title</h2>
+    <p class="subtitle is-6">This is a smaller subtitle</p>
+  </div>
+</div>
+
+<!--/example-->

documentation/elements/content/content-tables-documentation.md

@@ -0,0 +1,176 @@
+### Tables
+
+You can also use the `content` class to wrap an html `table` element
+to apply minimum styles to your table UI.
+Please refer to the Vuero components section to find more advanced table
+examples and layouts.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="content">
+    <table>
+      <thead>
+        <tr>
+          <th>Heroes</th>
+          <th>Power</th>
+          <th>Availability</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Superman</td>
+          <td>
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+          </td>
+          <td>
+            <span class="tag is-rounded is-success">Available</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Batman</td>
+          <td>
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star" />
+            <i class="fas fa-star" />
+          </td>
+          <td>
+            <span class="tag is-rounded">Unavailable</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Deadpool</td>
+          <td>
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star" />
+            <i class="fas fa-star" />
+            <i class="fas fa-star" />
+          </td>
+          <td>
+            <span class="tag is-rounded">Unavailable</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Spawn</td>
+          <td>
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star" />
+          </td>
+          <td>
+            <span class="tag is-rounded is-success">Available</span>
+          </td>
+        </tr>
+        <tr>
+          <td>Galactus</td>
+          <td>
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+            <i class="fas fa-star warning-text" />
+          </td>
+          <td>
+            <span class="tag is-rounded">Unavailable</span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="content">
+  <table>
+    <thead>
+      <tr>
+        <th>Heroes</th>
+        <th>Power</th>
+        <th>Availability</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Superman</td>
+        <td>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+        </td>
+        <td>
+          <span class="tag is-rounded is-success">Available</span>
+        </td>
+      </tr>
+      <tr>
+        <td>Batman</td>
+        <td>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star"></i>
+          <i class="fas fa-star"></i>
+        </td>
+        <td>
+          <span class="tag is-rounded">Unavailable</span>
+        </td>
+      </tr>
+      <tr>
+        <td>Deadpool</td>
+        <td>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star"></i>
+          <i class="fas fa-star"></i>
+          <i class="fas fa-star"></i>
+        </td>
+        <td>
+          <span class="tag is-rounded">Unavailable</span>
+        </td>
+      </tr>
+      <tr>
+        <td>Spawn</td>
+        <td>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star"></i>
+        </td>
+        <td>
+          <span class="tag is-rounded is-success">Available</span>
+        </td>
+      </tr>
+      <tr>
+        <td>Galactus</td>
+        <td>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+          <i class="fas fa-star warning-text"></i>
+        </td>
+        <td>
+          <span class="tag is-rounded">Unavailable</span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+<!--/example-->

documentation/elements/content/content-titles-documentation.md

@@ -0,0 +1,193 @@
+### Titles
+
+To create a title, you can add the `title` class to any html element.
+Title sizes can be controlled with numbered modifiers using the patter
+`is-*` where `*` represents a number between 3 and 6.
+Titles can also be thinner using the `is-thin`, bold using the `is-bold`
+or bolder using the `is-bolder` modifier classes.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="columns is-multiline">
+    <div class="column is-3">
+      <h1 class="title is-3 is-narrow toc-ignore">
+        This is a title
+      </h1>
+      <p>This is a huge title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-4 is-narrow toc-ignore">
+        This is a title
+      </h2>
+      <p>This is a big title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-5 is-narrow toc-ignore">
+        This is a title
+      </h2>
+      <p>This is a medium title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-6 is-narrow toc-ignore">
+        This is a title
+      </h2>
+      <p>This is a smaller title</p>
+    </div>
+    <div class="column is-3">
+      <h1 class="title is-3 is-narrow toc-ignore is-bold">
+        This is a title
+      </h1>
+      <p>This is a huge bold title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-4 is-narrow toc-ignore is-bold">
+        This is a title
+      </h2>
+      <p>This is a big bold title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-5 is-narrow toc-ignore is-bold">
+        This is a title
+      </h2>
+      <p>This is a medium bold title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-6 is-narrow toc-ignore is-bold">
+        This is a title
+      </h2>
+      <p>This is a smaller bold title</p>
+    </div>
+    <div class="column is-3">
+      <h1 class="title is-3 is-narrow toc-ignore is-bolder">
+        This is a title
+      </h1>
+      <p>This is a huge bolder title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-4 is-narrow toc-ignore is-bolder">
+        This is a title
+      </h2>
+      <p>This is a big bolder title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-5 is-narrow toc-ignore is-bolder">
+        This is a title
+      </h2>
+      <p>This is a medium bolder title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-6 is-narrow toc-ignore is-bolder">
+        This is a title
+      </h2>
+      <p>This is a smaller bolder title</p>
+    </div>
+    <div class="column is-3">
+      <h1 class="title is-3 is-narrow toc-ignore is-thin">
+        This is a title
+      </h1>
+      <p>This is a huge thin title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-4 is-narrow toc-ignore is-thin">
+        This is a title
+      </h2>
+      <p>This is a big thin title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-5 is-narrow toc-ignore is-thin">
+        This is a title
+      </h2>
+      <p>This is a medium thin title</p>
+    </div>
+    <div class="column is-3">
+      <h2 class="title is-6 is-narrow toc-ignore is-thin">
+        This is a title
+      </h2>
+      <p>This is a smaller thin title</p>
+    </div>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns is-multiline">
+  <div class="column is-3">
+    <h1 class="title is-3 is-narrow toc-ignore">This is a title</h1>
+    <p>This is a huge title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-4 is-narrow toc-ignore">This is a title</h2>
+    <p>This is a big title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-5 is-narrow toc-ignore">This is a title</h2>
+    <p>This is a medium title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-6 is-narrow toc-ignore">This is a title</h2>
+    <p>This is a smaller title</p>
+  </div>
+  <div class="column is-3">
+    <h1 class="title is-3 is-narrow toc-ignore is-bold">This is a title</h1>
+    <p>This is a huge bold title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-4 is-narrow toc-ignore is-bold">This is a title</h2>
+    <p>This is a big bold title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-5 is-narrow toc-ignore is-bold">This is a title</h2>
+    <p>This is a medium bold title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-6 is-narrow toc-ignore is-bold">This is a title</h2>
+    <p>This is a smaller bold title</p>
+  </div>
+  <div class="column is-3">
+    <h1 class="title is-3 is-narrow toc-ignore is-bolder">
+      This is a title
+    </h1>
+    <p>This is a huge bolder title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-4 is-narrow toc-ignore is-bolder">
+      This is a title
+    </h2>
+    <p>This is a big bolder title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-5 is-narrow toc-ignore is-bolder">
+      This is a title
+    </h2>
+    <p>This is a medium bolder title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-6 is-narrow toc-ignore is-bolder">
+      This is a title
+    </h2>
+    <p>This is a smaller bolder title</p>
+  </div>
+  <div class="column is-3">
+    <h1 class="title is-3 is-narrow toc-ignore is-thin">This is a title</h1>
+    <p>This is a huge thin title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-4 is-narrow toc-ignore is-thin">This is a title</h2>
+    <p>This is a big thin title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-5 is-narrow toc-ignore is-thin">This is a title</h2>
+    <p>This is a medium thin title</p>
+  </div>
+  <div class="column is-3">
+    <h2 class="title is-6 is-narrow toc-ignore is-thin">This is a title</h2>
+    <p>This is a smaller thin title</p>
+  </div>
+</div>
+
+<!--/example-->

documentation/elements/content/content-unordered-lists-documentation.md

@@ -0,0 +1,61 @@
+### Unordered Lists
+
+By default, using an unordered `ul` list won't generate an html list.
+This is part of the Bulma specification. To generate you unordered list,
+wrap it inside a `div` with the `content` class. Lists can also
+have the `is-light` modifier to change the text color.
+
+<!--code-->
+
+```vue
+<template>
+  <div class="columns">
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ul>
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="column is-one-fifth">
+      <div class="content">
+        <ul class="is-light">
+          <li>Coffee</li>
+          <li>Tea</li>
+          <li>Milk</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="columns">
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ul>
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ul>
+    </div>
+  </div>
+  <div class="column is-one-fifth">
+    <div class="content">
+      <ul class="is-light">
+        <li>Coffee</li>
+        <li>Tea</li>
+        <li>Milk</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+<!--/example-->

documentation/elements/forms/file/file-base-documentation.md

@@ -0,0 +1,101 @@
+### Input File
+
+Vuero provides default styles for file inputs, in case you need a control
+to upload a single file in your forms.
+File inputs can look like upload buttons.
+Please refer to markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VField grouped>
+    <VControl>
+      <div class="file">
+        <label class="file-label">
+          <input
+            class="file-input"
+            type="file"
+            name="resume"
+          >
+          <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-cloud-upload-alt" />
+            </span>
+            <span class="file-label"> Choose a file… </span>
+          </span>
+        </label>
+      </div>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped>
+    <VControl>
+        <div class="file">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+    <VControl>
+        <div class="file is-default">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+    <VControl>
+        <div class="file is-primary">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+    <VControl>
+        <div class="file is-info">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/file/file-boxed-documentation.md

@@ -0,0 +1,85 @@
+### Boxed File
+
+Vuero file inputs can have a boxed style.
+You just need to add the `is-boxed` class to your file input element
+to apply this style. Please refer to markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VField grouped>
+    <VControl>
+      <div class="file is-boxed">
+        <label class="file-label">
+          <input
+            class="file-input"
+            type="file"
+            name="resume"
+          >
+          <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-cloud-upload-alt" />
+            </span>
+            <span class="file-label"> Choose a file… </span>
+          </span>
+        </label>
+      </div>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped>
+    <VControl>
+        <div class="file is-boxed">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+    <VControl>
+        <div class="file is-default is-boxed">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+    <VControl>
+        <div class="file is-primary is-boxed">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+            </label>
+        </div>
+    </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/file/file-left-documentation.md

@@ -0,0 +1,59 @@
+### File left
+
+File inputs can show an additional area to display the selected file name.
+You just need to add the `has-name` class to your file input element
+to apply this style. Please refer to markup for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VField grouped>
+    <VControl>
+      <div class="file has-name">
+        <label class="file-label">
+          <input
+            class="file-input"
+            type="file"
+            name="resume"
+          >
+          <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-cloud-upload-alt" />
+            </span>
+            <span class="file-label"> Choose a file… </span>
+          </span>
+          <span class="file-name light-text"> 22082020_project_budget.xls </span>
+        </label>
+      </div>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped>
+    <VControl>
+        <div class="file has-name">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+                <span class="file-name light-text">
+                    22082020_project_budget.xls
+                </span>
+            </label>
+        </div>
+    </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/file/file-right-documentation.md

@@ -0,0 +1,60 @@
+### File right
+
+File inputs can show an additional area to display the selected file name.
+You just need to add the `has-name` and `is-right` classes
+to your file input element to apply this style. Please refer to markup
+for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VField grouped>
+    <VControl>
+      <div class="file has-name is-right">
+        <label class="file-label">
+          <input
+            class="file-input"
+            type="file"
+            name="resume"
+          >
+          <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-cloud-upload-alt" />
+            </span>
+            <span class="file-label"> Choose a file… </span>
+          </span>
+          <span class="file-name light-text"> 22082020_project_budget.xls </span>
+        </label>
+      </div>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField grouped>
+    <VControl>
+        <div class="file has-name is-right">
+            <label class="file-label">
+                <input class="file-input" type="file" name="resume">
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </span>
+                    <span class="file-label">
+                        Choose a file…
+                    </span>
+                </span>
+                <span class="file-name light-text">
+                    22082020_project_budget.xls
+                </span>
+            </label>
+        </div>
+    </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-basic-documentation.md

@@ -0,0 +1,48 @@
+---
+state:
+  input: ''
+---
+
+### VInput
+
+Vuero provides elegant form controls with minimum styling.
+`VInput` accept all attributes that `<input>` accepts.
+Always wrap your inputs inside a `<VField />` and a `<VControl />`
+to build forms quickly and efficiently.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+
+const input = ref('')
+</script>
+
+<template>
+  <VField>
+    <VControl>
+      <VInput
+        v-model="input"
+        type="text"
+        placeholder="Your username"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl>
+    <VInput
+      v-model="frontmatter.state.input"
+      type="text"
+      placeholder="Your username"
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-dataset-documentation.md

@@ -0,0 +1,180 @@
+---
+state:
+  color: '#8b5cf6'
+  cake: ''
+  date: ''
+---
+
+### Autocomplete using native datalist
+
+You can use native [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
+let your browser handle the autocomplete for you. Just add a `list` attribute
+to your input and add the `datalist` element with the `id` that matches the `list` attribute.
+
+This is a great way to provide a list of options to your users.
+
+<!--code-->
+
+```vue
+<script setup lang="ts">
+
+const color = ref('#8b5cf6')
+const cake = ref('')
+const date = ref('')
+</script>
+
+<template>
+  <div class="is-flex is-flex-wrap-wrap" :style="{ gap: '1rem' }">
+    <VField>
+      <VControl :style="{ width: '70px' }">
+        <VInput
+          v-model="color"
+          list="colors-list"
+          type="color"
+          placeholder="Pick a color"
+        />
+        <datalist id="colors-list">
+          <option value="#84cc16" />
+          <option value="#22c55e" />
+          <option value="#0ea5e9" />
+          <option value="#6366f1" />
+          <option value="#8b5cf6" />
+          <option value="#d946ef" />
+          <option value="#f43f5e" />
+          <option value="#facc15" />
+          <option value="#fb923c" />
+          <option value="#9ca3af" />
+        </datalist>
+      </VControl>
+    </VField>
+    <VField>
+      <VControl class="is-flex-grow-1">
+        <VInput
+          v-model="cake"
+          list="cake-list"
+          type="text"
+          placeholder="Choose a recipe"
+        />
+        <datalist id="cake-list">
+          <option value="Chocolate cake" />
+          <option value="Vanilla cake" />
+          <option value="Red velvet cake" />
+          <option value="Carrot cake" />
+          <option value="Lemon cake" />
+          <option value="Strawberry cake" />
+          <option value="Coconut cake" />
+          <option value="Black forest cake" />
+          <option value="Pineapple upside-down cake" />
+          <option value="Marble cake" />
+          <option value="Funfetti cake" />
+          <option value="Coffee cake" />
+          <option value="Tiramisu cake" />
+          <option value="Banana cake" />
+          <option value="Raspberry cake" />
+          <option value="Oreo cake" />
+          <option value="German chocolate cake" />
+          <option value="Pumpkin cake" />
+          <option value="Blueberry cake" />
+          <option value="Almond cake" />
+        </datalist>
+      </VControl>
+    </VField>
+    <VField>
+      <VControl class="is-flex-grow-1">
+        <VInput
+          v-model="date"
+          list="times-list"
+          type="time"
+          placeholder="Pick an hour"
+        />
+        <datalist id="times-list">
+          <option value="12:00" />
+          <option value="13:00" />
+          <option value="14:00" />
+        </datalist>
+      </VControl>
+    </VField>
+  </div>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div
+  class="is-flex is-flex-wrap-wrap"
+  :style="{ gap: '1rem' }"
+>
+  <VField>
+    <VControl :style="{ width: '70px' }">
+      <VInput
+        v-model="frontmatter.state.color"
+        list="colors-list"
+        type="color"
+        placeholder="Pick a color"
+      />
+      <datalist id="colors-list">
+        <option value="#84cc16"></option>
+        <option value="#22c55e"></option>
+        <option value="#0ea5e9"></option>
+        <option value="#6366f1"></option>
+        <option value="#8b5cf6"></option>
+        <option value="#d946ef"></option>
+        <option value="#f43f5e"></option>
+        <option value="#facc15"></option>
+        <option value="#fb923c"></option>
+        <option value="#9ca3af"></option>
+      </datalist>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl class="is-flex-grow-1">
+      <VInput
+        v-model="frontmatter.state.cake"
+        list="cake-list"
+        type="text"
+        placeholder="Choose a recipe"
+      />
+      <datalist id="cake-list">
+        <option value="Chocolate cake"></option>
+        <option value="Vanilla cake"></option>
+        <option value="Red velvet cake"></option>
+        <option value="Carrot cake"></option>
+        <option value="Lemon cake"></option>
+        <option value="Strawberry cake"></option>
+        <option value="Coconut cake"></option>
+        <option value="Black forest cake"></option>
+        <option value="Pineapple upside-down cake"></option>
+        <option value="Marble cake"></option>
+        <option value="Funfetti cake"></option>
+        <option value="Coffee cake"></option>
+        <option value="Tiramisu cake"></option>
+        <option value="Banana cake"></option>
+        <option value="Raspberry cake"></option>
+        <option value="Oreo cake"></option>
+        <option value="German chocolate cake"></option>
+        <option value="Pumpkin cake"></option>
+        <option value="Blueberry cake"></option>
+        <option value="Almond cake"></option>
+      </datalist>
+    </VControl>
+  </VField>
+  <VField>
+    <VControl class="is-flex-grow-1">
+      <VInput
+        v-model="frontmatter.state.date"
+        list="times-list"
+        type="time"
+        placeholder="Pick an hour"
+      />
+      <datalist id="times-list">
+        <option value="12:00"></option>
+        <option value="13:00"></option>
+        <option value="14:00"></option>
+      </datalist>
+    </VControl>
+  </VField>
+</div>
+
+<!--/example-->

documentation/elements/forms/inputs/input-disabled-documentation.md

@@ -0,0 +1,36 @@
+### Disabled input
+
+An `VInput` can be shown in a disabled state. To apply that style,
+simply add the `disabled` atribute to the target input element.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        placeholder="Username"
+        disabled
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      placeholder="Username"
+      disabled
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-fa-documentation.md

@@ -0,0 +1,37 @@
+### Font Awesome
+
+Vuero `VInput` are fully compatible with Font Awesome 5 icons.
+Use the `iconed` prop on the `<VControl />` component to show an icon.
+You also have to provide an icon type using the `icon` or `iconify` props.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl icon="fab fa-twitter">
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="Username"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl icon="fab fa-twitter">
+    <VInput
+      type="text"
+      class="is-rounded"
+      placeholder="Username"
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-feather-documentation.md

@@ -0,0 +1,37 @@
+### Lucide Icons
+
+Vuero `VInput` are fully compatible with any icons from [icones.js](https://icones.js.org/).
+Use the `icon` or `iconify` propson the `<VControl />`
+component to show an icon.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl icon="lucide:github">
+      <VInput
+        type="text"
+        class="is-rounded"
+        placeholder="GitHub URL"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl icon="lucide:github">
+    <VInput
+      type="text"
+      class="is-rounded"
+      placeholder="GitHub URL"
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-focus-documentation.md

@@ -0,0 +1,110 @@
+### Focus Colors
+
+An `VInput` can have different border colors when focused.
+Simply add the appropriate color modifier class.
+Available classes are `is-primary-focus`, `is-success-focus`,
+`is-info-focus`, `is-warning-focus`, `is-danger-focus`.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        class="is-primary-focus"
+        placeholder="Primary"
+      />
+    </VControl>
+  </VField>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        class="is-info-focus"
+        placeholder="Info"
+      />
+    </VControl>
+  </VField>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        class="is-success-focus"
+        placeholder="Success"
+      />
+    </VControl>
+  </VField>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        class="is-warning-focus"
+        placeholder="Warning"
+      />
+    </VControl>
+  </VField>
+  <VField>
+    <VControl>
+      <VInput
+        type="text"
+        class="is-danger-focus"
+        placeholder="Danger"
+      />
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      class="is-primary-focus"
+      placeholder="Primary"
+    />
+  </VControl>
+</VField>
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      class="is-info-focus"
+      placeholder="Info"
+    />
+  </VControl>
+</VField>
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      class="is-success-focus"
+      placeholder="Success"
+    />
+  </VControl>
+</VField>
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      class="is-warning-focus"
+      placeholder="Warning"
+    />
+  </VControl>
+</VField>
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      class="is-danger-focus"
+      placeholder="Danger"
+    />
+  </VControl>
+</VField>
+
+<!--/example-->

documentation/elements/forms/inputs/input-help-documentation.md

@@ -0,0 +1,37 @@
+### Help Text
+
+You can easily add a help text to guide users when they
+interact with your forms. Use the `help` prop of the `<VField />`
+component to inject your help text string. See the code example
+for more details about usage.
+
+<!--code-->
+
+```vue
+<template>
+  <VField>
+    <VControl>
+      <VInput type="text" placeholder="Username" />
+      <p class="help">
+        Choose a nice username
+      </p>
+    </VControl>
+  </VField>
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<VField>
+  <VControl>
+    <VInput
+      type="text"
+      placeholder="Username"
+    />
+    <p class="help">Choose a nice username</p>
+  </VControl>
+</VField>
+
+<!--/example-->