xactsize-webcomponents 1.0.25 → 1.0.26

package/dist/body-measurer.es.js

@@ -1071,14 +1071,16 @@ label="${n("Let's go!")}"
   }
 };
 E.styles = N`
-   :host {
+  :host {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column; /* Força coluna para evitar problemas de flex-start */
+  justify-content: flex-start;
+  align-items: stretch;    /* Evita que filhos desapareçam no Safari */
   font-family: "Lato", sans-serif;
   box-sizing: border-box;
-  padding: 16px; 
+  padding: 16px;
   width: 100%;
+  min-height: 100vh;       /* Garante que o conteúdo caiba */
 }
 
 .component-content {
@@ -1087,6 +1089,7 @@ E.styles = N`
   gap: 12px;
   width: 100%;
   max-width: 960px;
+  margin: 0 auto;
 }
 
 .header-section {
@@ -1110,12 +1113,14 @@ E.styles = N`
 
 .main-section {
   display: flex;
-  flex-direction: row; 
+  flex-direction: row;
   gap: 24px;
+  flex-wrap: wrap; /* Evita overflow de elementos */
+  justify-content: center;
 }
 
 .images-section {
-  flex: 1;
+  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -1125,54 +1130,52 @@ E.styles = N`
   width: 100%;
   max-width: 400px;
   height: auto;
+  flex-shrink: 0; /* Evita sumir no Safari */
 }
 
 .tips-section {
-  flex: 1;
+  flex: 1 1 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
 
-   form {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      gap: 16px; 
-      width: 100%;
-    }
-
-        label {
-      font-size: 16px;
-      color: #333;
-      text-align: start;
-    }
+.tips-section form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
 
-    input {
-      width: 100%;
-      max-width: 150px;
-      padding: 12px;
-      font-size: 16px;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-      box-sizing: border-box;
-      font-family: "Lato", sans-serif;
-      text-align: start;
-    }
+.tips-section label {
+  font-size: 16px;
+  color: #333;
+}
 
-     input:focus {
-      outline: 2px solid var(--brand-primary);
-      outline-offset: 2px;
-    }
+.tips-section input {
+  width: 100%;
+  max-width: 150px;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
 }
 
- .xact-button {
-      width: 100%;
-      max-width: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+.tips-section input:focus {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
 
-    }   
+.xact-button {
+  width: 100%;
+  max-width: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0; /* Evita sumir no Safari */
+}
 
 .tip-item {
   margin-bottom: 4px;
@@ -1201,11 +1204,11 @@ E.styles = N`
   margin: 0 auto;
 }
 
-  /* Ajuste da responsividade para mobile */
+/* Responsividade para mobile */
 @media (max-width: 754px) {
   .main-section {
     flex-direction: column;
-    gap: 5px; /* menor gap */
+    gap: 8px;
     align-items: center;
   }
 
@@ -1215,30 +1218,28 @@ E.styles = N`
   }
 
   .images-section svg {
-    width: 80%;       /* reduzir para não quebrar botão */
-    max-width: 180px; /* altura menor */
-    height: auto;
+    width: 80%;
+    max-width: 180px;
   }
 
   .tips-section {
     width: 100%;
     gap: 6px;
-    align-items: flex-start; /* alinhar à esquerda */
+    align-items: flex-start;
   }
 
-  form {
-    align-items: flex-start; /* alinhar labels e inputs à esquerda */
+  .tips-section form {
     width: 100%;
+    align-items: flex-start;
   }
 
-  input {
+  .tips-section input {
     max-width: 100%;
     font-size: 14px;
     padding: 10px;
   }
 
-  label {
-    text-align: left;
+  .tips-section label {
     font-size: 14px;
   }
 
@@ -1258,23 +1259,17 @@ E.styles = N`
 
   .tip-title {
     font-size: 12px;
-    text-align: left;
   }
 
   .tip-text {
     font-size: 11px;
-    text-align: left;
-    margin-left: 0; /* remove centralização */
-  }
-
-  .tip-item {
-    margin-bottom: 6px;
+    margin-left: 0;
   }
 
   .buttons {
-    gap: 8px;
     width: 100%;
     max-width: 100%;
+    gap: 8px;
     margin-top: 12px;
   }
 }
@@ -1305,10 +1300,6 @@ E.styles = N`
     font-size: 10px;
   }
 
-  .tip-item {
-    margin-bottom: 4px;
-  }
-
   .xact-button {
     padding: 8px;
   }
@@ -1318,7 +1309,6 @@ E.styles = N`
   }
 }
 
-
   
   `;
 kA([

package/dist/body-measurer.umd.js

@@ -267,14 +267,16 @@ label="${V("Let's go!")}"
 ></xact-button> 
          
     `}};Y.styles=m`
-   :host {
+  :host {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
+  flex-direction: column; /* Força coluna para evitar problemas de flex-start */
+  justify-content: flex-start;
+  align-items: stretch;    /* Evita que filhos desapareçam no Safari */
   font-family: "Lato", sans-serif;
   box-sizing: border-box;
-  padding: 16px; 
+  padding: 16px;
   width: 100%;
+  min-height: 100vh;       /* Garante que o conteúdo caiba */
 }
 
 .component-content {
@@ -283,6 +285,7 @@ label="${V("Let's go!")}"
   gap: 12px;
   width: 100%;
   max-width: 960px;
+  margin: 0 auto;
 }
 
 .header-section {
@@ -306,12 +309,14 @@ label="${V("Let's go!")}"
 
 .main-section {
   display: flex;
-  flex-direction: row; 
+  flex-direction: row;
   gap: 24px;
+  flex-wrap: wrap; /* Evita overflow de elementos */
+  justify-content: center;
 }
 
 .images-section {
-  flex: 1;
+  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -321,54 +326,52 @@ label="${V("Let's go!")}"
   width: 100%;
   max-width: 400px;
   height: auto;
+  flex-shrink: 0; /* Evita sumir no Safari */
 }
 
 .tips-section {
-  flex: 1;
+  flex: 1 1 200px;
   display: flex;
   flex-direction: column;
   gap: 8px;
+}
 
-   form {
-      display: flex;
-      flex-direction: column;
-      align-items: start;
-      gap: 16px; 
-      width: 100%;
-    }
-
-        label {
-      font-size: 16px;
-      color: #333;
-      text-align: start;
-    }
+.tips-section form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  width: 100%;
+}
 
-    input {
-      width: 100%;
-      max-width: 150px;
-      padding: 12px;
-      font-size: 16px;
-      border: 1px solid #ccc;
-      border-radius: 6px;
-      box-sizing: border-box;
-      font-family: "Lato", sans-serif;
-      text-align: start;
-    }
+.tips-section label {
+  font-size: 16px;
+  color: #333;
+}
 
-     input:focus {
-      outline: 2px solid var(--brand-primary);
-      outline-offset: 2px;
-    }
+.tips-section input {
+  width: 100%;
+  max-width: 150px;
+  padding: 12px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
 }
 
- .xact-button {
-      width: 100%;
-      max-width: 150px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+.tips-section input:focus {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+}
 
-    }   
+.xact-button {
+  width: 100%;
+  max-width: 150px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0; /* Evita sumir no Safari */
+}
 
 .tip-item {
   margin-bottom: 4px;
@@ -397,11 +400,11 @@ label="${V("Let's go!")}"
   margin: 0 auto;
 }
 
-  /* Ajuste da responsividade para mobile */
+/* Responsividade para mobile */
 @media (max-width: 754px) {
   .main-section {
     flex-direction: column;
-    gap: 5px; /* menor gap */
+    gap: 8px;
     align-items: center;
   }
 
@@ -411,30 +414,28 @@ label="${V("Let's go!")}"
   }
 
   .images-section svg {
-    width: 80%;       /* reduzir para não quebrar botão */
-    max-width: 180px; /* altura menor */
-    height: auto;
+    width: 80%;
+    max-width: 180px;
   }
 
   .tips-section {
     width: 100%;
     gap: 6px;
-    align-items: flex-start; /* alinhar à esquerda */
+    align-items: flex-start;
   }
 
-  form {
-    align-items: flex-start; /* alinhar labels e inputs à esquerda */
+  .tips-section form {
     width: 100%;
+    align-items: flex-start;
   }
 
-  input {
+  .tips-section input {
     max-width: 100%;
     font-size: 14px;
     padding: 10px;
   }
 
-  label {
-    text-align: left;
+  .tips-section label {
     font-size: 14px;
   }
 
@@ -454,23 +455,17 @@ label="${V("Let's go!")}"
 
   .tip-title {
     font-size: 12px;
-    text-align: left;
   }
 
   .tip-text {
     font-size: 11px;
-    text-align: left;
-    margin-left: 0; /* remove centralização */
-  }
-
-  .tip-item {
-    margin-bottom: 6px;
+    margin-left: 0;
   }
 
   .buttons {
-    gap: 8px;
     width: 100%;
     max-width: 100%;
+    gap: 8px;
     margin-top: 12px;
   }
 }
@@ -501,10 +496,6 @@ label="${V("Let's go!")}"
     font-size: 10px;
   }
 
-  .tip-item {
-    margin-bottom: 4px;
-  }
-
   .xact-button {
     padding: 8px;
   }
@@ -514,7 +505,6 @@ label="${V("Let's go!")}"
   }
 }
 
-
   
   `,kA([c({type:Number})],Y.prototype,"height",2),kA([c({type:Function})],Y.prototype,"onStartMeasurement",2),Y=kA([R("xact-step-one"),w()],Y);var Rt=Object.getOwnPropertyDescriptor,Ht=(r,A,t,l)=>{for(var e=l>1?void 0:l?Rt(A,t):A,p=r.length-1,n;p>=0;p--)(n=r[p])&&(e=n(e)||e);return e};let TA=class extends X{render(){return J`
      <footer class="modal-footer">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xactsize-webcomponents",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "A web component for body measurements and size recommendations",
   "main": "dist/body-measurer.umd.js",
   "module": "dist/body-measurer.es.js",