@jjlmoya/utils-babies 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jjlmoya/utils-babies",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/tool/baby-feeding-calculator/component.astro

@@ -240,7 +240,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.bfc-card {
+:global(.bfc-card) {
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 28px;
@@ -250,7 +250,7 @@ const { ui } = Astro.props;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
 }
 
-:global(.theme-dark) .bfc-card {
+:global(.theme-dark .bfc-card) {
   background: #111827;
   border-color: #1f2937;
 }
@@ -266,17 +266,17 @@ const { ui } = Astro.props;
   border-right: 1px solid #e2e8f0;
 }
 
-:global(.theme-dark) .bfc-left {
+:global(.theme-dark .bfc-left) {
   background: #1f2937;
   border-right-color: #374151;
 }
 
-.bfc-right {
+:global(.bfc-right) {
   background: #fff;
   padding: 40px;
 }
 
-:global(.theme-dark) .bfc-right {
+:global(.theme-dark .bfc-right) {
   background: #111827;
 }
 
@@ -290,7 +290,7 @@ const { ui } = Astro.props;
   margin-bottom: 32px;
 }
 
-.bfc-input-label {
+:global(.bfc-input-label) {
   display: block;
   font-size: 0.95rem;
   font-weight: 700;
@@ -298,7 +298,7 @@ const { ui } = Astro.props;
   margin-bottom: 12px;
 }
 
-:global(.theme-dark) .bfc-input-label {
+:global(.theme-dark .bfc-input-label) {
   color: #e2e8f0;
 }
 
@@ -314,11 +314,11 @@ const { ui } = Astro.props;
   margin-bottom: 24px;
 }
 
-:global(.theme-dark) .bfc-unit-nav {
+:global(.theme-dark .bfc-unit-nav) {
   background: #374151;
 }
 
-.bfc-unit-tab {
+:global(.bfc-unit-tab) {
   flex: 1;
   padding: 8px;
   border: none;
@@ -332,17 +332,17 @@ const { ui } = Astro.props;
   margin: 2px;
 }
 
-:global(.theme-dark) .bfc-unit-tab {
+:global(.theme-dark .bfc-unit-tab) {
   background: #1f2937;
 }
 
-.bfc-unit-active {
+:global(.bfc-unit-active) {
   background: #fff;
   color: #0d9488;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 
-:global(.theme-dark) .bfc-unit-active {
+:global(.theme-dark .bfc-unit-active) {
   background: #4b5563;
   color: #2dd4bf;
 }
@@ -358,12 +358,12 @@ const { ui } = Astro.props;
   margin-bottom: 8px;
 }
 
-:global(.theme-dark) .bfc-stepper-box {
+:global(.theme-dark .bfc-stepper-box) {
   background: #111827;
   border-color: #4b5563;
 }
 
-.bfc-btn-step {
+:global(.bfc-btn-step) {
   width: 44px;
   height: 44px;
   border-radius: 12px;
@@ -376,12 +376,12 @@ const { ui } = Astro.props;
   transition: all 0.2s ease;
 }
 
-:global(.theme-dark) .bfc-btn-step {
+:global(.theme-dark .bfc-btn-step) {
   background: #374151;
   color: #f9fafb;
 }
 
-.bfc-btn-step:hover {
+:global(.bfc-btn-step:hover) {
   background: #0d9488;
   color: #fff;
 }
@@ -390,18 +390,18 @@ const { ui } = Astro.props;
   text-align: center;
 }
 
-.bfc-val-big {
+:global(.bfc-val-big) {
   display: block;
   font-size: 2rem;
   font-weight: 800;
   color: #0f172a;
 }
 
-:global(.theme-dark) .bfc-val-big {
+:global(.theme-dark .bfc-val-big) {
   color: #fff;
 }
 
-.bfc-val-sub {
+:global(.bfc-val-sub) {
   display: block;
   font-size: 0.85rem;
   color: #64748b;
@@ -423,11 +423,11 @@ const { ui } = Astro.props;
   outline: none;
 }
 
-:global(.theme-dark) .bfc-slider {
+:global(.theme-dark .bfc-slider) {
   background: #374151;
 }
 
-.bfc-slider::-webkit-slider-thumb {
+:global(.bfc-slider::-webkit-slider-thumb) {
   -webkit-appearance: none;
   appearance: none;
   width: 22px;
@@ -445,7 +445,7 @@ const { ui } = Astro.props;
   gap: 12px;
 }
 
-.bfc-type-tile {
+:global(.bfc-type-tile) {
   background: #f1f5f9;
   border: 1px solid #cbd5e1;
   border-radius: 14px;
@@ -458,19 +458,19 @@ const { ui } = Astro.props;
   color: #64748b;
 }
 
-:global(.theme-dark) .bfc-type-tile {
+:global(.theme-dark .bfc-type-tile) {
   background: #1f2937;
   border-color: #4b5563;
 }
 
-.bfc-type-active {
+:global(.bfc-type-active) {
   background: #f0fdfa;
   border-color: #0d9488;
   color: #0f766e;
   box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
 }
 
-:global(.theme-dark) .bfc-type-active {
+:global(.theme-dark .bfc-type-active) {
   background: rgba(13, 148, 136, 0.1);
   color: #2dd4bf;
   border-color: #2dd4bf;
@@ -484,7 +484,7 @@ const { ui } = Astro.props;
   border: 1px solid #e2e8f0;
 }
 
-:global(.theme-dark) .bfc-gauge-area {
+:global(.theme-dark .bfc-gauge-area) {
   background: #111827;
   border-color: #374151;
 }
@@ -506,14 +506,14 @@ const { ui } = Astro.props;
   box-shadow: 0 10px 25px rgba(13, 148, 136, 0.2);
 }
 
-.bfc-visual-hint {
+:global(.bfc-visual-hint) {
   font-size: 0.95rem;
   font-weight: 600;
   color: #0f766e;
   margin: 0;
 }
 
-:global(.theme-dark) .bfc-visual-hint {
+:global(.theme-dark .bfc-visual-hint) {
   color: #2dd4bf;
 }
 
@@ -525,11 +525,11 @@ const { ui } = Astro.props;
   margin-bottom: 24px;
 }
 
-:global(.theme-dark) .bfc-res-card-box {
+:global(.theme-dark .bfc-res-card-box) {
   background: rgba(13, 148, 136, 0.05);
 }
 
-.bfc-res-main-val {
+:global(.bfc-res-main-val) {
   display: block;
   font-size: 3.5rem;
   font-weight: 950;
@@ -538,11 +538,11 @@ const { ui } = Astro.props;
   line-height: 1;
 }
 
-:global(.theme-dark) .bfc-res-main-val {
+:global(.theme-dark .bfc-res-main-val) {
   color: #2dd4bf;
 }
 
-.bfc-res-label {
+:global(.bfc-res-label) {
   display: block;
   margin-top: 8px;
   font-size: 1rem;
@@ -562,11 +562,11 @@ const { ui } = Astro.props;
   border-bottom: 2px solid #f1f5f9;
 }
 
-:global(.theme-dark) .bfc-stat-item {
+:global(.theme-dark .bfc-stat-item) {
   border-bottom-color: #374151;
 }
 
-.bfc-stat-label {
+:global(.bfc-stat-label) {
   display: block;
   font-size: 0.7rem;
   font-weight: 800;
@@ -575,13 +575,13 @@ const { ui } = Astro.props;
   margin-bottom: 2px;
 }
 
-.bfc-stat-value {
+:global(.bfc-stat-value) {
   font-size: 1.15rem;
   font-weight: 800;
   color: #334155;
 }
 
-:global(.theme-dark) .bfc-stat-value {
+:global(.theme-dark .bfc-stat-value) {
   color: #e2e8f0;
 }
 
@@ -603,22 +603,22 @@ const { ui } = Astro.props;
   border-radius: 100px;
 }
 
-.bfc-pill-hunger {
+:global(.bfc-pill-hunger) {
   background: #fff7ed;
   color: #c2410c;
 }
 
-:global(.theme-dark) .bfc-pill-hunger {
+:global(.theme-dark .bfc-pill-hunger) {
   background: rgba(194, 65, 12, 0.1);
   color: #fdba74;
 }
 
-.bfc-pill-fullness {
+:global(.bfc-pill-fullness) {
   background: #f0fdf4;
   color: #15803d;
 }
 
-:global(.theme-dark) .bfc-pill-fullness {
+:global(.theme-dark .bfc-pill-fullness) {
   background: rgba(21, 128, 61, 0.1);
   color: #4ade80;
 }

package/src/tool/baby-percentile-calculator/component.astro

@@ -245,7 +245,7 @@ const { ui } = Astro.props;
 </script>
 
 <style>
-.bpc-card {
+:global(.bpc-card) {
   background: #fff;
   border: 1px solid #e2e8f0;
   border-radius: 32px;
@@ -257,11 +257,11 @@ const { ui } = Astro.props;
   border-top: 8px solid #0ea5e9;
 }
 
-.bpc-card:not(.bpc-boy) {
+:global(.bpc-card:not(.bpc-boy)) {
   border-top-color: #0d9488;
 }
 
-:global(.theme-dark) .bpc-card {
+:global(.theme-dark .bpc-card) {
   background: #0f172a;
   border-color: #1e293b;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
@@ -278,17 +278,17 @@ const { ui } = Astro.props;
   border-right: 1px solid #e2e8f0;
 }
 
-:global(.theme-dark) .bpc-left {
+:global(.theme-dark .bpc-left) {
   background: #1e293b;
   border-right-color: #334155;
 }
 
-.bpc-right {
+:global(.bpc-right) {
   background: #fff;
   padding: 40px;
 }
 
-:global(.theme-dark) .bpc-right {
+:global(.theme-dark .bpc-right) {
   background: #0f172a;
 }
 
@@ -302,15 +302,15 @@ const { ui } = Astro.props;
   margin-bottom: 32px;
 }
 
-:global(.theme-dark) .bpc-section-marker {
+:global(.theme-dark .bpc-section-marker) {
   color: #94a3b8;
 }
 
-.bpc-input-group {
+:global(.bpc-input-group) {
   margin-bottom: 24px;
 }
 
-.bpc-input-label {
+:global(.bpc-input-label) {
   display: block;
   font-size: 0.95rem;
   font-weight: 700;
@@ -318,7 +318,7 @@ const { ui } = Astro.props;
   margin-bottom: 12px;
 }
 
-:global(.theme-dark) .bpc-input-label {
+:global(.theme-dark .bpc-input-label) {
   color: #f8fafc;
 }
 
@@ -330,11 +330,11 @@ const { ui } = Astro.props;
   border-radius: 14px;
 }
 
-:global(.theme-dark) .bpc-sex-selector {
+:global(.theme-dark .bpc-sex-selector) {
   background: #334155;
 }
 
-.bpc-sex-btn {
+:global(.bpc-sex-btn) {
   flex: 1;
   padding: 12px;
   border: none;
@@ -347,35 +347,35 @@ const { ui } = Astro.props;
   transition: all 0.2s ease;
 }
 
-.bpc-sex-btn.bpc-active {
+:global(.bpc-sex-btn.bpc-active) {
   background: #fff;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
-:global(.theme-dark) .bpc-sex-btn.bpc-active {
+:global(.theme-dark .bpc-sex-btn.bpc-active) {
   background: #0f172a;
 }
 
-.bpc-boy .bpc-sex-btn[data-sex="boy"].bpc-active {
+:global(.bpc-boy .bpc-sex-btn[data-sex="boy"].bpc-active) {
   color: #0ea5e9;
 }
 
-.bpc-card:not(.bpc-boy) .bpc-sex-btn[data-sex="girl"].bpc-active {
+:global(.bpc-card:not(.bpc-boy) .bpc-sex-btn[data-sex="girl"].bpc-active) {
   color: #0d9488;
 }
 
-.bpc-unit-nav {
+:global(.bpc-unit-nav) {
   display: flex;
   background: #f1f5f9;
   padding: 6px;
   border-radius: 14px;
 }
 
-:global(.theme-dark) .bpc-unit-nav {
+:global(.theme-dark .bpc-unit-nav) {
   background: #334155;
 }
 
-.bpc-unit-tab {
+:global(.bpc-unit-tab) {
   flex: 1;
   padding: 10px;
   border: none;
@@ -388,17 +388,17 @@ const { ui } = Astro.props;
   transition: all 0.2s ease;
 }
 
-.bpc-unit-tab.bpc-active {
+:global(.bpc-unit-tab.bpc-active) {
   background: #fff;
   color: #0d9488;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }
 
-.bpc-boy .bpc-unit-tab.bpc-active {
+:global(.bpc-boy .bpc-unit-tab.bpc-active) {
   color: #0ea5e9;
 }
 
-:global(.theme-dark) .bpc-unit-tab.bpc-active {
+:global(.theme-dark .bpc-unit-tab.bpc-active) {
   background: #0f172a;
 }
 
@@ -413,12 +413,12 @@ const { ui } = Astro.props;
   margin-bottom: 12px;
 }
 
-:global(.theme-dark) .bpc-stepper-box {
+:global(.theme-dark .bpc-stepper-box) {
   background: #334155;
   border-color: #475569;
 }
 
-.bpc-btn-step {
+:global(.bpc-btn-step) {
   width: 44px;
   height: 44px;
   border-radius: 12px;
@@ -431,17 +431,17 @@ const { ui } = Astro.props;
   transition: all 0.2s ease;
 }
 
-:global(.theme-dark) .bpc-btn-step {
+:global(.theme-dark .bpc-btn-step) {
   background: #0f172a;
   color: #fff;
 }
 
-.bpc-btn-step:hover {
+:global(.bpc-btn-step:hover) {
   background: #0d9488;
   color: #fff;
 }
 
-.bpc-boy .bpc-btn-step:hover {
+:global(.bpc-boy .bpc-btn-step:hover) {
   background: #0ea5e9;
 }
 
@@ -449,18 +449,18 @@ const { ui } = Astro.props;
   text-align: center;
 }
 
-.bpc-val-big {
+:global(.bpc-val-big) {
   display: block;
   font-size: 2.25rem;
   font-weight: 900;
   color: #0f172a;
 }
 
-:global(.theme-dark) .bpc-val-big {
+:global(.theme-dark .bpc-val-big) {
   color: #fff;
 }
 
-.bpc-val-sub {
+:global(.bpc-val-sub) {
   font-size: 0.8rem;
   color: #64748b;
   font-weight: 700;
@@ -477,11 +477,11 @@ const { ui } = Astro.props;
   outline: none;
 }
 
-:global(.theme-dark) .bpc-slider {
+:global(.theme-dark .bpc-slider) {
   background: #475569;
 }
 
-.bpc-slider::-webkit-slider-thumb {
+:global(.bpc-slider::-webkit-slider-thumb) {
   -webkit-appearance: none;
   appearance: none;
   width: 24px;
@@ -493,18 +493,18 @@ const { ui } = Astro.props;
   box-shadow: 0 4px 10px rgba(13, 148, 136, 0.4);
 }
 
-.bpc-boy .bpc-slider::-webkit-slider-thumb {
+:global(.bpc-boy .bpc-slider::-webkit-slider-thumb) {
   background: #0ea5e9;
   box-shadow: 0 4px 10px rgba(14, 165, 233, 0.4);
 }
 
-.bpc-grid-2 {
+:global(.bpc-grid-2) {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px;
 }
 
-.bpc-num-input {
+:global(.bpc-num-input) {
   width: 100%;
   padding: 16px;
   border: 2px solid #e2e8f0;
@@ -517,19 +517,19 @@ const { ui } = Astro.props;
   box-sizing: border-box;
 }
 
-:global(.theme-dark) .bpc-num-input {
+:global(.theme-dark .bpc-num-input) {
   background: #334155;
   border-color: #475569;
   color: #fff;
 }
 
-.bpc-num-input:focus {
+:global(.bpc-num-input:focus) {
   border-color: #0d9488;
   outline: none;
   box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.1);
 }
 
-.bpc-boy .bpc-num-input:focus {
+:global(.bpc-boy .bpc-num-input:focus) {
   border-color: #0ea5e9;
 }