From 2c3ab4432fe0a0e9246bcfaa35cb0db29033d428 Mon Sep 17 00:00:00 2001
From: Mazel <me@loicmazuel.com>
Date: Fri, 29 Nov 2024 18:50:16 +0100
Subject: [PATCH] feat(maz-ui): styles - can disable reset CSS (#1180)

---
 .../theme/components/ComponentPropDoc.vue     |  48 +--
 packages/docs/tailwind.config.ts              |   2 +-
 packages/lib/components/MazAccordion.vue      |   2 +-
 .../lib/components/MazAnimatedCounter.vue     |   2 +-
 packages/lib/components/MazAvatar.vue         |   2 +-
 packages/lib/components/MazBackdrop.vue       |   2 +-
 packages/lib/components/MazBadge.vue          |   2 +-
 packages/lib/components/MazBtn.vue            |   2 +-
 packages/lib/components/MazCard.vue           |   2 +-
 packages/lib/components/MazCardSpotlight.vue  |   2 +-
 packages/lib/components/MazCarousel.vue       |   2 +-
 packages/lib/components/MazChart.vue          |   2 +-
 packages/lib/components/MazCheckbox.vue       |   2 +-
 packages/lib/components/MazChecklist.vue      |  62 +++-
 .../lib/components/MazCircularProgressBar.vue |   2 +-
 packages/lib/components/MazDropdown.vue       |   2 +-
 packages/lib/components/MazDropzone.vue       |   2 +-
 .../lib/components/MazExpandAnimation.vue     |   2 +-
 .../lib/components/MazFullscreenLoader.vue    |   8 +-
 packages/lib/components/MazGallery.vue        |   6 +-
 packages/lib/components/MazIcon.vue           |   1 +
 packages/lib/components/MazInput.vue          |   3 +-
 packages/lib/components/MazInputCode.vue      |   2 +-
 packages/lib/components/MazInputNumber.vue    |   2 +-
 packages/lib/components/MazInputPrice.vue     |   2 +-
 packages/lib/components/MazInputTags.vue      |   2 +-
 packages/lib/components/MazLazyImg.vue        |   2 +-
 packages/lib/components/MazLink.vue           |   6 +-
 packages/lib/components/MazLoadingBar.vue     |   2 +-
 packages/lib/components/MazPagination.vue     |   2 +-
 .../lib/components/MazPhoneNumberInput.vue    |   2 +-
 packages/lib/components/MazPicker.vue         |   2 +-
 packages/lib/components/MazPullToRefresh.vue  |   2 +-
 packages/lib/components/MazRadio.vue          |   2 +-
 packages/lib/components/MazRadioButtons.vue   |   2 +-
 .../lib/components/MazReadingProgressBar.vue  |   4 +-
 packages/lib/components/MazSelect.vue         |   2 +-
 packages/lib/components/MazSlider.vue         |   4 +-
 packages/lib/components/MazSpinner.vue        |   2 +-
 packages/lib/components/MazStepper.vue        |   8 +-
 packages/lib/components/MazSwitch.vue         |   2 +-
 packages/lib/components/MazTable.vue          |   5 +-
 packages/lib/components/MazTableCell.vue      |   2 +-
 packages/lib/components/MazTableRow.vue       |   2 +-
 packages/lib/components/MazTableTitle.vue     |   2 +-
 packages/lib/components/MazTabs.vue           |  15 +-
 packages/lib/components/MazTabsBar.vue        |   4 +-
 packages/lib/components/MazTabsContent.vue    |   2 +-
 .../lib/components/MazTabsContentItem.vue     |   2 +-
 packages/lib/components/MazTextarea.vue       |   2 +-
 .../lib/components/MazTransitionExpand.vue    |   2 +-
 packages/lib/css/animation.css                | 318 +++++++++---------
 packages/lib/css/base-variables.css           |  12 +-
 packages/lib/css/dark-theme.css               |  54 +--
 packages/lib/css/index.css                    |   1 +
 packages/lib/css/maz-ui-variables.css         | 224 ++++++------
 packages/lib/css/padded-container-vars.css    |  46 +--
 packages/lib/css/reset.css                    |  62 ++--
 packages/lib/eslint.config.js                 |   1 +
 .../v-fullscreen-img/MazFullscreenImg.vue     |   2 +-
 .../lib/modules/plugins/toaster/MazToast.vue  |   6 +-
 packages/lib/tailwind.config.ts               |   1 -
 packages/lib/tailwindcss/tailwind.css         |   6 -
 .../lib/tailwindcss/variables/utilities.ts    |   3 +
 .../specs/components/MazCheckList.spec.ts     |   2 +-
 .../components/MazFullscreenLoader.spec.ts    |   2 +-
 .../MazTransitionExpand.spec.ts.snap          |   2 +-
 .../__snapshots__/maz-input-code.spec.ts.snap |   2 +-
 packages/playground/nuxt.config.ts            |   1 +
 .../playground/src/components/TestForm.vue    |   4 +-
 packages/playground/src/css/main.css          |   2 +
 packages/playground/src/pages/index.vue       |  35 ++
 packages/playground/tailwind.config.ts        |   1 +
 73 files changed, 578 insertions(+), 459 deletions(-)

diff --git a/packages/docs/docs/.vitepress/theme/components/ComponentPropDoc.vue b/packages/docs/docs/.vitepress/theme/components/ComponentPropDoc.vue
index 1a701ed561..205f52bcc0 100644
--- a/packages/docs/docs/.vitepress/theme/components/ComponentPropDoc.vue
+++ b/packages/docs/docs/.vitepress/theme/components/ComponentPropDoc.vue
@@ -77,21 +77,23 @@ onBeforeMount(async () => {
 <template>
   <table v-if="options" class="component-prop-doc" style="display: table;">
     <thead>
-      <th>
-        Prop
-      </th>
-      <th>
-        Type
-      </th>
-      <th>
-        Required
-      </th>
-      <th>
-        Default
-      </th>
-      <th>
-        Possible Value
-      </th>
+      <tr>
+        <th>
+          Prop
+        </th>
+        <th>
+          Type
+        </th>
+        <th>
+          Required
+        </th>
+        <th>
+          Default
+        </th>
+        <th>
+          Possible Value
+        </th>
+      </tr>
     </thead>
     <tbody>
       <tr v-for="({ name, type, defaultValue, required, values }, i) in options" :key="i">
@@ -133,9 +135,11 @@ onBeforeMount(async () => {
   <div class="flex items-start" style="gap: 2rem;">
     <table v-if="events" class="component-prop-doc" style="display: table;">
       <thead>
-        <th>
-          Events
-        </th>
+        <tr>
+          <th>
+            Events
+          </th>
+        </tr>
       </thead>
       <tbody>
         <tr v-for="(event, i) in events" :key="i">
@@ -147,9 +151,11 @@ onBeforeMount(async () => {
     </table>
     <table v-if="componentMethods" class="component-prop-doc" style="display: table;">
       <thead>
-        <th>
-          Methods
-        </th>
+        <tr>
+          <th>
+            Methods
+          </th>
+        </tr>
       </thead>
       <tbody>
         <tr v-for="(method, i) in componentMethods" :key="i">
diff --git a/packages/docs/tailwind.config.ts b/packages/docs/tailwind.config.ts
index 8ff1dbd1cb..cbf8bc688e 100644
--- a/packages/docs/tailwind.config.ts
+++ b/packages/docs/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from 'tailwindcss'
-import { tailwindConfig } from 'maz-ui/tailwindcss/tailwind.config.ts'
+import tailwindConfig from 'maz-ui/tailwindcss/tailwind.config.ts'
 
 export default <Config>{
   presets: [tailwindConfig],
diff --git a/packages/lib/components/MazAccordion.vue b/packages/lib/components/MazAccordion.vue
index cc74d1e50c..26013412ce 100644
--- a/packages/lib/components/MazAccordion.vue
+++ b/packages/lib/components/MazAccordion.vue
@@ -57,7 +57,7 @@ function selectStep(index: number) {
 </script>
 
 <template>
-  <div class="m-accordion" role="presentation">
+  <div class="m-accordion m-reset-css" role="presentation">
     <template v-for="step in stepCount" :key="step">
       <MazCardSpotlight class="m-accordion__spotlight" :padding="false">
         <button
diff --git a/packages/lib/components/MazAnimatedCounter.vue b/packages/lib/components/MazAnimatedCounter.vue
index 4644d7043e..98a091a3c8 100644
--- a/packages/lib/components/MazAnimatedCounter.vue
+++ b/packages/lib/components/MazAnimatedCounter.vue
@@ -51,7 +51,7 @@ const durationInMs = computed(() => `${props.duration}ms`)
 
 <template>
   <span
-    class="m-animated-counter"
+    class="m-animated-counter m-reset-css"
     :class="{
       '--animated': isAnimated,
       '--prefixed': hasPrefix,
diff --git a/packages/lib/components/MazAvatar.vue b/packages/lib/components/MazAvatar.vue
index 3c98e709a8..c06dfbdadb 100644
--- a/packages/lib/components/MazAvatar.vue
+++ b/packages/lib/components/MazAvatar.vue
@@ -132,7 +132,7 @@ function handleImageError(event: Event) {
   <Component
     :is="componentType"
     :style="[{ fontSize: size }, style]"
-    class="m-avatar"
+    class="m-avatar m-reset-css"
     :class="[
       {
         '--has-link': isLink,
diff --git a/packages/lib/components/MazBackdrop.vue b/packages/lib/components/MazBackdrop.vue
index 1da0c540e5..e385386a34 100644
--- a/packages/lib/components/MazBackdrop.vue
+++ b/packages/lib/components/MazBackdrop.vue
@@ -185,7 +185,7 @@ defineExpose({
       @after-enter="onBackdropAnimationEnter"
       @after-leave="onBackdropAnimationLeave"
     >
-      <div v-if="present" class="m-backdrop --present" v-bind="$attrs" :class="[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]">
+      <div v-if="present" class="m-backdrop --present m-reset-css" v-bind="$attrs" :class="[backdropClass, variant && `--variant-${variant}`, { '--persistent': persistent }]">
         <div role="dialog" class="m-backdrop-container" aria-modal="true">
           <div class="m-backdrop-wrapper">
             <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events -->
diff --git a/packages/lib/components/MazBadge.vue b/packages/lib/components/MazBadge.vue
index 9be613f3ef..528e0a7c64 100644
--- a/packages/lib/components/MazBadge.vue
+++ b/packages/lib/components/MazBadge.vue
@@ -29,7 +29,7 @@ withDefaults(defineProps<Props>(), {
 
 <template>
   <span
-    class="m-badge"
+    class="m-badge m-reset-css"
     :class="[
       `--${color}`,
       { '--outline': outline, '--pastel': pastel, '--nowrap': nowrap },
diff --git a/packages/lib/components/MazBtn.vue b/packages/lib/components/MazBtn.vue
index a4c00bbe87..72bdd7e131 100644
--- a/packages/lib/components/MazBtn.vue
+++ b/packages/lib/components/MazBtn.vue
@@ -173,7 +173,7 @@ const iconClassSize = computed(() => {
   <Component
     :is="component"
     :disabled="isDisabled || undefined"
-    class="m-btn"
+    class="m-btn m-reset-css"
     :class="[
       `--${size}`,
       ...[!fab && !rounded && roundedSize && `--rounded-${roundedSize}`],
diff --git a/packages/lib/components/MazCard.vue b/packages/lib/components/MazCard.vue
index 6fe209b835..a7981f59c7 100644
--- a/packages/lib/components/MazCard.vue
+++ b/packages/lib/components/MazCard.vue
@@ -121,7 +121,7 @@ const footerAlignClass = computed(() =>
 
 <template>
   <div
-    class="m-card"
+    class="m-card m-reset-css"
     :class="[
       {
         'm-card--linked': isLinked,
diff --git a/packages/lib/components/MazCardSpotlight.vue b/packages/lib/components/MazCardSpotlight.vue
index 48cb665090..94a068313b 100644
--- a/packages/lib/components/MazCardSpotlight.vue
+++ b/packages/lib/components/MazCardSpotlight.vue
@@ -85,7 +85,7 @@ onUnmounted(() => {
 
 <template>
   <div
-    class="m-card-spotlight"
+    class="m-card-spotlight m-reset-css"
     :class="{ 'maz-elevation': !noElevation }"
     :style="{ 'backgroundColor': alphaColor20, '--inner-opacity': innerOpacity }"
   >
diff --git a/packages/lib/components/MazCarousel.vue b/packages/lib/components/MazCarousel.vue
index 949b0df9b9..197f731310 100644
--- a/packages/lib/components/MazCarousel.vue
+++ b/packages/lib/components/MazCarousel.vue
@@ -59,7 +59,7 @@ function setScrollState(event: Event) {
 
 <template>
   <div
-    class="m-carousel"
+    class="m-carousel m-reset-css"
     :class="{
       '--hide-scrollbar': hideScrollbar,
     }"
diff --git a/packages/lib/components/MazChart.vue b/packages/lib/components/MazChart.vue
index 0c41c43045..3d0c42d4d9 100644
--- a/packages/lib/components/MazChart.vue
+++ b/packages/lib/components/MazChart.vue
@@ -115,5 +115,5 @@ const component = defineAsyncComponent(async () => {
 
 <template>
   <!-- @vue-expect-error -->
-  <Component :is="component" v-bind="props" />
+  <Component :is="component" class="m-chart m-reset-css" v-bind="props" />
 </template>
diff --git a/packages/lib/components/MazCheckbox.vue b/packages/lib/components/MazCheckbox.vue
index 352209edb0..e379876ca9 100644
--- a/packages/lib/components/MazCheckbox.vue
+++ b/packages/lib/components/MazCheckbox.vue
@@ -223,7 +223,7 @@ function onFocus(event: FocusEvent) {
 <template>
   <label
     :for="instanceId"
-    class="m-checkbox"
+    class="m-checkbox m-reset-css"
     :class="[{ '--disabled': disabled, '--error': error, '--warning': warning, '--success': success }, props.class]"
     tabindex="0"
     :style="[style, { '--checkbox-selected-color': checkboxSelectedColor, '--checkbox-box-shadow-color': checkboxBoxShadow }]"
diff --git a/packages/lib/components/MazChecklist.vue b/packages/lib/components/MazChecklist.vue
index 39e750b713..6246485cab 100644
--- a/packages/lib/components/MazChecklist.vue
+++ b/packages/lib/components/MazChecklist.vue
@@ -124,9 +124,9 @@ function updateQuery(value?: string) {
 </script>
 
 <template>
-  <div class="m-checklist maz-flex maz-flex-col maz-gap-4">
-    <label v-if="search?.enabled" for="query" class="maz-flex maz-items-center maz-justify-between maz-gap-4">
-      <span v-if="$slots.title || title" class="maz-flex-none maz-truncate">
+  <div class="m-checklist m-reset-css">
+    <label v-if="search?.enabled" for="query" class="search-label">
+      <span v-if="$slots.title || title" class="title">
         <!-- @slot use this slot to customize the title -->
         <slot name="title">
           {{ title }}
@@ -150,15 +150,15 @@ function updateQuery(value?: string) {
       :color
       :no-elevation="!elevation"
       :padding="false"
-      content-class="maz-flex maz-flex-col maz-maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2"
+      content-class="card-content"
     >
-      <div v-if="filteredItems?.length === 0" class="maz-flex maz-h-full maz-flex-center">
+      <div v-if="filteredItems?.length === 0" class="no-results">
         <!-- @slot use this slot to customize the no results area -->
         <slot name="no-results">
-          <div class="maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center">
-            <NoResultsIcon class="maz-text-3xl maz-text-muted" />
+          <div class="no-results-content">
+            <NoResultsIcon class="no-results-icon" />
 
-            <span class="maz-text-muted">
+            <span class="no-results-text">
               <!-- @slot use this slot to customize the no results message -->
               <slot name="no-results-text"> No results found </slot>
             </span>
@@ -169,7 +169,7 @@ function updateQuery(value?: string) {
         v-for="item of filteredItems"
         :key="item.value"
         :for="item.value"
-        class="m-checklist-item maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light"
+        class="m-checklist-item m-reset-css"
       >
         <MazCheckbox
           :id="item.value"
@@ -186,7 +186,7 @@ function updateQuery(value?: string) {
           :item="item"
           name="item"
         >
-          <span class="cap-f">
+          <span class="item-label">
             {{ item.label }}
           </span>
         </slot>
@@ -194,3 +194,45 @@ function updateQuery(value?: string) {
     </MazCardSpotlight>
   </div>
 </template>
+
+<style lang="postcss" scoped>
+.m-checklist {
+  @apply maz-flex maz-flex-col maz-gap-4;
+
+  .search-label {
+    @apply maz-flex maz-items-center maz-justify-between maz-gap-4;
+  }
+
+  .title {
+    @apply maz-flex-none maz-truncate;
+  }
+
+  :deep(.card-content) {
+    @apply maz-flex maz-flex-col maz-gap-2 maz-overflow-y-auto maz-bg-color maz-px-3 maz-py-2;
+  }
+
+  .no-results {
+    @apply maz-flex maz-h-full maz-flex-center;
+  }
+
+  .no-results-content {
+    @apply maz-flex maz-h-full maz-flex-col maz-gap-3 maz-flex-center;
+  }
+
+  .no-results-icon {
+    @apply maz-text-3xl maz-text-muted;
+  }
+
+  .no-results-text {
+    @apply maz-text-muted;
+  }
+
+  .m-checklist-item {
+    @apply maz-flex maz-w-full maz-cursor-pointer maz-items-center maz-gap-4 maz-rounded maz-px-3 maz-py-2 maz-text-left hover:maz-bg-color-light;
+  }
+
+  .item-label {
+    @apply maz-cap-f;
+  }
+}
+</style>
diff --git a/packages/lib/components/MazCircularProgressBar.vue b/packages/lib/components/MazCircularProgressBar.vue
index b7bf8fb70a..288d595a07 100644
--- a/packages/lib/components/MazCircularProgressBar.vue
+++ b/packages/lib/components/MazCircularProgressBar.vue
@@ -124,7 +124,7 @@ const dashoffset = computed<number>(() => {
 
 <template>
   <div
-    class="m-circular-progress-bar"
+    class="m-circular-progress-bar m-reset-css"
     :style="[
       {
         '--animation-duration': animationDuration,
diff --git a/packages/lib/components/MazDropdown.vue b/packages/lib/components/MazDropdown.vue
index 80ffbee739..fd6a029a47 100644
--- a/packages/lib/components/MazDropdown.vue
+++ b/packages/lib/components/MazDropdown.vue
@@ -312,7 +312,7 @@ watch(
   <div
     :id="instanceId"
     v-click-outside="onClickOutside"
-    class="m-dropdown"
+    class="m-dropdown m-reset-css"
     :style
     :class="[props.class, { '--block': block }]"
   >
diff --git a/packages/lib/components/MazDropzone.vue b/packages/lib/components/MazDropzone.vue
index 3b6e23a22b..860936b73b 100644
--- a/packages/lib/components/MazDropzone.vue
+++ b/packages/lib/components/MazDropzone.vue
@@ -326,7 +326,7 @@ export default defineComponent({
     ref="ButtonElement"
     type="button"
     name="maz-dropzone"
-    class="maz-dropzone"
+    class="maz-dropzone m-reset-css"
     :style="[dropzoneStyle]"
   >
     <template v-if="dropzoneReady">
diff --git a/packages/lib/components/MazExpandAnimation.vue b/packages/lib/components/MazExpandAnimation.vue
index 7f042ffa18..5d7d8a20e3 100644
--- a/packages/lib/components/MazExpandAnimation.vue
+++ b/packages/lib/components/MazExpandAnimation.vue
@@ -54,7 +54,7 @@ onUnmounted(() => {
 <template>
   <div
     ref="expandAnimationRef"
-    class="m-expand-animation"
+    class="m-expand-animation m-reset-css"
     :class="{ 'm-expand-animation--expanded': isOpen }"
     :aria-hidden="!isOpen"
     role="region"
diff --git a/packages/lib/components/MazFullscreenLoader.vue b/packages/lib/components/MazFullscreenLoader.vue
index aba65ddc7e..0edd93aa64 100644
--- a/packages/lib/components/MazFullscreenLoader.vue
+++ b/packages/lib/components/MazFullscreenLoader.vue
@@ -35,7 +35,7 @@ onUnmounted(() => {
 <template>
   <Teleport :to="teleportSelector">
     <div
-      class="m-fullscreen-loader maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center"
+      class="m-fullscreen-loader m-reset-css"
       v-bind="$attrs"
     >
       <MazSpinner :color="color" :size="size" />
@@ -53,3 +53,9 @@ onUnmounted(() => {
   height: 100vh;
 }
 </style>
+
+<style lang="postcss" scoped>
+.m-fullscreen-loader {
+  @apply maz-fixed maz-inset-0 maz-z-default-backdrop maz-flex maz-flex-col maz-gap-2 maz-bg-overlay maz-text-center maz-backdrop-blur maz-flex-center;
+}
+</style>
diff --git a/packages/lib/components/MazGallery.vue b/packages/lib/components/MazGallery.vue
index 284346896f..b1fd196c48 100644
--- a/packages/lib/components/MazGallery.vue
+++ b/packages/lib/components/MazGallery.vue
@@ -104,7 +104,7 @@ function shouldHaveRemainingLayer(index: number): boolean {
 <template>
   <div
     v-if="images.length > 0 || hasEmptyLayer"
-    class="m-gallery maz-flex"
+    class="m-gallery m-reset-css"
     :style="[sizeStyle, { '--gallery-separator-color': separatorColor }]"
     :class="{ 'maz-rounded': !noRadius }"
   >
@@ -162,8 +162,8 @@ function shouldHaveRemainingLayer(index: number): boolean {
 </template>
 
 <style lang="postcss" scoped>
-  .m-gallery {
-  @apply maz-relative maz-overflow-hidden;
+.m-gallery {
+  @apply maz-relative maz-overflow-hidden maz-flex;
 
   &__hidden {
     @apply maz-hidden;
diff --git a/packages/lib/components/MazIcon.vue b/packages/lib/components/MazIcon.vue
index 09696a0e6d..4d5d3f5a40 100644
--- a/packages/lib/components/MazIcon.vue
+++ b/packages/lib/components/MazIcon.vue
@@ -182,6 +182,7 @@ watchEffect(() => getSource(fullSrc.value))
   <svg
     v-if="svgElSource"
     ref="svgElem"
+    class="m-icon m-reset-css"
     width="1em"
     height="1em"
     v-bind="{
diff --git a/packages/lib/components/MazInput.vue b/packages/lib/components/MazInput.vue
index 418815e81a..4fbdbe49b1 100644
--- a/packages/lib/components/MazInput.vue
+++ b/packages/lib/components/MazInput.vue
@@ -342,7 +342,8 @@ function emitInputEvent(event: Event) {
     <label v-if="topLabel" :for="instanceId" class="m-input-top-label">{{ topLabel }}</label>
 
     <div
-      class="m-input-wrapper" :class="[
+      class="m-input-wrapper m-reset-css"
+      :class="[
         inputClasses,
         borderStyle,
         !roundedSize ? { 'maz-rounded': !noRadius } : `--rounded-${roundedSize}`,
diff --git a/packages/lib/components/MazInputCode.vue b/packages/lib/components/MazInputCode.vue
index 5f6bb3d6be..199740e5b9 100644
--- a/packages/lib/components/MazInputCode.vue
+++ b/packages/lib/components/MazInputCode.vue
@@ -233,7 +233,7 @@ const borderColor = computed(() => {
 
 <template>
   <fieldset
-    class="m-input-code"
+    class="m-input-code m-reset-css"
     :class="[size ? `--${size}` : undefined, props.class]"
     :disabled="disabled"
     :style="[style, { '--input-border-color': borderColor }]"
diff --git a/packages/lib/components/MazInputNumber.vue b/packages/lib/components/MazInputNumber.vue
index 1134fdd2bc..2421de437b 100644
--- a/packages/lib/components/MazInputNumber.vue
+++ b/packages/lib/components/MazInputNumber.vue
@@ -154,7 +154,7 @@ function decrement() {
 
 <template>
   <div
-    class="m-input-number"
+    class="m-input-number m-reset-css"
     :class="[`m-input-number--${size}`, props.class, { '--block': block }]"
     :style="style"
   >
diff --git a/packages/lib/components/MazInputPrice.vue b/packages/lib/components/MazInputPrice.vue
index bb476a5dba..efa6e4b9e2 100644
--- a/packages/lib/components/MazInputPrice.vue
+++ b/packages/lib/components/MazInputPrice.vue
@@ -124,7 +124,7 @@ function updateInternalValue(value?: string | number) {
 <template>
   <MazInput
     :model-value="displayPrice"
-    class="maz-input-price"
+    class="maz-input-price m-reset-css"
     :block
     :error
     :success
diff --git a/packages/lib/components/MazInputTags.vue b/packages/lib/components/MazInputTags.vue
index 5a4483d6f7..cf633a8596 100644
--- a/packages/lib/components/MazInputTags.vue
+++ b/packages/lib/components/MazInputTags.vue
@@ -175,7 +175,7 @@ const buttonSize = computed(() => {
 
 <template>
   <div
-    class="m-input-tags"
+    class="m-input-tags m-reset-css"
     :class="[borderStyle, `--${color}`, `--${size}`, props.class, { '--block': block }]"
     :style
     @focus.capture="isFocused = true"
diff --git a/packages/lib/components/MazLazyImg.vue b/packages/lib/components/MazLazyImg.vue
index 6ed8d8a868..53c0ac0548 100644
--- a/packages/lib/components/MazLazyImg.vue
+++ b/packages/lib/components/MazLazyImg.vue
@@ -88,7 +88,7 @@ const sources = computed(() => {
       onLoaded: (el) => $emit('loaded', el),
       onError: (el) => $emit('error', el),
     }"
-    class="m-lazy-img-component"
+    class="m-lazy-img-component m-reset-css"
     :class="[{ '--use-loader': !noLoader, '--height-full': imageHeightFull, '--block': block }, props.class]"
     :style
   >
diff --git a/packages/lib/components/MazLink.vue b/packages/lib/components/MazLink.vue
index 23d65df984..35b040ad0c 100644
--- a/packages/lib/components/MazLink.vue
+++ b/packages/lib/components/MazLink.vue
@@ -32,8 +32,8 @@ export interface MazLinkProps {
   /** The title of the link */
   title?: string
   /**
-   * The color of the link
-   * @default '#'
+   * The href of the link
+   * @default undefined
    */
   href?: string
   /** The route location (router-link) of the link */
@@ -81,7 +81,7 @@ export interface MazLinkProps {
   <Component
     :is="to ? 'router-link' : 'a'"
     :id
-    class="m-link"
+    class="m-link m-reset-css"
     :class="[
       {
         '--underline': underline,
diff --git a/packages/lib/components/MazLoadingBar.vue b/packages/lib/components/MazLoadingBar.vue
index dfe8e6fd61..676591f091 100644
--- a/packages/lib/components/MazLoadingBar.vue
+++ b/packages/lib/components/MazLoadingBar.vue
@@ -21,7 +21,7 @@ const colorCSVariables = computed(() => ({
 
 <template>
   <div
-    class="m-loading-bar"
+    class="m-loading-bar m-reset-css"
     :style="[{ '--loading-bar-height': height, '--loading-bar-color': colorCSVariables.alpha, '--loading-bar-main-color': colorCSVariables.main }]"
   >
     <div />
diff --git a/packages/lib/components/MazPagination.vue b/packages/lib/components/MazPagination.vue
index 630eecb7fb..ac721329b5 100644
--- a/packages/lib/components/MazPagination.vue
+++ b/packages/lib/components/MazPagination.vue
@@ -132,7 +132,7 @@ function setPageNumber(page: number) {
 </script>
 
 <template>
-  <nav class="m-pagination" role="navigation" aria-label="page navigation">
+  <nav class="m-pagination m-reset-css" role="navigation" aria-label="page navigation">
     <ul>
       <li>
         <MazBtn
diff --git a/packages/lib/components/MazPhoneNumberInput.vue b/packages/lib/components/MazPhoneNumberInput.vue
index f51a01c689..43138eb49e 100644
--- a/packages/lib/components/MazPhoneNumberInput.vue
+++ b/packages/lib/components/MazPhoneNumberInput.vue
@@ -412,7 +412,7 @@ provide<InjectedData>('data', {
 
 <template>
   <div
-    class="m-phone-number-input"
+    class="m-phone-number-input m-reset-css"
     :class="[props.class, { '--block': block }, orientation ? `--${orientation}` : undefined]"
     :style
   >
diff --git a/packages/lib/components/MazPicker.vue b/packages/lib/components/MazPicker.vue
index d0a8a9341e..fa8a65fe53 100644
--- a/packages/lib/components/MazPicker.vue
+++ b/packages/lib/components/MazPicker.vue
@@ -624,7 +624,7 @@ watch(
   <div
     ref="MazPicker"
     v-click-outside="closeCalendarOnClickOutside"
-    class="m-picker"
+    class="m-picker m-reset-css"
     role="none"
     :style="style"
     :class="[
diff --git a/packages/lib/components/MazPullToRefresh.vue b/packages/lib/components/MazPullToRefresh.vue
index 9991ef2cf8..074eabc967 100644
--- a/packages/lib/components/MazPullToRefresh.vue
+++ b/packages/lib/components/MazPullToRefresh.vue
@@ -220,7 +220,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="m-pull-to-refresh" :class="{ '--available': pull.available || pullHeight > 10 }">
+  <div class="m-pull-to-refresh m-reset-css" :class="{ '--available': pull.available || pullHeight > 10 }">
     <div
       v-if="!isDisabled"
       class="loading-header"
diff --git a/packages/lib/components/MazRadio.vue b/packages/lib/components/MazRadio.vue
index 4210e22bf4..ec0b2a146c 100644
--- a/packages/lib/components/MazRadio.vue
+++ b/packages/lib/components/MazRadio.vue
@@ -150,7 +150,7 @@ function onFocus(event: FocusEvent) {
 <template>
   <label
     :for="instanceId"
-    class="m-radio"
+    class="m-radio m-reset-css"
     :class="[{ '--disabled': disabled, '--selected': isSelected, '--error': error, '--warning': warning, '--success': success }, props.class]"
     tabindex="0"
     role="radio"
diff --git a/packages/lib/components/MazRadioButtons.vue b/packages/lib/components/MazRadioButtons.vue
index b68ef4959c..eeb00a3897 100644
--- a/packages/lib/components/MazRadioButtons.vue
+++ b/packages/lib/components/MazRadioButtons.vue
@@ -123,7 +123,7 @@ function onFocus(index: number, event: FocusEvent) {
 
 <template>
   <div
-    class="m-radio-buttons"
+    class="m-radio-buttons m-reset-css"
   >
     <div class="m-radio-buttons__wrapper" :class="[`--${orientation}`, { '--no-wrap': noWrap, '--block': block }]">
       <label
diff --git a/packages/lib/components/MazReadingProgressBar.vue b/packages/lib/components/MazReadingProgressBar.vue
index ba5ffa10a1..c4d74c7a08 100644
--- a/packages/lib/components/MazReadingProgressBar.vue
+++ b/packages/lib/components/MazReadingProgressBar.vue
@@ -135,7 +135,7 @@ onBeforeUnmount(() => {
 
 <template>
   <Teleport :to="teleportSelector">
-    <div class="m-reading-progress-bar" v-bind="$attrs">
+    <div class="m-reading-progress-bar m-reset-css" v-bind="$attrs">
       <div
         :class="barClass"
         :style="{
@@ -149,7 +149,7 @@ onBeforeUnmount(() => {
 </template>
 
 <style lang="postcss" scoped>
-  .m-reading-progress-bar {
+.m-reading-progress-bar {
   @apply maz-fixed maz-top-0 maz-z-default-backdrop maz-w-full;
 }
 </style>
diff --git a/packages/lib/components/MazSelect.vue b/packages/lib/components/MazSelect.vue
index a5e4933d74..fbbe93cb9e 100644
--- a/packages/lib/components/MazSelect.vue
+++ b/packages/lib/components/MazSelect.vue
@@ -639,7 +639,7 @@ function updateValue(inputOption: NormalizedOption, mustCloseList = true) {
       exclude: excludeSelectors,
       handler: closeList,
     }"
-    class="m-select"
+    class="m-select m-reset-css"
     :class="[
       { '--is-open': hasListOpened, '--disabled': disabled, '--block': block },
       props.class,
diff --git a/packages/lib/components/MazSlider.vue b/packages/lib/components/MazSlider.vue
index a264d060d0..43b0e2140c 100644
--- a/packages/lib/components/MazSlider.vue
+++ b/packages/lib/components/MazSlider.vue
@@ -119,7 +119,7 @@ async function buildComponent(emitValue?: boolean) {
   await calcPos()
   await nextTick()
 
-  for (const [index, _value] of computedValue.value.entries()) {
+  for (const [index] of computedValue.value.entries()) {
     setBtnDividers(index)
   }
 }
@@ -304,7 +304,7 @@ async function handleMousemove(event: MouseEvent | TouchEvent) {
   <!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->
   <div
     :style="[wrapperStyle, { fontSize: size }]"
-    class="m-slider"
+    class="m-slider m-reset-css"
     role="button"
     tabindex="-1"
     :class="[`m-slider--${color}`]"
diff --git a/packages/lib/components/MazSpinner.vue b/packages/lib/components/MazSpinner.vue
index 145074a809..601c442667 100644
--- a/packages/lib/components/MazSpinner.vue
+++ b/packages/lib/components/MazSpinner.vue
@@ -32,7 +32,7 @@ const {
     y="0px"
     viewBox="0 0 50 50"
     xml:space="preserve"
-    class="m-spinner"
+    class="m-spinner m-reset-css"
     :class="`m-spinner--${color}`"
     style="enable-background: new 0 0 50 50"
   >
diff --git a/packages/lib/components/MazStepper.vue b/packages/lib/components/MazStepper.vue
index d7453c0063..8b71631dc3 100644
--- a/packages/lib/components/MazStepper.vue
+++ b/packages/lib/components/MazStepper.vue
@@ -27,7 +27,11 @@ const props = withDefaults(defineProps<Props>(), {
   steps: undefined,
   color: 'primary',
 })
-const emits = defineEmits<(name: 'update:model-value', value: number) => void>()
+
+const emits = defineEmits<{
+  'update:model-value': [value: number]
+}>()
+
 const MazIcon = defineAsyncComponent(() => import('./MazIcon.vue'))
 const MazExpandAnimation = defineAsyncComponent(() => import('./MazExpandAnimation.vue'))
 const CheckCircleIcon = defineAsyncComponent(() => import('./../icons/check-circle.svg'))
@@ -166,7 +170,7 @@ function isLastStep(step: number): boolean {
 </script>
 
 <template>
-  <div class="m-stepper" :style="[{ '--round-step-bg-color': roundStepBgColor, '--round-step-text-color': roundStepTextColor }]">
+  <div class="m-stepper m-reset-css" :style="[{ '--round-step-bg-color': roundStepBgColor, '--round-step-text-color': roundStepTextColor }]">
     <template v-for="step in stepCount" :key="step">
       <button
         v-if="hasDataForStep('title', step)"
diff --git a/packages/lib/components/MazSwitch.vue b/packages/lib/components/MazSwitch.vue
index 8032a90556..5c5061a818 100644
--- a/packages/lib/components/MazSwitch.vue
+++ b/packages/lib/components/MazSwitch.vue
@@ -108,7 +108,7 @@ function onFocus(event: FocusEvent) {
 <template>
   <label
     :for="instanceId"
-    class="m-switch"
+    class="m-switch m-reset-css"
     :class="[{ '--is-disabled': disabled }, props.class]"
     role="switch"
     :style="[style, { '--switch-color': bgColorClassVar }]"
diff --git a/packages/lib/components/MazTable.vue b/packages/lib/components/MazTable.vue
index 7b52416238..14472b0d44 100644
--- a/packages/lib/components/MazTable.vue
+++ b/packages/lib/components/MazTable.vue
@@ -465,8 +465,9 @@ function getNormalizedRows(): T[] {
 
 function sortColumn(columnIndex: number) {
   if (columnIndex === sortedColumnIndex.value) {
+    const sortTypeValue = sortType.value === 'DESC' ? 'ASC' : undefined
     sortType.value
-        = sortType.value === undefined ? 'DESC' : sortType.value === 'DESC' ? 'ASC' : undefined
+        = sortType.value === undefined ? 'DESC' : sortTypeValue
   }
   else {
     sortType.value = 'DESC'
@@ -523,7 +524,7 @@ onBeforeMount(() => {
 </script>
 
 <template>
-  <div class="m-table" :class="{ '--has-header': hasHeader }">
+  <div class="m-table m-reset-css" :class="{ '--has-header': hasHeader }">
     <div v-if="hasHeader" class="m-table-header">
       <div v-if="title || $slots.title" class="m-table-spacer">
         <slot name="title">
diff --git a/packages/lib/components/MazTableCell.vue b/packages/lib/components/MazTableCell.vue
index ea1d59335a..f324706aa6 100644
--- a/packages/lib/components/MazTableCell.vue
+++ b/packages/lib/components/MazTableCell.vue
@@ -6,7 +6,7 @@ const { size } = injectStrict<MazTableProvide>(mazTableKey)
 </script>
 
 <template>
-  <td class="m-table-cell" :class="[`--${size}`]">
+  <td class="m-table-cell  m-reset-css" :class="[`--${size}`]">
     <slot />
   </td>
 </template>
diff --git a/packages/lib/components/MazTableRow.vue b/packages/lib/components/MazTableRow.vue
index e544ba6313..1c9db17a13 100644
--- a/packages/lib/components/MazTableRow.vue
+++ b/packages/lib/components/MazTableRow.vue
@@ -13,7 +13,7 @@ const { hoverable, backgroundEven, backgroundOdd } = injectStrict<MazTableProvid
 
 <template>
   <tr
-    class="m-table-row"
+    class="m-table-row m-reset-css"
     :class="{
       '--hoverable': hoverable && !noHoverable,
       '--background-odd': backgroundOdd,
diff --git a/packages/lib/components/MazTableTitle.vue b/packages/lib/components/MazTableTitle.vue
index 8fc9a8f70d..ab1be62c92 100644
--- a/packages/lib/components/MazTableTitle.vue
+++ b/packages/lib/components/MazTableTitle.vue
@@ -6,7 +6,7 @@ const { size } = injectStrict<MazTableProvide>('maz-table')
 </script>
 
 <template>
-  <th class="m-table-title" :class="[`--${size}`]">
+  <th class="m-table-title m-reset-css" :class="[`--${size}`]">
     <slot />
   </th>
 </template>
diff --git a/packages/lib/components/MazTabs.vue b/packages/lib/components/MazTabs.vue
index 857269c6b8..faf6c1d95c 100644
--- a/packages/lib/components/MazTabs.vue
+++ b/packages/lib/components/MazTabs.vue
@@ -8,12 +8,13 @@ export interface Props {
 
 const props = defineProps<Props>()
 
-const emits = defineEmits</**
-                           * Emitted when the selected tab change
-                           * @property {number} newValue new value set
-                           */
-  (event: 'update:model-value', index: number) => void
->()
+const emits = defineEmits<{
+  /**
+   * Emitted when the selected tab change
+   * @property {number} newValue new value set
+   */
+  'update:model-value': [value: number]
+}>()
 
 const localValue = ref(1)
 
@@ -43,7 +44,7 @@ provide<MazTabsProvide>('maz-tabs', {
 </script>
 
 <template>
-  <div class="m-tabs">
+  <div class="m-tabs m-reset-css">
     <slot />
   </div>
 </template>
diff --git a/packages/lib/components/MazTabsBar.vue b/packages/lib/components/MazTabsBar.vue
index 56d3cc375f..2006bf4bf5 100644
--- a/packages/lib/components/MazTabsBar.vue
+++ b/packages/lib/components/MazTabsBar.vue
@@ -192,7 +192,7 @@ onMounted(() => {
 <template>
   <div
     ref="tabsBarRef"
-    class="m-tabs-bar"
+    class="m-tabs-bar m-reset-css"
     :class="{
       '--block': block,
       '--elevation': !noElevation,
@@ -245,7 +245,7 @@ onMounted(() => {
 </template>
 
 <style lang="postcss" scoped>
-  .m-tabs-bar {
+.m-tabs-bar {
   @apply maz-relative maz-inline-flex maz-max-w-full maz-gap-1 maz-overflow-x-auto maz-rounded maz-p-2 maz-align-top maz-bg-color dark:maz-border dark:maz-border-color-light;
 
   &.--elevation {
diff --git a/packages/lib/components/MazTabsContent.vue b/packages/lib/components/MazTabsContent.vue
index af78434829..5cf89619ec 100644
--- a/packages/lib/components/MazTabsContent.vue
+++ b/packages/lib/components/MazTabsContent.vue
@@ -25,7 +25,7 @@ watch(
 </script>
 
 <template>
-  <div class="m-tabs-content maz-relative" :class="{ 'maz-overflow-hidden': hideOverflow }">
+  <div class="m-tabs-content maz-relative m-reset-css" :class="{ 'maz-overflow-hidden': hideOverflow }">
     <slot />
   </div>
 </template>
diff --git a/packages/lib/components/MazTabsContentItem.vue b/packages/lib/components/MazTabsContentItem.vue
index 71c726d2ca..b855b2d0bf 100644
--- a/packages/lib/components/MazTabsContentItem.vue
+++ b/packages/lib/components/MazTabsContentItem.vue
@@ -33,7 +33,7 @@ const isCurrentTab = computed(() => {
 
 <template>
   <Transition :name="transitionName">
-    <div v-show="isCurrentTab" ref="MazTabsContentItem" class="m-tabs-content-item">
+    <div v-show="isCurrentTab" ref="MazTabsContentItem" class="m-tabs-content-item m-reset-css">
       <slot />
     </div>
   </Transition>
diff --git a/packages/lib/components/MazTextarea.vue b/packages/lib/components/MazTextarea.vue
index 6dab02190d..62ffc22754 100644
--- a/packages/lib/components/MazTextarea.vue
+++ b/packages/lib/components/MazTextarea.vue
@@ -210,7 +210,7 @@ const hasBorderStyle = computed(() => borderStyle.value !== '--default-border')
 
 <template>
   <label
-    class="m-textarea"
+    class="m-textarea m-reset-css"
     :for="instanceId"
     :class="[
       {
diff --git a/packages/lib/components/MazTransitionExpand.vue b/packages/lib/components/MazTransitionExpand.vue
index 4d209f1c78..95f3d29da0 100644
--- a/packages/lib/components/MazTransitionExpand.vue
+++ b/packages/lib/components/MazTransitionExpand.vue
@@ -64,7 +64,7 @@ function leave(element: HTMLElement) {
 
 <template>
   <TransitionGroup
-    class="m-transition-expand"
+    class="m-transition-expand m-reset-css"
     name="maz-expand"
     tag="div"
     @enter="(el: Element) => enter(el as HTMLElement)"
diff --git a/packages/lib/css/animation.css b/packages/lib/css/animation.css
index 20ac2192c1..fd5fc7a0dc 100644
--- a/packages/lib/css/animation.css
+++ b/packages/lib/css/animation.css
@@ -1,187 +1,189 @@
-.maz-scale-enter-active,
-.maz-scale-leave-active {
-  opacity: 1;
-  z-index: 1;
-  transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
-}
-
-.maz-scale-enter-from,
-.maz-scale-leave-to {
-  opacity: 0.4;
-  z-index: 1;
-  transform: scale(0);
-}
-
-.maz-scale-fade-enter-active,
-.maz-scale-fade-leave-active {
-  opacity: 1;
-  z-index: 1;
-  transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
-}
-
-.maz-scale-fade-enter-from,
-.maz-scale-fade-leave-to {
-  opacity: 0;
-  z-index: 1;
-  transform: scale(0.5);
-}
-
-.maz-scale-loading-enter-active,
-.maz-scale-loading-leave-active {
-  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
-  opacity: 1;
-}
+@layer maz-ui-animations {
+  .maz-scale-enter-active,
+  .maz-scale-leave-active {
+    opacity: 1;
+    z-index: 1;
+    transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  }
 
-.maz-scale-loading-enter-active .app-loader__content,
-.maz-scale-loading-leave-active .app-loader__content {
-  opacity: 1;
-  z-index: 1;
-  transform: scale(1);
-  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
-}
+  .maz-scale-enter-from,
+  .maz-scale-leave-to {
+    opacity: 0.4;
+    z-index: 1;
+    transform: scale(0);
+  }
 
-.maz-scale-loading-enter-from .app-loader__content,
-.maz-scale-loading-leave-to .app-loader__content {
-  opacity: 0.4;
-  z-index: 1;
-  transform: scale(0);
-}
+  .maz-scale-fade-enter-active,
+  .maz-scale-fade-leave-active {
+    opacity: 1;
+    z-index: 1;
+    transition: all 200ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  }
 
-.maz-scale-loading-enter-from,
-.maz-scale-loading-leave-to {
-  transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
-  opacity: 0;
-}
+  .maz-scale-fade-enter-from,
+  .maz-scale-fade-leave-to {
+    opacity: 0;
+    z-index: 1;
+    transform: scale(0.5);
+  }
 
-/** Slide vertical animation  **/
-.maz-slidevnext-leave-active,
-.maz-slidevnext-enter-active,
-.maz-slidevprev-leave-active,
-.maz-slidevprev-enter-active {
-  position: absolute;
-  transition: all 200ms;
-}
+  .maz-scale-loading-enter-active,
+  .maz-scale-loading-leave-active {
+    transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+    opacity: 1;
+  }
 
-.maz-slidevnext-enter-from,
-.maz-slidevprev-leave-to {
-  transform: translateY(100%);
-  opacity: 0;
-}
+  .maz-scale-loading-enter-active .app-loader__content,
+  .maz-scale-loading-leave-active .app-loader__content {
+    opacity: 1;
+    z-index: 1;
+    transform: scale(1);
+    transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+  }
 
-.maz-slidevnext-leave-to,
-.maz-slidevprev-enter-from {
-  transform: translateY(-100%);
-  opacity: 0;
-}
+  .maz-scale-loading-enter-from .app-loader__content,
+  .maz-scale-loading-leave-to .app-loader__content {
+    opacity: 0.4;
+    z-index: 1;
+    transform: scale(0);
+  }
 
-.maz-slide-enter-active,
-.maz-slide-leave-active {
-  opacity: 1;
-  z-index: 998;
-  transition: all 200ms ease-in-out;
-  transform: translateY(0);
-}
+  .maz-scale-loading-enter-from,
+  .maz-scale-loading-leave-to {
+    transition: all 500ms cubic-bezier(0.4, 0.52, 0.26, 0.9);
+    opacity: 0;
+  }
 
-.maz-slide-enter-from,
-.maz-slide-leave-to {
-  opacity: 0;
-  z-index: 998;
-  transform: translateY(-20px);
-}
+  /** Slide vertical animation  **/
+  .maz-slidevnext-leave-active,
+  .maz-slidevnext-enter-active,
+  .maz-slidevprev-leave-active,
+  .maz-slidevprev-enter-active {
+    position: absolute;
+    transition: all 200ms;
+  }
 
-/** Slide animation **/
-.maz-slideinvert-enter-active,
-.maz-slideinvert-leave-active {
-  opacity: 1;
-  z-index: 998;
-  transition: all 200ms ease-in-out;
-  transform: translateY(0);
-}
+  .maz-slidevnext-enter-from,
+  .maz-slidevprev-leave-to {
+    transform: translateY(100%);
+    opacity: 0;
+  }
 
-.maz-slideinvert-enter-from,
-.maz-slideinvert-leave-to {
-  opacity: 0;
-  z-index: 998;
-  transform: translateY(40px);
-}
+  .maz-slidevnext-leave-to,
+  .maz-slidevprev-enter-from {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
 
-.maz-tags-enter-active,
-.maz-tags-leave-active {
-  transition: all 200ms ease-in-out;
-  opacity: 1;
-  transform: translateX(0);
-}
+  .maz-slide-enter-active,
+  .maz-slide-leave-active {
+    opacity: 1;
+    z-index: 998;
+    transition: all 200ms ease-in-out;
+    transform: translateY(0);
+  }
 
-.maz-tags-enter-from,
-.maz-tags-leave-to {
-  opacity: 0;
-  transition: all 200ms ease-in-out;
-  transform: translateX(-100%);
-}
+  .maz-slide-enter-from,
+  .maz-slide-leave-to {
+    opacity: 0;
+    z-index: 998;
+    transform: translateY(-20px);
+  }
 
-.maz-tags-invert-enter-active,
-.maz-tags-invert-leave-active {
-  opacity: 1;
-  transition:
-    transform 200ms,
-    opacity 200ms;
-  transform: translateX(0);
-}
+  /** Slide animation **/
+  .maz-slideinvert-enter-active,
+  .maz-slideinvert-leave-active {
+    opacity: 1;
+    z-index: 998;
+    transition: all 200ms ease-in-out;
+    transform: translateY(0);
+  }
 
-.maz-tags-invert-enter-from,
-.maz-tags-invert-leave-to {
-  opacity: 0;
-  transform: translateX(100%);
-}
+  .maz-slideinvert-enter-from,
+  .maz-slideinvert-leave-to {
+    opacity: 0;
+    z-index: 998;
+    transform: translateY(40px);
+  }
 
-.maz-expand-enter-active,
-.maz-expand-leave-active {
-  transition: all 200ms ease-in-out;
-  transition-property: opacity, height;
-  overflow: hidden;
-}
+  .maz-tags-enter-active,
+  .maz-tags-leave-active {
+    transition: all 200ms ease-in-out;
+    opacity: 1;
+    transform: translateX(0);
+  }
 
-.maz-expand-enter-from,
-.maz-expand-leave-to {
-  height: 0;
-  opacity: 0;
-}
+  .maz-tags-enter-from,
+  .maz-tags-leave-to {
+    opacity: 0;
+    transition: all 200ms ease-in-out;
+    transform: translateX(-100%);
+  }
 
-/**
-* Tabs Transisiton
-*/
-.maz-tab-transition {
-  &-enter-from {
-    transform: translate(100%, 0);
+  .maz-tags-invert-enter-active,
+  .maz-tags-invert-leave-active {
+    opacity: 1;
+    transition:
+      transform 200ms,
+      opacity 200ms;
+    transform: translateX(0);
   }
 
-  &-leave,
-  &-leave-active {
-    position: absolute !important;
-    top: 0;
+  .maz-tags-invert-enter-from,
+  .maz-tags-invert-leave-to {
+    opacity: 0;
+    transform: translateX(100%);
   }
 
-  &-leave-to {
-    position: absolute !important;
-    transform: translate(-100%, 0);
+  .maz-expand-enter-active,
+  .maz-expand-leave-active {
+    transition: all 200ms ease-in-out;
+    transition-property: opacity, height;
+    overflow: hidden;
   }
-}
 
-.maz-tab-reverse-transition {
-  &-enter-from {
-    transform: translate(-100%, 0);
+  .maz-expand-enter-from,
+  .maz-expand-leave-to {
+    height: 0;
+    opacity: 0;
   }
 
-  &-leave,
-  &-leave-active {
-    position: absolute !important;
-    top: 0;
+  /**
+  * Tabs Transisiton
+  */
+  .maz-tab-transition {
+    &-enter-from {
+      transform: translate(100%, 0);
+    }
+
+    &-leave,
+    &-leave-active {
+      position: absolute !important;
+      top: 0;
+    }
+
+    &-leave-to {
+      position: absolute !important;
+      transform: translate(-100%, 0);
+    }
   }
 
-  &-leave,
-  &-leave-to {
-    top: 0;
-    position: absolute !important;
-    transform: translate(100%, 0);
+  .maz-tab-reverse-transition {
+    &-enter-from {
+      transform: translate(-100%, 0);
+    }
+
+    &-leave,
+    &-leave-active {
+      position: absolute !important;
+      top: 0;
+    }
+
+    &-leave,
+    &-leave-to {
+      top: 0;
+      position: absolute !important;
+      transform: translate(100%, 0);
+    }
   }
 }
diff --git a/packages/lib/css/base-variables.css b/packages/lib/css/base-variables.css
index 803f733117..edf728d5ad 100644
--- a/packages/lib/css/base-variables.css
+++ b/packages/lib/css/base-variables.css
@@ -1,6 +1,8 @@
-:root {
-  --maz-color-white: hsl(0deg 0% 100%);
-  --maz-color-white-contrast: hsl(0deg 0% 0%);
-  --maz-color-black: hsl(0deg 0% 0%);
-  --maz-color-black-contrast: hsl(0deg 0% 100%);
+@layer maz-ui-theme {
+  :root {
+    --maz-color-white: hsl(0deg 0% 100%);
+    --maz-color-white-contrast: hsl(0deg 0% 0%);
+    --maz-color-black: hsl(0deg 0% 0%);
+    --maz-color-black-contrast: hsl(0deg 0% 100%);
+  }
 }
diff --git a/packages/lib/css/dark-theme.css b/packages/lib/css/dark-theme.css
index fd41e37d2c..db63efebf2 100644
--- a/packages/lib/css/dark-theme.css
+++ b/packages/lib/css/dark-theme.css
@@ -1,31 +1,33 @@
-:root {
-  /* TODO: Invert text variables in V4 */
-  --maz-color-text: var(--maz-color-text-dark);
-  --maz-color-muted: var(--maz-color-muted-light);
-  --maz-color-bg-light: var(--maz-bg-color-light-light);
-  --maz-color-bg-lighter: var(--maz-bg-color-light-lighter);
-  --maz-color-bg: var(--maz-bg-color-light);
-  --maz-color-bg-dark: var(--maz-bg-color-light-dark);
-  --maz-color-bg-darker: var(--maz-bg-color-light-darker);
+@layer maz-ui-theme {
+  :root {
+    /* TODO: Invert text variables in V4 */
+    --maz-color-text: var(--maz-color-text-dark);
+    --maz-color-muted: var(--maz-color-muted-light);
+    --maz-color-bg-light: var(--maz-bg-color-light-light);
+    --maz-color-bg-lighter: var(--maz-bg-color-light-lighter);
+    --maz-color-bg: var(--maz-bg-color-light);
+    --maz-color-bg-dark: var(--maz-bg-color-light-dark);
+    --maz-color-bg-darker: var(--maz-bg-color-light-darker);
 
-  /* THEME */
-  --maz-color-bg-theme: var(--maz-bg-color-dark);
-  --maz-color-bg-theme-hover: var(--maz-bg-color-dark-lighter);
-}
+    /* THEME */
+    --maz-color-bg-theme: var(--maz-bg-color-dark);
+    --maz-color-bg-theme-hover: var(--maz-bg-color-dark-lighter);
+  }
 
-[class~='dark'] {
-  /* USAGE */
+  [class~='dark'] {
+    /* USAGE */
 
-  /* TODO: Invert text variables in V4 */
-  --maz-color-text: var(--maz-color-text-light);
-  --maz-color-muted: var(--maz-color-muted-dark);
-  --maz-color-bg-light: var(--maz-bg-color-dark-light);
-  --maz-color-bg-lighter: var(--maz-bg-color-dark-lighter);
-  --maz-color-bg: var(--maz-bg-color-dark);
-  --maz-color-bg-dark: var(--maz-bg-color-dark-dark);
-  --maz-color-bg-darker: var(--maz-bg-color-dark-darker);
+    /* TODO: Invert text variables in V4 */
+    --maz-color-text: var(--maz-color-text-light);
+    --maz-color-muted: var(--maz-color-muted-dark);
+    --maz-color-bg-light: var(--maz-bg-color-dark-light);
+    --maz-color-bg-lighter: var(--maz-bg-color-dark-lighter);
+    --maz-color-bg: var(--maz-bg-color-dark);
+    --maz-color-bg-dark: var(--maz-bg-color-dark-dark);
+    --maz-color-bg-darker: var(--maz-bg-color-dark-darker);
 
-  /* THEME */
-  --maz-color-bg-theme: var(--maz-bg-color-light);
-  --maz-color-bg-theme-hover: var(--maz-bg-color-light-darker);
+    /* THEME */
+    --maz-color-bg-theme: var(--maz-bg-color-light);
+    --maz-color-bg-theme-hover: var(--maz-bg-color-light-darker);
+  }
 }
diff --git a/packages/lib/css/index.css b/packages/lib/css/index.css
index 6058dfec6b..7507337e30 100644
--- a/packages/lib/css/index.css
+++ b/packages/lib/css/index.css
@@ -1,3 +1,4 @@
+@layer maz-ui-reset, maz-ui-theme, maz-ui-animations, maz-ui-utilities;
 @import './reset.css';
 @import './base-variables.css';
 @import './maz-ui-variables.css';
diff --git a/packages/lib/css/maz-ui-variables.css b/packages/lib/css/maz-ui-variables.css
index c19e26c326..2dcc3e3785 100644
--- a/packages/lib/css/maz-ui-variables.css
+++ b/packages/lib/css/maz-ui-variables.css
@@ -1,112 +1,114 @@
-:root {
-  --maz-color-primary-50: hsl(210deg 100% 95%);
-  --maz-color-primary-100: hsl(210deg 100% 87%);
-  --maz-color-primary-200: hsl(210deg 100% 79%);
-  --maz-color-primary-300: hsl(210deg 100% 71%);
-  --maz-color-primary-400: hsl(210deg 100% 64%);
-  --maz-color-primary: hsl(210deg 100% 56%);
-  --maz-color-primary-600: hsl(210deg 79% 46%);
-  --maz-color-primary-700: hsl(210deg 78% 36%);
-  --maz-color-primary-800: hsl(210deg 79% 26%);
-  --maz-color-primary-900: hsl(210deg 79% 17%);
-  --maz-color-primary-alpha: hsl(210deg 100% 56% / 60%);
-  --maz-color-primary-alpha-20: hsl(210deg 100% 56% / 20%);
-  --maz-color-primary-alpha-10: hsl(210deg 100% 56% / 10%);
-  --maz-color-primary-alpha-05: hsl(210deg 100% 56% / 05%);
-  --maz-color-primary-contrast: hsl(0deg 0% 100%);
-  --maz-color-secondary-50: hsl(164deg 65% 93%);
-  --maz-color-secondary-100: hsl(164deg 66% 84%);
-  --maz-color-secondary-200: hsl(164deg 66% 75%);
-  --maz-color-secondary-300: hsl(164deg 66% 65%);
-  --maz-color-secondary-400: hsl(164deg 66% 56%);
-  --maz-color-secondary: hsl(164deg 76% 46%);
-  --maz-color-secondary-600: hsl(164deg 76% 38%);
-  --maz-color-secondary-700: hsl(164deg 77% 30%);
-  --maz-color-secondary-800: hsl(164deg 77% 22%);
-  --maz-color-secondary-900: hsl(164deg 77% 14%);
-  --maz-color-secondary-alpha: hsl(164deg 76% 46% / 60%);
-  --maz-color-secondary-alpha-20: hsl(164deg 76% 46% / 20%);
-  --maz-color-secondary-alpha-10: hsl(164deg 76% 46% / 10%);
-  --maz-color-secondary-alpha-05: hsl(164deg 76% 46% / 05%);
-  --maz-color-secondary-contrast: hsl(0deg 0% 100%);
-  --maz-color-info-50: hsl(188deg 53% 93%);
-  --maz-color-info-100: hsl(188deg 54% 82%);
-  --maz-color-info-200: hsl(188deg 53% 72%);
-  --maz-color-info-300: hsl(188deg 53% 61%);
-  --maz-color-info-400: hsl(188deg 53% 51%);
-  --maz-color-info: hsl(188deg 78% 41%);
-  --maz-color-info-600: hsl(188deg 78% 34%);
-  --maz-color-info-700: hsl(188deg 78% 26%);
-  --maz-color-info-800: hsl(188deg 78% 19%);
-  --maz-color-info-900: hsl(188deg 77% 12%);
-  --maz-color-info-alpha: hsl(188deg 78% 41% / 60%);
-  --maz-color-info-alpha-20: hsl(188deg 78% 41% / 20%);
-  --maz-color-info-alpha-10: hsl(188deg 78% 41% / 10%);
-  --maz-color-info-alpha-05: hsl(188deg 78% 41% / 05%);
-  --maz-color-info-contrast: hsl(0deg 0% 100%);
-  --maz-color-success-50: hsl(80deg 63% 94%);
-  --maz-color-success-100: hsl(80deg 61% 85%);
-  --maz-color-success-200: hsl(80deg 60% 76%);
-  --maz-color-success-300: hsl(80deg 61% 68%);
-  --maz-color-success-400: hsl(80deg 61% 59%);
-  --maz-color-success: hsl(80deg 61% 50%);
-  --maz-color-success-600: hsl(80deg 61% 41%);
-  --maz-color-success-700: hsl(80deg 60% 33%);
-  --maz-color-success-800: hsl(80deg 60% 24%);
-  --maz-color-success-900: hsl(80deg 61% 15%);
-  --maz-color-success-alpha: hsl(80deg 61% 50% / 60%);
-  --maz-color-success-alpha-20: hsl(80deg 61% 50% / 20%);
-  --maz-color-success-alpha-10: hsl(80deg 61% 50% / 10%);
-  --maz-color-success-alpha-05: hsl(80deg 61% 50% / 05%);
-  --maz-color-success-contrast: hsl(0deg 0% 100%);
-  --maz-color-warning-50: hsl(40deg 100% 95%);
-  --maz-color-warning-100: hsl(40deg 97% 88%);
-  --maz-color-warning-200: hsl(40deg 98% 81%);
-  --maz-color-warning-300: hsl(40deg 97% 73%);
-  --maz-color-warning-400: hsl(40deg 98% 66%);
-  --maz-color-warning: hsl(40deg 97% 59%);
-  --maz-color-warning-600: hsl(40deg 68% 49%);
-  --maz-color-warning-700: hsl(40deg 67% 38%);
-  --maz-color-warning-800: hsl(40deg 68% 28%);
-  --maz-color-warning-900: hsl(40deg 67% 18%);
-  --maz-color-warning-alpha: hsl(40deg 97% 59% / 60%);
-  --maz-color-warning-alpha-20: hsl(40deg 97% 59% / 20%);
-  --maz-color-warning-alpha-10: hsl(40deg 97% 59% / 10%);
-  --maz-color-warning-alpha-05: hsl(40deg 97% 59% / 05%);
-  --maz-color-warning-contrast: hsl(210deg 8% 14%);
-  --maz-color-danger-50: hsl(1deg 100% 96%);
-  --maz-color-danger-100: hsl(1deg 100% 91%);
-  --maz-color-danger-200: hsl(2deg 100% 86%);
-  --maz-color-danger-300: hsl(1deg 100% 81%);
-  --maz-color-danger-400: hsl(1deg 100% 76%);
-  --maz-color-danger: hsl(1deg 100% 71%);
-  --maz-color-danger-600: hsl(1deg 58% 58%);
-  --maz-color-danger-700: hsl(1deg 41% 46%);
-  --maz-color-danger-800: hsl(1deg 42% 34%);
-  --maz-color-danger-900: hsl(1deg 41% 21%);
-  --maz-color-danger-alpha: hsl(1deg 100% 71% / 60%);
-  --maz-color-danger-alpha-20: hsl(1deg 100% 71% / 20%);
-  --maz-color-danger-alpha-10: hsl(1deg 100% 71% / 10%);
-  --maz-color-danger-alpha-05: hsl(1deg 100% 71% / 05%);
-  --maz-color-danger-contrast: hsl(0deg 0% 100%);
-  --maz-color-text-light: hsl(0deg 0% 85%);
-  --maz-color-muted-light: hsl(0deg 0% 0% / 54%);
-  --maz-color-text-dark: hsl(210deg 8% 14%);
-  --maz-color-muted-dark: hsl(0deg 0% 89% / 54%);
-  --maz-bg-overlay: hsl(0deg 0% 0% / 30%);
-  --maz-bg-color-light-lighter: hsl(0deg 0% 97%);
-  --maz-bg-color-light-light: hsl(0deg 0% 94%);
-  --maz-bg-color-light: hsl(0deg 0% 100%);
-  --maz-bg-color-light-dark: hsl(0deg 0% 91%);
-  --maz-bg-color-light-darker: hsl(0deg 0% 88%);
-  --maz-bg-color-dark-lighter: hsl(238deg 17% 25%);
-  --maz-bg-color-dark-light: hsl(237deg 17% 20%);
-  --maz-bg-color-dark: hsl(235deg 16% 15%);
-  --maz-bg-color-dark-dark: hsl(238deg 16% 12%);
-  --maz-bg-color-dark-darker: hsl(238deg 16% 7%);
-  --maz-border-width: 0.063rem;
-  --maz-border-color: hsl(220deg 13.04% 90.98%);
-  --maz-border-radius: 0.7rem;
-  --maz-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell,
-    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+@layer maz-ui-theme {
+  :root {
+    --maz-color-primary-50: hsl(210deg 100% 95%);
+    --maz-color-primary-100: hsl(210deg 100% 87%);
+    --maz-color-primary-200: hsl(210deg 100% 79%);
+    --maz-color-primary-300: hsl(210deg 100% 71%);
+    --maz-color-primary-400: hsl(210deg 100% 64%);
+    --maz-color-primary: hsl(210deg 100% 56%);
+    --maz-color-primary-600: hsl(210deg 79% 46%);
+    --maz-color-primary-700: hsl(210deg 78% 36%);
+    --maz-color-primary-800: hsl(210deg 79% 26%);
+    --maz-color-primary-900: hsl(210deg 79% 17%);
+    --maz-color-primary-alpha: hsl(210deg 100% 56% / 60%);
+    --maz-color-primary-alpha-20: hsl(210deg 100% 56% / 20%);
+    --maz-color-primary-alpha-10: hsl(210deg 100% 56% / 10%);
+    --maz-color-primary-alpha-05: hsl(210deg 100% 56% / 05%);
+    --maz-color-primary-contrast: hsl(0deg 0% 100%);
+    --maz-color-secondary-50: hsl(164deg 65% 93%);
+    --maz-color-secondary-100: hsl(164deg 66% 84%);
+    --maz-color-secondary-200: hsl(164deg 66% 75%);
+    --maz-color-secondary-300: hsl(164deg 66% 65%);
+    --maz-color-secondary-400: hsl(164deg 66% 56%);
+    --maz-color-secondary: hsl(164deg 76% 46%);
+    --maz-color-secondary-600: hsl(164deg 76% 38%);
+    --maz-color-secondary-700: hsl(164deg 77% 30%);
+    --maz-color-secondary-800: hsl(164deg 77% 22%);
+    --maz-color-secondary-900: hsl(164deg 77% 14%);
+    --maz-color-secondary-alpha: hsl(164deg 76% 46% / 60%);
+    --maz-color-secondary-alpha-20: hsl(164deg 76% 46% / 20%);
+    --maz-color-secondary-alpha-10: hsl(164deg 76% 46% / 10%);
+    --maz-color-secondary-alpha-05: hsl(164deg 76% 46% / 05%);
+    --maz-color-secondary-contrast: hsl(0deg 0% 100%);
+    --maz-color-info-50: hsl(188deg 53% 93%);
+    --maz-color-info-100: hsl(188deg 54% 82%);
+    --maz-color-info-200: hsl(188deg 53% 72%);
+    --maz-color-info-300: hsl(188deg 53% 61%);
+    --maz-color-info-400: hsl(188deg 53% 51%);
+    --maz-color-info: hsl(188deg 78% 41%);
+    --maz-color-info-600: hsl(188deg 78% 34%);
+    --maz-color-info-700: hsl(188deg 78% 26%);
+    --maz-color-info-800: hsl(188deg 78% 19%);
+    --maz-color-info-900: hsl(188deg 77% 12%);
+    --maz-color-info-alpha: hsl(188deg 78% 41% / 60%);
+    --maz-color-info-alpha-20: hsl(188deg 78% 41% / 20%);
+    --maz-color-info-alpha-10: hsl(188deg 78% 41% / 10%);
+    --maz-color-info-alpha-05: hsl(188deg 78% 41% / 05%);
+    --maz-color-info-contrast: hsl(0deg 0% 100%);
+    --maz-color-success-50: hsl(80deg 63% 94%);
+    --maz-color-success-100: hsl(80deg 61% 85%);
+    --maz-color-success-200: hsl(80deg 60% 76%);
+    --maz-color-success-300: hsl(80deg 61% 68%);
+    --maz-color-success-400: hsl(80deg 61% 59%);
+    --maz-color-success: hsl(80deg 61% 50%);
+    --maz-color-success-600: hsl(80deg 61% 41%);
+    --maz-color-success-700: hsl(80deg 60% 33%);
+    --maz-color-success-800: hsl(80deg 60% 24%);
+    --maz-color-success-900: hsl(80deg 61% 15%);
+    --maz-color-success-alpha: hsl(80deg 61% 50% / 60%);
+    --maz-color-success-alpha-20: hsl(80deg 61% 50% / 20%);
+    --maz-color-success-alpha-10: hsl(80deg 61% 50% / 10%);
+    --maz-color-success-alpha-05: hsl(80deg 61% 50% / 05%);
+    --maz-color-success-contrast: hsl(0deg 0% 100%);
+    --maz-color-warning-50: hsl(40deg 100% 95%);
+    --maz-color-warning-100: hsl(40deg 97% 88%);
+    --maz-color-warning-200: hsl(40deg 98% 81%);
+    --maz-color-warning-300: hsl(40deg 97% 73%);
+    --maz-color-warning-400: hsl(40deg 98% 66%);
+    --maz-color-warning: hsl(40deg 97% 59%);
+    --maz-color-warning-600: hsl(40deg 68% 49%);
+    --maz-color-warning-700: hsl(40deg 67% 38%);
+    --maz-color-warning-800: hsl(40deg 68% 28%);
+    --maz-color-warning-900: hsl(40deg 67% 18%);
+    --maz-color-warning-alpha: hsl(40deg 97% 59% / 60%);
+    --maz-color-warning-alpha-20: hsl(40deg 97% 59% / 20%);
+    --maz-color-warning-alpha-10: hsl(40deg 97% 59% / 10%);
+    --maz-color-warning-alpha-05: hsl(40deg 97% 59% / 05%);
+    --maz-color-warning-contrast: hsl(210deg 8% 14%);
+    --maz-color-danger-50: hsl(1deg 100% 96%);
+    --maz-color-danger-100: hsl(1deg 100% 91%);
+    --maz-color-danger-200: hsl(2deg 100% 86%);
+    --maz-color-danger-300: hsl(1deg 100% 81%);
+    --maz-color-danger-400: hsl(1deg 100% 76%);
+    --maz-color-danger: hsl(1deg 100% 71%);
+    --maz-color-danger-600: hsl(1deg 58% 58%);
+    --maz-color-danger-700: hsl(1deg 41% 46%);
+    --maz-color-danger-800: hsl(1deg 42% 34%);
+    --maz-color-danger-900: hsl(1deg 41% 21%);
+    --maz-color-danger-alpha: hsl(1deg 100% 71% / 60%);
+    --maz-color-danger-alpha-20: hsl(1deg 100% 71% / 20%);
+    --maz-color-danger-alpha-10: hsl(1deg 100% 71% / 10%);
+    --maz-color-danger-alpha-05: hsl(1deg 100% 71% / 05%);
+    --maz-color-danger-contrast: hsl(0deg 0% 100%);
+    --maz-color-text-light: hsl(0deg 0% 85%);
+    --maz-color-muted-light: hsl(0deg 0% 0% / 54%);
+    --maz-color-text-dark: hsl(210deg 8% 14%);
+    --maz-color-muted-dark: hsl(0deg 0% 89% / 54%);
+    --maz-bg-overlay: hsl(0deg 0% 0% / 30%);
+    --maz-bg-color-light-lighter: hsl(0deg 0% 97%);
+    --maz-bg-color-light-light: hsl(0deg 0% 94%);
+    --maz-bg-color-light: hsl(0deg 0% 100%);
+    --maz-bg-color-light-dark: hsl(0deg 0% 91%);
+    --maz-bg-color-light-darker: hsl(0deg 0% 88%);
+    --maz-bg-color-dark-lighter: hsl(238deg 17% 25%);
+    --maz-bg-color-dark-light: hsl(237deg 17% 20%);
+    --maz-bg-color-dark: hsl(235deg 16% 15%);
+    --maz-bg-color-dark-dark: hsl(238deg 16% 12%);
+    --maz-bg-color-dark-darker: hsl(238deg 16% 7%);
+    --maz-border-width: 0.063rem;
+    --maz-border-color: hsl(220deg 13.04% 90.98%);
+    --maz-border-radius: 0.7rem;
+    --maz-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell,
+      'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  }
 }
diff --git a/packages/lib/css/padded-container-vars.css b/packages/lib/css/padded-container-vars.css
index 088f12b19e..f062808b99 100644
--- a/packages/lib/css/padded-container-vars.css
+++ b/packages/lib/css/padded-container-vars.css
@@ -1,14 +1,15 @@
-:root {
-  --maz-container-padding-mobile: 1rem;
-  --maz-container-padding-tablet: 2rem;
-  --maz-container-padding-desktop: 2.5rem;
-  --maz-container-padding-value: var(--maz-container-padding-mobile);
-  --maz-container-width: calc(100% - var(--maz-container-padding-value) * 2);
-  --maz-container-padding: calc(50% - var(--maz-container-width) / 2);
-  --maz-container-max-width: 1440px;
-}
+@layer maz-ui-utilities {
+  :root {
+    --maz-container-padding-mobile: 1rem;
+    --maz-container-padding-tablet: 2rem;
+    --maz-container-padding-desktop: 2.5rem;
+    --maz-container-padding-value: var(--maz-container-padding-mobile);
+    --maz-container-width: calc(100% - var(--maz-container-padding-value) * 2);
+    --maz-container-padding: calc(50% - var(--maz-container-width) / 2);
+    --maz-container-max-width: 1440px;
+  }
 
-/* .maz-padded-container {
+  /* .maz-padded-container {
   width: 100%;
   padding-left: var(--maz-container-padding);
   padding-right: var(--maz-container-padding);
@@ -19,26 +20,27 @@
   }
 } */
 
-/*
+  /*
   Info: 2.5rem = 40px
   ---
   1520px = max-width + (padding-desktop * 2)
   1520px = 1440px + (2.5rem * 2)
 */
-@media only screen and (width >= 1520px) {
-  :root {
-    --maz-container-width: var(--maz-container-max-width);
+  @media only screen and (width >= 1520px) {
+    :root {
+      --maz-container-width: var(--maz-container-max-width);
+    }
   }
-}
 
-@screen mob-l {
-  :root {
-    --maz-container-padding-value: var(--maz-container-padding-tablet);
+  @screen mob-l {
+    :root {
+      --maz-container-padding-value: var(--maz-container-padding-tablet);
+    }
   }
-}
 
-@screen lap-s {
-  :root {
-    --maz-container-padding-value: var(--maz-container-padding-desktop);
+  @screen lap-s {
+    :root {
+      --maz-container-padding-value: var(--maz-container-padding-desktop);
+    }
   }
 }
diff --git a/packages/lib/css/reset.css b/packages/lib/css/reset.css
index 3cf6b196fc..2128a900a7 100644
--- a/packages/lib/css/reset.css
+++ b/packages/lib/css/reset.css
@@ -1,28 +1,40 @@
-*,
-::before,
-::after {
-  border-width: 0;
-  border-style: solid;
-  border-color: currentcolor;
-  box-sizing: border-box;
-}
+@layer maz-ui-reset {
+  .m-reset-css {
+    &,
+    & *,
+    &::before,
+    &::after {
+      border-width: 0;
+      border-style: solid;
+      border-color: currentcolor;
+      box-sizing: border-box;
+    }
 
-button {
-  background-color: transparent;
-}
+    &:is(button),
+    button {
+      background-color: inherit;
+      padding: inherit;
+    }
 
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  color: inherit;
-  margin: 0;
+    button,
+    &:is(button),
+    input,
+    &:is(input),
+    optgroup,
+    &:is(optgroup),
+    select,
+    &:is(select),
+    textarea,
+    &:is(textarea) {
+      font-family: inherit;
+      font-feature-settings: inherit;
+      font-variation-settings: inherit;
+      font-size: 100%;
+      font-weight: inherit;
+      line-height: inherit;
+      letter-spacing: inherit;
+      color: inherit;
+      margin: 0;
+    }
+  }
 }
diff --git a/packages/lib/eslint.config.js b/packages/lib/eslint.config.js
index ef049da9a9..b3ab1d03e4 100644
--- a/packages/lib/eslint.config.js
+++ b/packages/lib/eslint.config.js
@@ -41,6 +41,7 @@ export default antfu(
       'sonarjs/no-empty-function': 'off',
       'sonarjs/cognitive-complexity': 'off',
       'sonarjs/no-hardcoded-credentials': 'off',
+      'sonarjs/no-vue-bypass-sanitization': 'off',
     },
   },
 )
diff --git a/packages/lib/modules/directives/v-fullscreen-img/MazFullscreenImg.vue b/packages/lib/modules/directives/v-fullscreen-img/MazFullscreenImg.vue
index 67ba74abd0..c841a34df5 100644
--- a/packages/lib/modules/directives/v-fullscreen-img/MazFullscreenImg.vue
+++ b/packages/lib/modules/directives/v-fullscreen-img/MazFullscreenImg.vue
@@ -385,7 +385,7 @@ onBeforeUnmount(() => {
   <div
     ref="FullscreenImgElement"
     role="button"
-    class="m-fullscreen-img"
+    class="m-fullscreen-img m-reset-css"
     tabindex="0"
     @click.stop="close"
     @keypress.esc.prevent="close"
diff --git a/packages/lib/modules/plugins/toaster/MazToast.vue b/packages/lib/modules/plugins/toaster/MazToast.vue
index f2d5cedbbc..f398b9b9b9 100755
--- a/packages/lib/modules/plugins/toaster/MazToast.vue
+++ b/packages/lib/modules/plugins/toaster/MazToast.vue
@@ -94,7 +94,7 @@ const actionLoading = ref(false)
 const isActive = ref(false)
 const queueTimer = ref<ReturnType<typeof setTimeout>>()
 
-const containerClassName = `m-toast-container --${positionY.value} --${positionX.value}`
+const containerClassName = `m-toast-container m-reset-css --${positionY.value} --${positionX.value}`
 const selectorContainerClass = `.${containerClassName.replaceAll(' ', '.')}`
 
 const timer = useTimer({
@@ -256,7 +256,7 @@ onMounted(() => {
     <button
       v-show="isActive"
       ref="Toaster"
-      class="m-toast"
+      class="m-toast m-reset-css"
       :class="[
         `--${type}`,
         `--${positionY}`,
@@ -327,8 +327,6 @@ onMounted(() => {
 
 <style lang="postcss">
 .m-toast-container {
-  box-sizing: border-box;
-
   @apply maz-fixed maz-flex maz-flex-col maz-gap-2 maz-p-4;
 
   z-index: 1051;
diff --git a/packages/lib/tailwind.config.ts b/packages/lib/tailwind.config.ts
index d20af1ea50..67885ad324 100644
--- a/packages/lib/tailwind.config.ts
+++ b/packages/lib/tailwind.config.ts
@@ -3,7 +3,6 @@ import type { Config } from 'tailwindcss'
 import tailwindConfigBase from './tailwindcss/tailwind.config'
 
 export default <Config>{
-  mode: 'build',
   presets: [tailwindConfigBase],
   content: {
     files: ['./modules/**/*', './components/**/*', 'tailwindcss/**/*', '!components_tmp/**/*'],
diff --git a/packages/lib/tailwindcss/tailwind.css b/packages/lib/tailwindcss/tailwind.css
index dde4093d76..f6fec1eba3 100644
--- a/packages/lib/tailwindcss/tailwind.css
+++ b/packages/lib/tailwindcss/tailwind.css
@@ -2,9 +2,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-  .maz-cap-f {
-    @apply first-letter:maz-capitalize;
-  }
-}
diff --git a/packages/lib/tailwindcss/variables/utilities.ts b/packages/lib/tailwindcss/variables/utilities.ts
index 1dec64dfea..9740f01471 100644
--- a/packages/lib/tailwindcss/variables/utilities.ts
+++ b/packages/lib/tailwindcss/variables/utilities.ts
@@ -18,4 +18,7 @@ export const utilities = {
     'align-items': 'center',
     'justify-content': 'center',
   },
+  '.cap-f': {
+    '@apply first-letter:maz-capitalize': '',
+  },
 } satisfies CSSRuleObject | CSSRuleObject[]
diff --git a/packages/lib/tests/specs/components/MazCheckList.spec.ts b/packages/lib/tests/specs/components/MazCheckList.spec.ts
index 441a42f415..71de36c350 100644
--- a/packages/lib/tests/specs/components/MazCheckList.spec.ts
+++ b/packages/lib/tests/specs/components/MazCheckList.spec.ts
@@ -100,7 +100,7 @@ describe('mazChecklist', () => {
     await vi.dynamicImportSettled()
     const input = wrapper.findComponent(MazInput)
     await input.setValue('Cherry')
-    const noResults = wrapper.find('span.maz-text-muted')
+    const noResults = wrapper.find('span.no-results-text')
 
     expect(noResults.exists()).toBe(true)
     expect(noResults.text()).toBe('No results found')
diff --git a/packages/lib/tests/specs/components/MazFullscreenLoader.spec.ts b/packages/lib/tests/specs/components/MazFullscreenLoader.spec.ts
index 2afc1e6556..5c48a15f65 100644
--- a/packages/lib/tests/specs/components/MazFullscreenLoader.spec.ts
+++ b/packages/lib/tests/specs/components/MazFullscreenLoader.spec.ts
@@ -38,7 +38,7 @@ describe('given MazFullscreenLoader.vue component', () => {
     expect(spinner.props('color')).toBe(color)
     expect(spinner.props('size')).toBe(size)
 
-    expect(teleportedContent?.innerHTML).toMatchInlineSnapshot(`"<svg data-v-7289c458="" width="2em" height="2em" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve" class="m-spinner m-spinner--secondary" style="enable-background: new 0 0 50 50;"><path data-v-7289c458="" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"></path></svg><span>Contenu personnalisé</span>"`)
+    expect(teleportedContent?.innerHTML).toMatchInlineSnapshot(`"<svg data-v-7289c458="" data-v-78087196="" width="2em" height="2em" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 50 50" xml:space="preserve" class="m-spinner m-reset-css m-spinner--secondary" style="enable-background: new 0 0 50 50;"><path data-v-7289c458="" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z"></path></svg><span data-v-78087196="">Contenu personnalisé</span>"`)
 
     const content = teleportTarget.querySelector('span')
     expect(content?.innerHTML).toBe('Contenu personnalisé')
diff --git a/packages/lib/tests/specs/components/__snapshots__/MazTransitionExpand.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/MazTransitionExpand.spec.ts.snap
index fff6567612..24db50a4d4 100644
--- a/packages/lib/tests/specs/components/__snapshots__/MazTransitionExpand.spec.ts.snap
+++ b/packages/lib/tests/specs/components/__snapshots__/MazTransitionExpand.spec.ts.snap
@@ -1,3 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`components/MazTransitionExpand.vue > should match with the snapshot 1`] = `"<transition-group-stub data-v-e010a2e1="" name="maz-expand" tag="div" appear="false" persisted="false" css="true" class="m-transition-expand"></transition-group-stub>"`;
+exports[`components/MazTransitionExpand.vue > should match with the snapshot 1`] = `"<transition-group-stub data-v-e010a2e1="" name="maz-expand" tag="div" appear="false" persisted="false" css="true" class="m-transition-expand m-reset-css"></transition-group-stub>"`;
diff --git a/packages/lib/tests/specs/components/__snapshots__/maz-input-code.spec.ts.snap b/packages/lib/tests/specs/components/__snapshots__/maz-input-code.spec.ts.snap
index a39a0f0a02..468c1ab907 100644
--- a/packages/lib/tests/specs/components/__snapshots__/maz-input-code.spec.ts.snap
+++ b/packages/lib/tests/specs/components/__snapshots__/maz-input-code.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`mazInputCode > should match with the snapshot 1`] = `
-"<fieldset data-v-757e2ef4="" class="m-input-code --md" style="--input-border-color: var(--maz-color-primary);">
+"<fieldset data-v-757e2ef4="" class="m-input-code m-reset-css --md" style="--input-border-color: var(--maz-color-primary);">
   <div data-v-757e2ef4="" class="m-input-code__wrapper">
     <div data-v-757e2ef4="" class="input-wrapper">
       <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label --><input data-v-757e2ef4="" type="text" minlength="1" maxlength="1" inputmode="numeric" pattern="[0-9]{1}" autocomplete="do-not-autofill">
diff --git a/packages/playground/nuxt.config.ts b/packages/playground/nuxt.config.ts
index 2c8017f3ae..d5e74abc35 100644
--- a/packages/playground/nuxt.config.ts
+++ b/packages/playground/nuxt.config.ts
@@ -53,5 +53,6 @@ export default defineNuxtConfig({
     installVTooltip: {
       position: 'top',
     },
+    injectCss: true,
   },
 })
diff --git a/packages/playground/src/components/TestForm.vue b/packages/playground/src/components/TestForm.vue
index 5735fffdf6..04224d0620 100644
--- a/packages/playground/src/components/TestForm.vue
+++ b/packages/playground/src/components/TestForm.vue
@@ -91,7 +91,7 @@
       :hint="radioError"
       :success="isValidRadio"
     >
-      Switch
+      Radio 1
     </MazRadio>
     <MazRadio
       id="radio2"
@@ -101,7 +101,7 @@
       name="radio"
       :warning="!!radioError"
       :hint="radioError"
-      label="Switch"
+      label="Radio 2"
       :success="isValidRadio"
     />
     <MazRadioButtons
diff --git a/packages/playground/src/css/main.css b/packages/playground/src/css/main.css
index 695c91bad9..d504a59ef2 100644
--- a/packages/playground/src/css/main.css
+++ b/packages/playground/src/css/main.css
@@ -7,3 +7,5 @@ body,
   @apply maz-min-h-screen;
 }
 /* stylelint-enable selector-id-pattern */
+
+
diff --git a/packages/playground/src/pages/index.vue b/packages/playground/src/pages/index.vue
index e6e696d9f5..91c17ed64f 100644
--- a/packages/playground/src/pages/index.vue
+++ b/packages/playground/src/pages/index.vue
@@ -3,6 +3,32 @@
     <div>
       <!-- Start Developping Area - You should not commit anything here to keep this place clean for all others -->
 
+      <!-- <TestForm /> -->
+
+      <MazChecklist
+        v-model="languages"
+        title="Select your languages"
+        :search="{
+          enabled: true,
+          placeholder: 'Search a language',
+          debounce: 300,
+          autoFocus: false,
+        }"
+        :items="languagesOptions"
+      >
+        <template #item="{ item }">
+          <div class="maz-flex maz-w-full maz-items-center maz-justify-between">
+            <span class="maz-capitalize">{{ item.label }}</span>
+            <MazBadge
+              color="theme"
+              outline
+            >
+              {{ item.value }}
+            </MazBadge>
+          </div>
+        </template>
+      </MazChecklist>
+
       <!-- End Developping Area -->
     </div>
 
@@ -20,6 +46,14 @@ import { sleep } from 'maz-ui'
 
 const toast = useToast()
 const wait = useWait()
+const languages = ref<string[]>([])
+const languagesOptions = ref<{ label: string, value: string }[]>([
+  { label: 'French', value: 'fr' },
+  { label: 'English', value: 'en' },
+  { label: 'Spanish', value: 'es' },
+  { label: 'German', value: 'de' },
+  { label: 'Italian', value: 'it' },
+])
 
 onMounted(async () => {
   wait.start('APP_LOADING')
@@ -29,6 +63,7 @@ onMounted(async () => {
 
 toast.message('Votre mot de passe a été mis à jour', {
   position: 'bottom-left',
+  timeout: 10000,
   action: {
     func: () => toast.success('CLICKED'),
     text: 'Button',
diff --git a/packages/playground/tailwind.config.ts b/packages/playground/tailwind.config.ts
index 653aa62e15..4122295fbb 100644
--- a/packages/playground/tailwind.config.ts
+++ b/packages/playground/tailwind.config.ts
@@ -9,5 +9,6 @@ export default <Config>{
   content: ['./../lib/modules/**/*', './../lib/components/**/*'],
   corePlugins: {
     container: false,
+    preflight: true,
   },
 }