@jjlmoya/utils-babies 1.5.0 → 1.6.0

package/src/tool/baby-size-converter/component.astro

@@ -297,7 +297,7 @@ const brands = brandsData.brands;
 </script>
 
 <style>
-.bsc-card {
+:global(.bsc-card) {
   max-width: 900px;
   margin: 0 auto;
   background: #fff;
@@ -307,7 +307,7 @@ const brands = brandsData.brands;
   box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
 }
 
-:global(.theme-dark) .bsc-card {
+:global(.theme-dark .bsc-card) {
   background: #0f172a;
   border-color: #1e293b;
   box-shadow: none;
@@ -334,11 +334,11 @@ const brands = brandsData.brands;
   position: relative;
 }
 
-:global(.theme-dark) .bsc-left {
+:global(.theme-dark .bsc-left) {
   border-right-color: #1e293b;
 }
 
-:global(.theme-dark) .bsc-right {
+:global(.theme-dark .bsc-right) {
   background: rgba(30, 41, 59, 0.15);
 }
 
@@ -354,7 +354,7 @@ const brands = brandsData.brands;
   margin-bottom: 0.5rem;
 }
 
-.bsc-section-marker::before {
+:global(.bsc-section-marker::before) {
   content: "";
   width: 16px;
   height: 2px;
@@ -373,7 +373,7 @@ const brands = brandsData.brands;
   width: 100%;
 }
 
-.bsc-select-box select {
+:global(.bsc-select-box select) {
   width: 100%;
   appearance: none;
   -webkit-appearance: none;
@@ -389,13 +389,13 @@ const brands = brandsData.brands;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-:global(.theme-dark) .bsc-select-box select {
+:global(.theme-dark .bsc-select-box select) {
   background: #1e293b;
   border-color: #334155;
   color: #f1f5f9;
 }
 
-.bsc-select-box::after {
+:global(.bsc-select-box::after) {
   content: "";
   position: absolute;
   right: 1.25rem;
@@ -417,11 +417,11 @@ const brands = brandsData.brands;
   width: fit-content;
 }
 
-:global(.theme-dark) .bsc-unit-nav {
+:global(.theme-dark .bsc-unit-nav) {
   background: #0f172a;
 }
 
-.bsc-unit-tab {
+:global(.bsc-unit-tab) {
   padding: 0.4rem 1.1rem;
   border-radius: 100px;
   border: none;
@@ -432,13 +432,13 @@ const brands = brandsData.brands;
   cursor: pointer;
 }
 
-.bsc-unit-active {
+:global(.bsc-unit-active) {
   background: #fff;
   color: #6366f1;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-:global(.theme-dark) .bsc-unit-active {
+:global(.theme-dark .bsc-unit-active) {
   background: #1e293b;
   color: #818cf8;
 }
@@ -466,12 +466,12 @@ const brands = brandsData.brands;
   gap: 1rem;
 }
 
-:global(.theme-dark) .bsc-stepper-box {
+:global(.theme-dark .bsc-stepper-box) {
   background: #0f172a;
   border-color: #1e293b;
 }
 
-.bsc-btn-step {
+:global(.bsc-btn-step) {
   width: 44px;
   height: 44px;
   border: none;
@@ -487,7 +487,7 @@ const brands = brandsData.brands;
   justify-content: center;
 }
 
-:global(.theme-dark) .bsc-btn-step {
+:global(.theme-dark .bsc-btn-step) {
   background: #1e293b;
   color: #fff;
   border: 1px solid #334155;
@@ -507,7 +507,7 @@ const brands = brandsData.brands;
   line-height: 1;
 }
 
-:global(.theme-dark) .bsc-val-big {
+:global(.theme-dark .bsc-val-big) {
   color: #f1f5f9;
 }
 
@@ -519,7 +519,7 @@ const brands = brandsData.brands;
   margin-top: 2px;
 }
 
-.bsc-slider {
+:global(.bsc-slider) {
   width: 100%;
   appearance: none;
   -webkit-appearance: none;
@@ -529,7 +529,7 @@ const brands = brandsData.brands;
   margin-top: 4px;
 }
 
-.bsc-slider::-webkit-slider-thumb {
+:global(.bsc-slider::-webkit-slider-thumb) {
   -webkit-appearance: none;
   width: 18px;
   height: 18px;
@@ -548,11 +548,11 @@ const brands = brandsData.brands;
   border-radius: 16px;
 }
 
-:global(.theme-dark) .bsc-age-rack {
+:global(.theme-dark .bsc-age-rack) {
   background: #0f172a;
 }
 
-.bsc-age-tile {
+:global(.bsc-age-tile) {
   padding: 1rem 0.25rem;
   border: none;
   background: transparent;
@@ -564,14 +564,14 @@ const brands = brandsData.brands;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.bsc-age-active {
+:global(.bsc-age-active) {
   background: #fff;
   color: #4f46e5;
   box-shadow: 0 4px 12px rgba(79, 70, 229, 0.15);
   transform: translateY(-1px);
 }
 
-:global(.theme-dark) .bsc-age-active {
+:global(.theme-dark .bsc-age-active) {
   background: #1e293b;
   color: #818cf8;
 }
@@ -594,7 +594,7 @@ const brands = brandsData.brands;
   margin: 0.25rem 0 0.75rem;
 }
 
-:global(.theme-dark) .bsc-res-size-main {
+:global(.theme-dark .bsc-res-size-main) {
   color: #f1f5f9;
 }
 
@@ -663,7 +663,7 @@ const brands = brandsData.brands;
   border-bottom: 2px solid #f8fafc;
 }
 
-:global(.theme-dark) .bsc-eq-head-row {
+:global(.theme-dark .bsc-eq-head-row) {
   border-bottom-color: #1e293b;
 }
 
@@ -681,7 +681,7 @@ const brands = brandsData.brands;
   width: 100%;
 }
 
-.bsc-eq-data-row {
+:global(.bsc-eq-data-row) {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -689,31 +689,31 @@ const brands = brandsData.brands;
   border-bottom: 1px solid rgba(241, 245, 249, 0.4);
 }
 
-:global(.theme-dark) .bsc-eq-data-row {
+:global(.theme-dark .bsc-eq-data-row) {
   border-bottom-color: rgba(30, 41, 59, 0.5);
 }
 
-.bsc-eq-data-row:last-child {
+:global(.bsc-eq-data-row:last-child) {
   border-bottom: none;
 }
 
-.bsc-eq-brand-v {
+:global(.bsc-eq-brand-v) {
   display: flex;
   flex-direction: column;
   gap: 0;
 }
 
-.bsc-eq-brand-name {
+:global(.bsc-eq-brand-name) {
   font-size: 0.95rem;
   font-weight: 900;
   color: #1e293b;
 }
 
-:global(.theme-dark) .bsc-eq-brand-name {
+:global(.theme-dark .bsc-eq-brand-name) {
   color: #f1f5f9;
 }
 
-.bsc-eq-fit-v {
+:global(.bsc-eq-fit-v) {
   font-size: 0.525rem;
   font-weight: 900;
   text-transform: uppercase;
@@ -721,21 +721,21 @@ const brands = brandsData.brands;
   letter-spacing: 0.02em;
 }
 
-.bsc-eq-fit-large {
+:global(.bsc-eq-fit-large) {
   color: #10b981;
 }
 
-.bsc-eq-fit-small {
+:global(.bsc-eq-fit-small) {
   color: #f43f5e;
 }
 
-.bsc-eq-size-v {
+:global(.bsc-eq-size-v) {
   font-size: 1.25rem;
   font-weight: 950;
   color: #4f46e5;
 }
 
-:global(.theme-dark) .bsc-eq-size-v {
+:global(.theme-dark .bsc-eq-size-v) {
   color: #818cf8;
 }
 
@@ -745,7 +745,7 @@ const brands = brandsData.brands;
   border-top: 1px dashed #e2e8f0;
 }
 
-:global(.theme-dark) .bsc-clothes-meta {
+:global(.theme-dark .bsc-clothes-meta) {
   border-top-color: #334155;
 }
 
@@ -769,7 +769,7 @@ const brands = brandsData.brands;
   text-align: center;
 }
 
-.bsc-meta-cell label {
+:global(.bsc-meta-cell label) {
   font-size: 0.55rem;
   font-weight: 950;
   color: #94a3b8;
@@ -777,13 +777,13 @@ const brands = brandsData.brands;
   margin-bottom: 2px;
 }
 
-.bsc-meta-cell span {
+:global(.bsc-meta-cell span) {
   font-size: 1.1rem;
   font-weight: 950;
   color: #1e293b;
 }
 
-:global(.theme-dark) .bsc-meta-cell span {
+:global(.theme-dark .bsc-meta-cell span) {
   color: #f1f5f9;
 }
 
@@ -809,21 +809,21 @@ const brands = brandsData.brands;
   gap: 0.4rem;
 }
 
-.bsc-footer-text h5 {
+:global(.bsc-footer-text h5) {
   font-size: 1rem;
   font-weight: 950;
   color: #fff;
   margin: 0;
 }
 
-.bsc-footer-text p {
+:global(.bsc-footer-text p) {
   font-size: 0.85rem;
   color: #94a3b8;
   line-height: 1.6;
   margin: 0;
 }
 
-.bsc-footer-text strong {
+:global(.bsc-footer-text strong) {
   color: #6366f1;
 }
 

package/src/tool/fertile-days-estimator/component.astro

@@ -336,6 +336,11 @@ const { ui } = Astro.props;
   display: none;
 }
 
+:global(.theme-dark) .fde-step-first {
+  background: radial-gradient(circle at top right, rgba(88, 28, 135, 0.15), transparent),
+    radial-gradient(circle at bottom left, rgba(124, 58, 202, 0.1), transparent);
+}
+
 .fde-step-header h2 {
   font-size: 2.5rem;
   font-weight: 950;
@@ -591,7 +596,7 @@ const { ui } = Astro.props;
   gap: 8px;
 }
 
-.fde-day-header {
+:global(.fde-day-header) {
   text-align: center;
   font-size: 0.8rem;
   font-weight: 800;
@@ -600,7 +605,7 @@ const { ui } = Astro.props;
   padding-bottom: 1rem;
 }
 
-.fde-day {
+:global(.fde-day) {
   aspect-ratio: 1;
   display: flex;
   align-items: center;
@@ -615,44 +620,44 @@ const { ui } = Astro.props;
   border: 1px solid #f3f4f6;
 }
 
-.fde-day:hover:not(.fde-day-empty) {
+:global(.fde-day:hover:not(.fde-day-empty)) {
   border-color: #db2777;
   background: #fdf2f8;
 }
 
-.fde-day-empty {
+:global(.fde-day-empty) {
   background: transparent;
   border: none;
   cursor: default;
 }
 
-.fde-day-selected {
+:global(.fde-day-selected) {
   background: #be123c;
   color: #fff;
   border: none;
   box-shadow: 0 8px 20px rgba(190, 18, 60, 0.3);
 }
 
-.fde-day-period {
+:global(.fde-day-period) {
   background: #ffe4e6;
   color: #be123c;
   border: none;
 }
 
-.fde-day-fertile {
+:global(.fde-day-fertile) {
   background: #fdf2f8;
   color: #db2777;
   border: none;
 }
 
-.fde-day-ovulation {
+:global(.fde-day-ovulation) {
   background: #db2777;
   color: #fff;
   box-shadow: 0 8px 20px rgba(219, 39, 119, 0.3);
   border: none;
 }
 
-.fde-day-today {
+:global(.fde-day-today) {
   border: 2px solid #111827;
 }
 

package/src/tool/pregnancy-calculator/component.astro

@@ -40,25 +40,25 @@ const { ui } = Astro.props;
           <select
             id="pc-dp-day"
             class="pregnancy-calculator-dp-select"
-            aria-label="Día"
+            aria-label={ui.dayLabel}
           >
-            <option value="">Día</option>
+            <option value="">{ui.dayLabel}</option>
           </select>
           <span class="pregnancy-calculator-dp-sep">/</span>
           <select
             id="pc-dp-month"
             class="pregnancy-calculator-dp-select"
-            aria-label="Mes"
+            aria-label={ui.monthLabel}
           >
-            <option value="">Mes</option>
+            <option value="">{ui.monthLabel}</option>
           </select>
           <span class="pregnancy-calculator-dp-sep">/</span>
           <select
             id="pc-dp-year"
             class="pregnancy-calculator-dp-select"
-            aria-label="Año"
+            aria-label={ui.yearLabel}
           >
-            <option value="">Año</option>
+            <option value="">{ui.yearLabel}</option>
           </select>
         </div>
       </div>
@@ -144,7 +144,7 @@ const { ui } = Astro.props;
       >
         <div class="pregnancy-calculator-mp-top-row">
           <span class="pregnancy-calculator-mp-badge" id="pc-mp-badge"
-            >Semana —</span
+            >{ui.labelWeekBadge} —</span
           >
           <div class="pregnancy-calculator-analogy-tabs">
             <button class="pregnancy-calculator-at-btn" data-cat="fruits"
@@ -207,7 +207,7 @@ const { ui } = Astro.props;
 
 <script>
   import { getState, setState, subscribe } from "./store";
-  import { getMilestone, timelineLabels } from "./milestones";
+  import { getMilestone } from "./milestones";
   import type { PCState } from "./store";
   import type { CalcResult } from "./calculator";
 
@@ -244,21 +244,11 @@ const { ui } = Astro.props;
   const mpAlert = root.querySelector("#pc-mp-alert") as HTMLElement;
   const tlScroll = root.querySelector("#pc-tl-scroll") as HTMLElement;
 
-  const MONTHS_ES = [
-    "Ene",
-    "Feb",
-    "Mar",
-    "Abr",
-    "May",
-    "Jun",
-    "Jul",
-    "Ago",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dic",
-  ];
-  const fmtEdd = new Intl.DateTimeFormat("es-ES", {
+  const MONTHS = JSON.parse(ui.monthsData as string);
+  const timelineLabels = JSON.parse(ui.timelineLabelsData as string);
+  const milestones = JSON.parse(ui.milestonesData as string);
+
+  const fmtEdd = new Intl.DateTimeFormat(document.documentElement.lang || "es", {
     day: "numeric",
     month: "long",
     year: "numeric",
@@ -271,7 +261,7 @@ const { ui } = Astro.props;
       o.textContent = String(d).padStart(2, "0");
       dpDay.appendChild(o);
     }
-    MONTHS_ES.forEach((m, i) => {
+    MONTHS.forEach((m: string, i: number) => {
       const o = document.createElement("option");
       o.value = String(i + 1);
       o.textContent = m;
@@ -426,7 +416,7 @@ const { ui } = Astro.props;
   }
 
   function renderMilestone(weeks: number, cat: string, partner: boolean): void {
-    const ms = getMilestone(weeks);
+    const ms = getMilestone(weeks, milestones);
     mpBadge.textContent = `${ui["labelWeekBadge"] ?? "Semana"} ${weeks}`;
     mpAnalogy.textContent =
       ms.analogies[cat as "fruits" | "geek" | "sweets"] ?? ms.analogies.fruits;
@@ -512,8 +502,8 @@ const { ui } = Astro.props;
       `DTSTART;VALUE=DATE:${y}${m}${d}`,
       `DTEND;VALUE=DATE:${y}${m}${d}`,
       `DTSTAMP:${stamp}`,
-      "SUMMARY:Fecha Probable de Parto",
-      "DESCRIPTION:Fecha estimada de parto calculada por jjlmoya",
+      `SUMMARY:${ui.icsSummary}`,
+      `DESCRIPTION:${ui.icsDescription}`,
       "END:VEVENT",
       "END:VCALENDAR",
     ];
@@ -521,7 +511,7 @@ const { ui } = Astro.props;
     const url = URL.createObjectURL(blob);
     const a = document.createElement("a");
     a.href = url;
-    a.download = "fecha-parto.ics";
+    a.download = ui.icsFilename as string;
     a.click();
     URL.revokeObjectURL(url);
   }
@@ -658,7 +648,7 @@ const { ui } = Astro.props;
     --pc-bg-dark: #0f1923;
     --pc-text: #f1f5f9;
     --pc-text-muted: #94a3b8;
-    --pc-text-dim: #64748b;
+    --pc-text-dim: #cbd5e1;
     --pc-border: rgba(255, 255, 255, 0.04);
     --pc-border-inner: rgba(255, 255, 255, 0.04);
     --pc-shadow: rgba(0, 0, 0, 0.4);
@@ -866,6 +856,11 @@ const { ui } = Astro.props;
     min-width: 0;
   }
 
+  :global(.theme-dark) .pregnancy-calculator-dp-select {
+    background-color: #0f1923;
+    color: #f1f5f9;
+  }
+
   .pregnancy-calculator-dp-sep {
     color: #cbd5e1;
     font-size: 1rem;
@@ -874,6 +869,10 @@ const { ui } = Astro.props;
     padding: 0 2px;
   }
 
+  :global(.theme-dark) .pregnancy-calculator-dp-sep {
+    color: #64748b;
+  }
+
   .pregnancy-calculator-cs-wrap {
     background: #fff;
     border-radius: 18px;
@@ -1436,7 +1435,15 @@ const { ui } = Astro.props;
     border-radius: 2px;
   }
 
-  .pregnancy-calculator-tl-row {
+  :global(.theme-dark) .pregnancy-calculator-tl-scroll {
+    scrollbar-color: #334155 transparent;
+  }
+
+  :global(.theme-dark) .pregnancy-calculator-tl-scroll::-webkit-scrollbar-thumb {
+    background: #334155;
+  }
+
+  :global(.pregnancy-calculator-tl-row) {
     display: flex;
     align-items: flex-start;
     gap: 0.5rem;
@@ -1445,11 +1452,11 @@ const { ui } = Astro.props;
     transition: background 0.1s;
   }
 
-  .pregnancy-calculator-tl-row-current {
+  :global(.pregnancy-calculator-tl-row-current) {
     background: var(--pc-tri-bg);
   }
 
-  .pregnancy-calculator-tl-line-col {
+  :global(.pregnancy-calculator-tl-line-col) {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -1458,7 +1465,7 @@ const { ui } = Astro.props;
     padding-top: 0.2rem;
   }
 
-  .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-dot) {
     width: 0.5rem;
     height: 0.5rem;
     border-radius: 50%;
@@ -1467,18 +1474,18 @@ const { ui } = Astro.props;
     transition: background 0.15s;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-dot) {
     background: var(--pc-tri-accent);
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-dot) {
     background: var(--pc-tri-accent);
     box-shadow: 0 0 0 3px var(--pc-tri-glow);
     width: 0.625rem;
     height: 0.625rem;
   }
 
-  .pregnancy-calculator-tl-line {
+  :global(.pregnancy-calculator-tl-line) {
     width: 2px;
     flex: 1;
     min-height: 1.25rem;
@@ -1486,34 +1493,34 @@ const { ui } = Astro.props;
     margin-top: 2px;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-line) {
     background: var(--pc-tri-primary);
   }
 
-  .pregnancy-calculator-tl-info {
+  :global(.pregnancy-calculator-tl-info) {
     display: flex;
     align-items: baseline;
     gap: 0.375rem;
     min-width: 0;
   }
 
-  .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-num) {
     font-size: 0.75rem;
     font-weight: 700;
     color: var(--pc-text-dim);
     flex-shrink: 0;
   }
 
-  .pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-row-past .pregnancy-calculator-tl-num) {
     color: var(--pc-tri-accent);
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-num) {
     color: var(--pc-tri-accent);
     font-size: 0.875rem;
   }
 
-  .pregnancy-calculator-tl-label {
+  :global(.pregnancy-calculator-tl-label) {
     font-size: 0.6875rem;
     color: var(--pc-text-dim);
     white-space: nowrap;
@@ -1521,7 +1528,7 @@ const { ui } = Astro.props;
     text-overflow: ellipsis;
   }
 
-  .pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label {
+  :global(.pregnancy-calculator-tl-row-current .pregnancy-calculator-tl-label) {
     color: var(--pc-tri-text);
     font-weight: 600;
     font-size: 0.75rem;
@@ -1556,20 +1563,20 @@ const { ui } = Astro.props;
       gap: 0.25rem;
     }
 
-    .pregnancy-calculator-tl-row {
+    :global(.pregnancy-calculator-tl-row) {
       flex-direction: column;
       align-items: center;
       padding: 0.5rem 0.375rem;
       min-width: 3rem;
     }
 
-    .pregnancy-calculator-tl-line-col {
+    :global(.pregnancy-calculator-tl-line-col) {
       flex-direction: row;
       width: auto;
       padding-top: 0;
     }
 
-    .pregnancy-calculator-tl-line {
+    :global(.pregnancy-calculator-tl-line) {
       width: 1.25rem;
       height: 2px;
       min-height: 0;
@@ -1577,13 +1584,13 @@ const { ui } = Astro.props;
       margin-left: 2px;
     }
 
-    .pregnancy-calculator-tl-info {
+    :global(.pregnancy-calculator-tl-info) {
       flex-direction: column;
       align-items: center;
       gap: 0.125rem;
     }
 
-    .pregnancy-calculator-tl-label {
+    :global(.pregnancy-calculator-tl-label) {
       display: none;
     }