nk_jtb 0.28.1 → 0.28.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dev.html +79 -0
  2. package/docs/jtb-status.md +9 -5
  3. package/docs/utilities/position.md +67 -27
  4. package/index.html +457 -58
  5. package/jtb-conversion-notes.md +1 -0
  6. package/package.json +1 -1
  7. package/scripts/jtb-nav.json +4 -0
  8. package/src/base/_auto-spacing.scss +10 -0
  9. package/src/base/_typography.scss +1 -1
  10. package/src/maps_and_variables/_value-maps.scss +2 -0
  11. package/src/play.scss +15 -13
  12. package/src/utilities/_layout.scss +13 -4
  13. package/todo.md +3 -0
package/dev.html CHANGED
@@ -6,6 +6,8 @@
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" />
8
8
  <title>DEV</title>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
9
11
  <!-- order matters, make sure the plugin comes before alpine.js -->
10
12
  <script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>
11
13
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
@@ -13,6 +15,83 @@
13
15
 
14
16
  <body class="container py-5 bg-gray-200">
15
17
 
18
+ <style>
19
+ /* ============================================================
20
+ Local helpers — JTB gaps documented in jtb-conversion-notes.md
21
+ ============================================================ */
22
+
23
+ :root {
24
+ --primary: #7c0442;
25
+ --box-border-radius: 0.75rem;
26
+ }
27
+
28
+ /* Positional border-color not generated — known gap */
29
+ .bdr-l-brand { border-inline-start-color: var(--primary); }
30
+ </style>
31
+
32
+ <div class="flex-col gap-3">
33
+
34
+ <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option A — soft pattern</p>
35
+
36
+ <div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
37
+ <svg class="absolute -top-1.5 -right-1.5 opacity-10" width="120" height="120" viewBox="0 0 120 120">
38
+ <circle cx="60" cy="60" r="50" fill="#7c0442"/>
39
+ <circle cx="60" cy="60" r="35" fill="none" stroke="#7c0442" stroke-width="2"/>
40
+ <circle cx="60" cy="60" r="20" fill="none" stroke="#7c0442" stroke-width="2"/>
41
+ </svg>
42
+ <svg class="absolute -bottom-1 -left-1 opacity-10" width="80" height="80" viewBox="0 0 80 80">
43
+ <circle cx="40" cy="40" r="35" fill="#7c0442"/>
44
+ </svg>
45
+ <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
46
+ <p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
47
+ <p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
48
+ <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
49
+ </div>
50
+
51
+ <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option B — brand colour + corner shapes</p>
52
+
53
+ <div class="bx primary relative overflow-hidden max-w-384px">
54
+ <svg class="absolute -top-1.5 -right-1.5 opacity-10" width="100" height="100" viewBox="0 0 100 100">
55
+ <rect x="10" y="10" width="80" height="80" rx="8" fill="white"/>
56
+ <rect x="25" y="25" width="50" height="50" rx="4" fill="none" stroke="white" stroke-width="2"/>
57
+ </svg>
58
+ <svg class="absolute -bottom-1.5 -left-1.5 opacity-10" width="90" height="90" viewBox="0 0 90 90">
59
+ <circle cx="45" cy="45" r="40" fill="white"/>
60
+ <circle cx="45" cy="45" r="25" fill="none" stroke="white" stroke-width="2"/>
61
+ </svg>
62
+ <p class="txt-xs font-medium uppercase tracking-widest txt-rose-200 opacity-80">Also available as</p>
63
+ <p class="font-serif txt-base font-medium">Part of a program</p>
64
+ <p class="txt-sm txt-rose-200 opacity-90">Save with a bundle discount when you enrol in the full program.</p>
65
+ <a href="#" class="txt-sm font-medium inline-flex items-center gap-025">View program →</a>
66
+ </div>
67
+
68
+ <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option C — left border accent</p>
69
+
70
+ <div class="bx relative overflow-hidden max-w-384px bdr-l-3 bdr-l-brand">
71
+ <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
72
+ <p class="font-serif txt-base font-medium">Part of a program</p>
73
+ <p class="txt-sm txt-muted">Save with a bundle discount when you enrol in the full program.</p>
74
+ <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
75
+ </div>
76
+
77
+ <p class="txt-xs uppercase tracking-widest txt-gray-400 font-medium">Option D — diagonal shape bleed</p>
78
+
79
+ <div class="bx bg-rose-50 bdr-rose-200 relative overflow-hidden max-w-384px">
80
+ <svg class="absolute top-0 right-0" width="120" height="120" viewBox="0 0 120 120">
81
+ <polygon points="120,0 120,120 0,0" fill="#7c0442" opacity="0.08"/>
82
+ <polygon points="120,0 120,80 40,0" fill="#7c0442" opacity="0.08"/>
83
+ </svg>
84
+ <svg class="absolute bottom-0 left-0" width="70" height="70" viewBox="0 0 70 70">
85
+ <polygon points="0,70 70,70 0,0" fill="#7c0442" opacity="0.06"/>
86
+ </svg>
87
+ <p class="txt-xs font-medium uppercase tracking-widest txt-primary opacity-70">Also available as</p>
88
+ <p class="font-serif txt-base font-medium txt-rose-950">Part of a program</p>
89
+ <p class="txt-sm txt-rose-900">Save with a bundle discount when you enrol in the full program.</p>
90
+ <a href="#" class="txt-sm font-medium txt-primary inline-flex items-center gap-025">View program →</a>
91
+ </div>
92
+
93
+ </div>
94
+
16
95
  <script type="module" src="/main.js"></script>
17
96
  </body>
18
97
 
package/docs/jtb-status.md CHANGED
@@ -128,11 +128,15 @@ a doc is confirmed accurate or a utility is completed.
128
128
  | `overflow-y` | review | ❌ | |
129
129
  | `position` | review | Review | |
130
130
  | `z-index` | review | Review | |
131
- | `top` | review | Review | Offset utilities |
132
- | `bottom` | review | Review | Offset utilities |
133
- | `left` | review | Review | Offset utilities |
134
- | `right` | review | Review | Offset utilities |
135
- | `inset` | review | Review | |
131
+ | `top` | review | Review | Offset utilities |
132
+ | `bottom` | review | Review | Offset utilities |
133
+ | `left` | review | Review | Offset utilities |
134
+ | `right` | review | Review | Offset utilities |
135
+ | `inset` | review | Review | |
136
+ | `-top-*` | ✅ | Review | Negative offset utilities |
137
+ | `-bottom-*` | ✅ | Review | Negative offset utilities |
138
+ | `-left-*` | ✅ | Review | Negative offset utilities |
139
+ | `-right-*` | ✅ | Review | Negative offset utilities |
136
140
 
137
141
  ### Magic Classes (review)
138
142
 
package/docs/utilities/position.md CHANGED
@@ -4,13 +4,13 @@
4
4
 
5
5
  ```html +demo-folded class="bx"
6
6
  <div class="grid gap lg:cols-3 tac">
7
- <div class="bdr p-1">
7
+ <div class="bdr pxy-1">
8
8
  <code>static</code><br> Normal flow
9
9
  </div>
10
- <div class="bdr p-1 relative">
10
+ <div class="bdr pxy-1 relative">
11
11
  <code>relative</code><br> Positioned normally
12
12
  </div>
13
- <div class="bdr p-1 sticky" style="top: 0;">
13
+ <div class="bdr pxy-1 sticky top-0">
14
14
  <code>sticky</code><br> Sticks on scroll
15
15
  </div>
16
16
  </div>
@@ -18,12 +18,12 @@
18
18
 
19
19
  ```html +demo-folded class="bx"
20
20
  <div class="grid gap lg:cols-2 tac">
21
- <div class="bdr p-1 relative" style="height: 80px;">
22
- <div class="absolute top-0 right-0 bdr p-1">
21
+ <div class="bdr pxy-1 relative" style="height: 80px;">
22
+ <div class="absolute top-0 right-0 bdr pxy-1">
23
23
  <code>absolute</code><br> Fixed to parent
24
24
  </div>
25
25
  </div>
26
- <div class="bdr p-1 fixed" style="left: 50%; transform: translateX(-50%);">
26
+ <div class="bdr pxy-1 fixed" style="left: 50%; transform: translateX(-50%);">
27
27
  <code>fixed</code><br> Fixed to viewport
28
28
  </div>
29
29
  </div>
@@ -32,42 +32,54 @@
32
32
  ## Z-Index (review)
33
33
 
34
34
  ```html +demo-folded class="bx"
35
- <div class="grid gap lg:cols-3 tac">
36
- <div class="bdr p-1 z-0">
37
- <code>z-0</code><br> Base layer
35
+ <div class="grid gap lg:cols-4 tac">
36
+ <div class="bdr pxy-1 z-0">
37
+ <code>z-0</code>
38
+ </div>
39
+ <div class="bdr pxy-1 z-above">
40
+ <code>z-above</code>
38
41
  </div>
39
- <div class="bdr p-1 z-1">
40
- <code>z-1</code><br> Above base
42
+ <div class="bdr pxy-1 z-high">
43
+ <code>z-high</code>
41
44
  </div>
42
- <div class="bdr p-1 z-50">
43
- <code>z-50</code><br> High layer
45
+ <div class="bdr pxy-1 z-highest">
46
+ <code>z-highest</code>
44
47
  </div>
45
48
  </div>
46
49
  ```
47
50
 
51
+ | Class | Value |
52
+ | ----- | ----- |
53
+ | `z-0` | 0 |
54
+ | `z-above` | 10 |
55
+ | `z-high` | 100 |
56
+ | `z-higher` | 200 |
57
+ | `z-highest` | 999 |
58
+ | `z-auto` | auto |
59
+
48
60
  ## Offset (review)
49
61
 
50
- Control distance from edges:
62
+ Control distance from edges. Offset utilities set logical properties internally — `top-*` sets `inset-block-start`, `left-*` sets `inset-inline-start`, and so on.
51
63
 
52
64
  ```html +demo-folded class="bx"
53
65
  <div class="grid gap lg:cols-4 tac">
54
- <div class="bdr p-1 relative" style="height: 60px;">
55
- <div class="absolute top-0 bdr p-1">
66
+ <div class="bdr pxy-1 relative" style="height: 60px;">
67
+ <div class="absolute top-0 bdr pxy-1">
56
68
  <code>top-0</code>
57
69
  </div>
58
70
  </div>
59
- <div class="bdr p-1 relative" style="height: 60px;">
60
- <div class="absolute bottom-0 bdr p-1">
71
+ <div class="bdr pxy-1 relative" style="height: 60px;">
72
+ <div class="absolute bottom-0 bdr pxy-1">
61
73
  <code>bottom-0</code>
62
74
  </div>
63
75
  </div>
64
- <div class="bdr p-1 relative" style="height: 60px;">
65
- <div class="absolute left-0 bdr p-1">
76
+ <div class="bdr pxy-1 relative" style="height: 60px;">
77
+ <div class="absolute left-0 bdr pxy-1">
66
78
  <code>left-0</code>
67
79
  </div>
68
80
  </div>
69
- <div class="bdr p-1 relative" style="height: 60px;">
70
- <div class="absolute right-0 bdr p-1">
81
+ <div class="bdr pxy-1 relative" style="height: 60px;">
82
+ <div class="absolute right-0 bdr pxy-1">
71
83
  <code>right-0</code>
72
84
  </div>
73
85
  </div>
@@ -77,8 +89,8 @@ Control distance from edges:
77
89
  ### Inset Shorthand (review)
78
90
 
79
91
  ```html +demo-folded class="bx"
80
- <div class="bdr p-1 relative" style="height: 100px;">
81
- <div class="absolute inset-0 bdr p-1">
92
+ <div class="bdr pxy-1 relative" style="height: 100px;">
93
+ <div class="absolute inset-0 bdr pxy-1">
82
94
  <code>inset-0</code><br> Fills parent
83
95
  </div>
84
96
  </div>
@@ -88,16 +100,44 @@ Control distance from edges:
88
100
 
89
101
  | Class | Value |
90
102
  | ----- | ----- |
91
- | `*-0` | 0rem |
92
- | `*-0.5` | 0.5rem |
103
+ | `*-0` | 0 |
104
+ | `*-025` | 0.25rem |
105
+ | `*-05` | 0.5rem |
93
106
  | `*-1` | 1rem |
107
+ | `*-1.5` | 1.5rem |
94
108
  | `*-2` | 2rem |
109
+ | `*-3` | 3rem |
110
+ | `*-4` | 4rem |
95
111
  | `*-auto` | auto |
112
+ | `*-full` | 100% |
113
+
114
+ ## Negative Offset (review)
115
+
116
+ Prefix any offset utility with `-` to pull an element outside its containing boundary. Useful for decorative elements that bleed off a card or panel edge.
117
+
118
+ ```html +demo-folded class="bx"
119
+ <div class="relative overflow-hidden bdr" style="height: 80px;">
120
+ <div class="absolute -top-1 -right-1 wh-4 bg-primary opacity-20 rounded-full"></div>
121
+ <p class="pxy-1">Card with bleed decoration</p>
122
+ </div>
123
+ ```
124
+
125
+ ### Values (review)
126
+
127
+ | Class | Value |
128
+ | ----- | ----- |
129
+ | `*-0.25` | -0.25rem |
130
+ | `*-0.5` | -0.5rem |
131
+ | `*-1` | -1rem |
132
+ | `*-1.5` | -1.5rem |
133
+ | `*-2` | -2rem |
134
+ | `*-3` | -3rem |
135
+ | `*-4` | -4rem |
96
136
 
97
137
  ## Responsive (review)
98
138
 
99
139
  ```html +demo-folded class="bx"
100
- <div class="bdr p-1">
140
+ <div class="bdr pxy-1">
101
141
  <code>md:fixed lg:top-0</code><br>
102
142
  Fixed on medium, top on large
103
143
  </div>
package/index.html CHANGED
@@ -8,9 +8,14 @@
8
8
  </head>
9
9
 
10
10
  <body>
11
-
12
- <div class="container">
11
+ <div class="container flex gap-3 mt-3">
12
+ <!-- Main content -->
13
13
  <div class="flex-1">
14
+ <h1 class="font-serif txt-3 font-bold lh-tight">EP03: Mammary Magnificence: Breast Development</h1>
15
+ <p class="txt-lg txt-stone-600 max-w-480px">Breast development and lactation: understanding postnatal breast growth, puberty changes, and preparation for breastfeeding</p>
16
+ <div class="txt-base lh-relaxed txt-stone-700 max-w-480px">
17
+ <p>Explore breast development from embryology from embryology through pregnancy, lactation, involution and menopause, with a focus on anatomy, physiology, growth, and hormonal influences to support informed, evidence‑based breastfeeding care.&nbsp;</p>
18
+ </div>
14
19
  <h2>Broad Aims of the Course</h2>
15
20
  <p>The broad aims for this course are:</p>
16
21
  <ul>
@@ -18,67 +23,461 @@
18
23
  <li>Review key factors influencing breast growth and development across the lifespan to strengthen clinical assessment and breastfeeding support.</li>
19
24
  <li>Explore the endocrine regulation of breast development and lactation to enhance understanding of hormonal influences on breastfeeding physiology.</li>
20
25
  </ul>
21
- </div>
22
- </div>
23
-
24
-
25
- <div class="container flex gap-3">
26
- <div class="flex-1">
27
- <h2 class="my-2">Broad Aims of the Course</h2>
28
- <p>The broad aims for this course are:</p>
29
- <ul>
30
- <li>Deepen understanding of breast structure and function from embryology through puberty, pregnancy and lactation to support informed, evidence‑based breastfeeding care.</li>
31
- <li>Review key factors influencing breast growth and development across the lifespan to strengthen clinical assessment and breastfeeding support.</li>
32
- <li>Explore the endocrine regulation of breast development and lactation to enhance understanding of hormonal influences on breastfeeding physiology.</li>
33
- </ul>
34
- </div>
35
- </div>
36
-
37
- <hr>
38
- <hr>
39
- <hr>
40
- <hr>
41
- <hr>
42
- <hr>
43
- <!-- Price card -->
44
- <aside class="w-384px">
45
- <div class="bx rounded-xxl pxy-2">
46
- <div class="txt-xs tracking-widest uppercase txt-muted">Course fee</div>
47
- <div class="font-serif txt-3 font-bold lh-none mt-05">
48
- <sup class="txt-xl">$</sup>110
49
- <span class="txt-base font-normal txt-muted font-sans">AUD</span>
26
+ <h2>IBLCE® Detailed Content Outline</h2>
27
+ <p>Every module maps directly to the IBLCE® Detailed Content Outline, building your knowledge progressively from foundational science through to clinical application.</p>
28
+ <p>This course covers the following IBLCE® DCO items. The applicable Lactation (L), Ethics (E) and Related (R) hours are shown against each heading.</p>
29
+ <div class="space-y-05">
30
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
31
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
32
+ <span class="font-semibold txt-gray-900">I. Development and Nutrition - 2(L)hrs</span>
33
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
34
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
35
+ </svg>
36
+ </button>
37
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
38
+ <div>A. Infant</div>
39
+ <div>B. Maternal</div>
40
+ <h6>A. Infant</h6>
41
+ <div>1. Feeding behaviours at different ages</div>
42
+ <div>2. Food intolerances/allergies</div>
43
+ <div>3. Infant anatomy and anatomical/oral challenges</div>
44
+ <div>4. WHO guidelines for introducing complementary foods</div>
45
+ <div>5. Low birth weight and very low birth weight</div>
46
+ <div>6. Milk banking - formal and informal</div>
47
+ <div>7. Normal infant behaviours</div>
48
+ <div>8. Nutritional requirements - including preterm</div>
49
+ <div>9. Preterm development, growth, and behaviours (including late preterm)</div>
50
+ <div>10. Skin tone, muscle tone, reflexes</div>
51
+ <div>11. Term development and growth</div>
52
+ <div>12. WHO growth charts with gestational age adjustment</div>
53
+ <div>13. Stooling and voiding</div>
54
+ <h6>B. Maternal</h6>
55
+ <div>1. Breast development and growth (typical and atypical)</div>
56
+ <div>2. Breast surgery</div>
57
+ <div>3. Composition of human milk</div>
58
+ <div>4. Maternal anatomical challenges</div>
59
+ <div>5. Maternal nutritional status</div>
60
+ <div>6. Nipple structure and variations</div>
61
+ <div>7. Nipple modifications (e.g., piercings, tattoos)</div>
62
+ </div>
63
+ </div>
64
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
65
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
66
+ <span class="font-semibold txt-gray-900">II. Physiology and Endocrinology - 2(L)hrs</span>
67
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
68
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
69
+ </svg>
70
+ </button>
71
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
72
+ <div>A. Physiology of Lactation</div>
73
+ <div>B. Endocrinology</div>
74
+ <h6>A. Physiology of Lactation</h6>
75
+ <div>1. Relactation</div>
76
+ <div>2. Infertility issues</div>
77
+ <div>3. Inducing lactation</div>
78
+ <div>4. Pregnancy and breastfeeding - tandem</div>
79
+ <div>5. Multiples (e.g., twins, triplets)</div>
80
+ <h6>B. Endocrinology</h6>
81
+ <div>1. Hormonal influence of milk production</div>
82
+ <div>2. Diabetes</div>
83
+ <div>3. Maternal hormonal disorders (e.g., pituitary, thyroid, Polycystic Ovarian Syndrome)</div>
84
+ <div>4. Maternal autoimmune disorders</div>
85
+ <div>5. Newborn hypoglycemia</div>
86
+ </div>
87
+ </div>
88
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
89
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
90
+ <span class="font-semibold txt-gray-900">III. Pathology - 2(L)hrs</span>
91
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
92
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
93
+ </svg>
94
+ </button>
95
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
96
+ <div>A. Infant</div>
97
+ <div>B. Maternal</div>
98
+ <h6>A. Infant</h6>
99
+ <div>1. Ankyloglossia</div>
100
+ <div>2. Cleft lip and palate</div>
101
+ <div>3. Congenital anomalies (e.g., gastrointestinal, cardiac)</div>
102
+ <div>4. Gastroesophageal Reflux Disease (GERD), reflux</div>
103
+ <div>5. Hyperbilirubinemia</div>
104
+ <div>6. Infant neurological disabilities</div>
105
+ <div>7. Small for Gestational Age (SGA), Large for Gestational Age (LGA)</div>
106
+ <div>8. Infant acute disease (e.g., infectious, cardiac, metabolic)</div>
107
+ <div>9. Vertically transmitted infections (e.g., HIV, Hepatitis B)</div>
108
+ <div>10. Esophageal atresia</div>
109
+ <div>11. Inborn error of metabolism</div>
110
+ <div>12. Infant cancer</div>
111
+ <div>13. Infant GI anomalies</div>
112
+ <h6>B. Maternal</h6>
113
+ <div>1. Abscess</div>
114
+ <div>2. Milk ejection reflex dysfunction</div>
115
+ <div>3. Maternal acute disease (e.g., infectious, cardiac, metabolic)</div>
116
+ <div>4. Maternal chronic disease</div>
117
+ <div>5. Maternal disability (physical and neurological)</div>
118
+ <div>6. Mastitis</div>
119
+ <div>7. Milk supply, low or over</div>
120
+ <div>8. Nipple and breast conditions</div>
121
+ <div>9. Nipple pain and trauma</div>
122
+ <div>10. Post-partum hemorrhage</div>
123
+ <div>11. Pre-eclampsia / pregnancy induced hypertension</div>
124
+ <div>12. Maternal cancer</div>
125
+ </div>
126
+ </div>
127
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
128
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
129
+ <span class="font-semibold txt-gray-900">IV. Pharmacology and Toxicology - 1(L)hrs</span>
130
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
131
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
132
+ </svg>
133
+ </button>
134
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
135
+ <div>1. Alcohol</div>
136
+ <div>2. Nicotine and tobacco</div>
137
+ <div>3. Cannabis</div>
138
+ <div>4. Medications (e.g., prescriptions, over-the-counter, diagnostic and therapeutic procedures, aids to labor and delivery)</div>
139
+ <div>5. Drugs of abuse</div>
140
+ <div>6. Contraception</div>
141
+ <div>7. Galactagogues</div>
142
+ <div>8. Gel dressings/nipple creams</div>
143
+ <div>9. Herbs and supplements</div>
144
+ <div>10. Chemotherapy/radiation therapy/radioactive scans</div>
145
+ </div>
146
+ </div>
147
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
148
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
149
+ <span class="font-semibold txt-gray-900">V. Psychology, Sociology, and Anthropology - 3(L)hrs</span>
150
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
151
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
152
+ </svg>
153
+ </button>
154
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
155
+ <div>1. Transition to parenthood</div>
156
+ <div>2. Birth practices</div>
157
+ <div>3. Foods to eat/avoid that influence lactation</div>
158
+ <div>4. Employment - beginning or returning to work</div>
159
+ <div>5. Family lifestyle</div>
160
+ <div>6. Identifying support networks</div>
161
+ <div>7. Maternal mental health</div>
162
+ <div>8. Maternal psychological/cognitive issues</div>
163
+ <div>9. Breastfeeding dyad relationship</div>
164
+ <div>10. Safe sleep</div>
165
+ <div>11. Weaning</div>
166
+ <div>12. Cultural awareness</div>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <h2 class="mt-2">Course Content</h2>
171
+ <div class="mt space-y-05">
172
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
173
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
174
+ <span class="font-semibold txt-gray-900">Course Profile</span>
175
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
176
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
177
+ </svg>
178
+ </button>
179
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
180
+ <div class="pxy-05">
181
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
182
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
183
+ </svg>
184
+ <span> Welcome</span>
185
+ </div>
186
+ <div class="pxy-05">
187
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
188
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
189
+ </svg>
190
+ <span> Recommended Readings</span>
191
+ </div>
192
+ <div class="pxy-05">
193
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
194
+ <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"></path>
195
+ </svg>
196
+ <span> Handbook - Mammary Magnificence</span>
197
+ </div>
198
+ <div class="pxy-05">
199
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
200
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
201
+ </svg>
202
+ <span> Additional Resources</span>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
207
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
208
+ <span class="font-semibold txt-gray-900">Module 1: Breast Development</span>
209
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
210
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
211
+ </svg>
212
+ </button>
213
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
214
+ <div class="pxy-05">
215
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
216
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
217
+ </svg>
218
+ <span> Learning Outcomes</span>
219
+ </div>
220
+ <div class="pxy-05">
221
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
222
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
223
+ </svg>
224
+ <span> Introduction</span>
225
+ </div>
226
+ <div class="pxy-05">
227
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
228
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
229
+ </svg>
230
+ <span> Breasts: Embryogenesis</span>
231
+ </div>
232
+ <div class="pxy-05">
233
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
234
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
235
+ </svg>
236
+ <span> Breasts: Puberty &amp; Menopause</span>
237
+ </div>
238
+ <div class="pxy-05">
239
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
240
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
241
+ </svg>
242
+ <span> Adult Female Breast</span>
243
+ </div>
244
+ <div class="pxy-05">
245
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
246
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
247
+ </svg>
248
+ <span> #1 Quiz - Breast development</span>
249
+ </div>
250
+ <div class="pxy-05">
251
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
252
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
253
+ </svg>
254
+ <span> Self Directed Learning Activity - The Mammary Gland</span>
255
+ </div>
256
+ <div class="pxy-05">
257
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
258
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
259
+ </svg>
260
+ <span> #2 Quiz - The Mammary Gland</span>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
265
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
266
+ <span class="font-semibold txt-gray-900">Module 2: Form &amp;amp; Function</span>
267
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
268
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
269
+ </svg>
270
+ </button>
271
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
272
+ <div class="pxy-05">
273
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
274
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
275
+ </svg>
276
+ <span> Learning Outcomes</span>
277
+ </div>
278
+ <div class="pxy-05">
279
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
280
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
281
+ </svg>
282
+ <span> Introduction</span>
283
+ </div>
284
+ <div class="pxy-05">
285
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
286
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
287
+ </svg>
288
+ <span> Secretory differentiation</span>
289
+ </div>
290
+ <div class="pxy-05">
291
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
292
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
293
+ </svg>
294
+ <span> Secretory activation</span>
295
+ </div>
296
+ <div class="pxy-05">
297
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
298
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
299
+ </svg>
300
+ <span> Lactation</span>
301
+ </div>
302
+ <div class="pxy-05">
303
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
304
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
305
+ </svg>
306
+ <span> #3 Quiz - Secretory differential and activation</span>
307
+ </div>
308
+ <div class="pxy-05">
309
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
310
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
311
+ </svg>
312
+ <span> Self Directed Learning Activity - Hormonal regulation during lactation and breastmilk production</span>
313
+ </div>
314
+ <div class="pxy-05">
315
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
316
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
317
+ </svg>
318
+ <span> #4 Quiz - Hormonal regulation during lactation and breastmilk production</span>
319
+ </div>
320
+ <div class="pxy-05">
321
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
322
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
323
+ </svg>
324
+ <span> Self Directed Learning Activity - Morphological, hormonal, and molecular changes in different tissues during lactation and post-lactation</span>
325
+ </div>
326
+ <div class="pxy-05">
327
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
328
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
329
+ </svg>
330
+ <span> #5 Quiz - Morphological, hormonal, and molecular changes in different tissues during lactation and post-lactation</span>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ <div x-data="{ open: false }" class="border bg-white rounded-lg shadow-sm bdr bdr-gray-200 overflow-hidden">
335
+ <button type="button" x-on:click="open = !open" class="w-full px-1.5 py-1 flex items-center justify-between hover:bg-gray-50">
336
+ <span class="font-semibold txt-gray-900">Module 3: Breast Adaptations</span>
337
+ <svg class="wh-1" :class="{ 'rotate-180': open }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
338
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
339
+ </svg>
340
+ </button>
341
+ <div x-show="open" x-collapse="" class="px-1.5 py-1 mxy-0 txt-gray-600" style="display: none; height: 0px; overflow: hidden;" hidden="">
342
+ <div class="pxy-05">
343
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
344
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
345
+ </svg>
346
+ <span> Learning Outcomes</span>
347
+ </div>
348
+ <div class="pxy-05">
349
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
350
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
351
+ </svg>
352
+ <span> Introduction</span>
353
+ </div>
354
+ <div class="pxy-05">
355
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
356
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
357
+ </svg>
358
+ <span> Lactational involution &amp; suppression</span>
359
+ </div>
360
+ <div class="pxy-05">
361
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
362
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
363
+ </svg>
364
+ <span> Induced lactation &amp; relactation</span>
365
+ </div>
366
+ <div class="pxy-05">
367
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
368
+ <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z"></path>
369
+ </svg>
370
+ <span> Breast variations</span>
371
+ </div>
372
+ <div class="pxy-05">
373
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
374
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
375
+ </svg>
376
+ <span> #6 Quiz - Lactational involution &amp; suppression, Induced lactation &amp; relactation, Breast variations</span>
377
+ </div>
378
+ <div class="pxy-05">
379
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
380
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
381
+ </svg>
382
+ <span> Self Directed Learning Activity - Breast Anomalies</span>
383
+ </div>
384
+ <div class="pxy-05">
385
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
386
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
387
+ </svg>
388
+ <span> #7 Quiz - Breast Anomalies</span>
389
+ </div>
390
+ <div class="pxy-05">
391
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
392
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
393
+ </svg>
394
+ <span> Self Directed Learning Activity - Lactational Involution</span>
395
+ </div>
396
+ <div class="pxy-05">
397
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
398
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
399
+ </svg>
400
+ <span> #8 Quiz - Lactational Involution</span>
401
+ </div>
402
+ <div class="pxy-05">
403
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
404
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"></path>
405
+ </svg>
406
+ <span> Self Directed Learning Activity - Induced and Relactation</span>
407
+ </div>
408
+ <div class="pxy-05">
409
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
410
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
411
+ </svg>
412
+ <span> #9 Quiz - Induced and Relactation</span>
413
+ </div>
414
+ <div class="pxy-05">
415
+ <svg class="icon txt-gray-500 inline-flex mr-1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
416
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z"></path>
417
+ </svg>
418
+ <span> #10 Holistic quiz</span>
419
+ </div>
420
+ </div>
421
+ </div>
50
422
  </div>
51
- <div class="txt-sm txt-muted mt-025 mb-1.5">One-time payment · Instant access</div>
52
- <div wire:key="lw-3804000248-0" wire:snapshot="{&quot;data&quot;:{&quot;program&quot;:null,&quot;course&quot;:[null,{&quot;class&quot;:&quot;App\\Models\\Course&quot;,&quot;key&quot;:4,&quot;s&quot;:&quot;mdl&quot;}],&quot;isProgram&quot;:false,&quot;currentQty&quot;:0,&quot;qty&quot;:1},&quot;memo&quot;:{&quot;id&quot;:&quot;DD6tzQ99xuKRAgLie7fu&quot;,&quot;name&quot;:&quot;cart.add-to-cart&quot;,&quot;path&quot;:&quot;courses\/mammary-magnificence-breast-development&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;829ea9e93d1f8751e07fbb8bd866d8dff86a24c2fd1b7555e7c52430a343755c&quot;}" wire:effects="[]" wire:id="DD6tzQ99xuKRAgLie7fu" wire:name="cart.add-to-cart">
53
- <!--[if BLOCK]><![endif]--> <button type="button" class="btn primary w-full" wire:click="add" icon="shopping-cart" text="Add Course">
54
- <!--[if BLOCK]><![endif]--> <svg class="icon order-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
55
- <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"></path>
56
- </svg>
423
+ </div>
424
+ <!-- Price card -->
425
+ <aside class="w-384px">
426
+ <div class="bx rounded-xxl pxy-2">
427
+ <div class="txt-xs tracking-widest uppercase txt-muted">Course fee</div>
428
+ <div class="font-serif txt-3 font-bold lh-none">
429
+ <sup class="txt-xl">$</sup>110
430
+ <span class="txt-base font-normal txt-muted font-sans">AUD</span>
431
+ </div>
432
+ <div class="txt-sm txt-muted mt-025 mb-1.5">One-time payment · Instant access</div>
433
+ <div wire:key="lw-3804000248-0" wire:snapshot="{&quot;data&quot;:{&quot;program&quot;:null,&quot;course&quot;:[null,{&quot;class&quot;:&quot;App\\Models\\Course&quot;,&quot;key&quot;:4,&quot;s&quot;:&quot;mdl&quot;}],&quot;isProgram&quot;:false,&quot;currentQty&quot;:0,&quot;qty&quot;:1},&quot;memo&quot;:{&quot;id&quot;:&quot;OqBsS7nA3cTaxHxNDeET&quot;,&quot;name&quot;:&quot;cart.add-to-cart&quot;,&quot;path&quot;:&quot;courses\/mammary-magnificence-breast-development&quot;,&quot;method&quot;:&quot;GET&quot;,&quot;release&quot;:&quot;a-a-a&quot;,&quot;children&quot;:[],&quot;scripts&quot;:[],&quot;assets&quot;:[],&quot;errors&quot;:[],&quot;locale&quot;:&quot;en&quot;,&quot;islands&quot;:[]},&quot;checksum&quot;:&quot;5d7e163863bf9a2a7e55c10f7051df541580580e44e194ea2cf71e5e1c1244fd&quot;}" wire:effects="[]" wire:id="OqBsS7nA3cTaxHxNDeET" wire:name="cart.add-to-cart">
434
+ <!--[if BLOCK]><![endif]--> <button type="button" class="btn primary w-full" wire:click="add" icon="shopping-cart" text="Add Course">
435
+ <!--[if BLOCK]><![endif]--> <svg class="icon order-0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
436
+ <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"></path>
437
+ </svg>
438
+ <!--[if ENDBLOCK]><![endif]-->
439
+ <!--[if BLOCK]><![endif]-->
440
+ Add Course
441
+ <!--[if ENDBLOCK]><![endif]--></button>
57
442
  <!--[if ENDBLOCK]><![endif]-->
58
- <!--[if BLOCK]><![endif]-->
59
- Add Course
60
- <!--[if ENDBLOCK]><![endif]--></button>
61
- <!--[if ENDBLOCK]><![endif]-->
62
- </div>
63
- <hr class="bdr-t bdr-stone-200 mb-1.5">
64
- <div class="txt-xs tracking-widest uppercase txt-muted mb-1">What's included</div>
65
- <div class="checklist txt-sm">
443
+ </div>
444
+ <hr class="bdr-t bdr-stone-200 mb-1.5">
445
+ <div class="txt-xs tracking-widest uppercase txt-muted mb-1">What's included</div>
446
+ <div class="checklist txt-sm">
66
447
 
448
+ </div>
449
+ <div class="checklist txt-sm">
450
+ <ul class="txt-sm">
451
+ <li>Flexible online, self-paced delivery</li>
452
+ <li>Downloadable resources included</li>
453
+ <li>Certificate on completion</li>
454
+ </ul>
455
+ </div>
456
+ <div class="checklist txt-sm mt-05">
457
+ <ul class="txt-sm">
458
+ <li>10 Hours of Lactation Education</li>
459
+ </ul>
460
+ </div>
67
461
  </div>
68
- <div class="checklist txt-sm">
69
- <ul class="txt-sm">
70
- <li>Flexible online, self-paced delivery</li>
71
- <li>Downloadable resources included</li>
72
- <li>Certificate on completion</li>
73
- </ul>
74
- </div>
75
- <div class="checklist txt-sm mt-05">
76
- <ul class="txt-sm">
77
- <li>10 Hours of Lactation Education</li>
78
- </ul>
79
- </div>
462
+ </aside>
463
+ </div>
464
+ <div class="flex container gap-4 py-4">
465
+ <div class="">
466
+ <h1>Heading 1</h1>
467
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis maxime deserunt tenetur repellendus! Aperiam cum incidunt impedit esse soluta quidem rem inventore quis, quae voluptate minus quaerat enim velit reiciendis?</p>
468
+ <h2>Heading 2</h2>
469
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis maxime deserunt tenetur repellendus! Aperiam cum incidunt impedit esse soluta quidem rem inventore quis, quae voluptate minus quaerat enim velit reiciendis?</p>
470
+ <h3>Heading 3</h3>
471
+ <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis maxime deserunt tenetur repellendus! Aperiam cum incidunt impedit esse soluta quidem rem inventore quis, quae voluptate minus quaerat enim velit reiciendis?</p>
472
+ </div>
473
+ <div class="">
474
+ <h1>Heading 1</h1>
475
+ <div class="bx">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae cum ipsam eaque, itaque neque error qui molestiae, magni exercitationem reiciendis tenetur molestias cupiditate iure vero veritatis deserunt ad at ipsa.</div>
476
+ <h2>Heading 2</h2>
477
+ <div class="bx">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae cum ipsam eaque, itaque neque error qui molestiae, magni exercitationem reiciendis tenetur molestias cupiditate iure vero veritatis deserunt ad at ipsa.</div>
478
+ <h3>Heading 3</h3>
479
+ <div class="bx">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae cum ipsam eaque, itaque neque error qui molestiae, magni exercitationem reiciendis tenetur molestias cupiditate iure vero veritatis deserunt ad at ipsa.</div>
80
480
  </div>
81
- </aside>
82
481
  </div>
83
482
  <!-- ═══════════════════════════════════════════════════════════════
84
483
  EXAMPLE 1: AURORA
package/jtb-conversion-notes.md CHANGED
@@ -19,6 +19,7 @@ Actionable gaps found during conversion of `loaders_and_spinners.html`.
19
19
  | Positional border-color | `bdr-t-{color}` not generated — `border-color` config has no `positions` key. Needed for spinner accent colour and the spin demo example. |
20
20
  | `flex-shrink: 0` | No `fs-0` or equivalent confirmed. Used on skeleton avatar. |
21
21
  | Percentage widths | `55%`, `65%`, `80%` width values not in JTB sizing scale. Needed for skeleton text blocks. |
22
+ | Negative positioning | ✅ Added `-top-*`, `-bottom-*`, `-left-*`, `-right-*` utilities. Scale mirrors `$positional-values` (excluding 0). See `_layout.scss`. |
22
23
 
23
24
  ## Component Gaps
24
25
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "nk_jtb",
3
3
  "description": "Yet another utility based framework.",
4
- "version": "0.28.1",
4
+ "version": "0.28.3",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "git+https://github.com/naykel76/nk_jtb.git"
package/scripts/jtb-nav.json CHANGED
@@ -59,6 +59,10 @@
59
59
  {
60
60
  "name": "Border (wip)",
61
61
  "route_name": "docs.jtb.utilities.border"
62
+ },
63
+ {
64
+ "name": "Position (wip)",
65
+ "route_name": "docs.jtb.utilities.position"
62
66
  }
63
67
  ]
64
68
  },
package/src/base/_auto-spacing.scss CHANGED
@@ -18,6 +18,16 @@ $inline-exclusions: svg, span;
18
18
  margin-block-start: $base-gap;
19
19
  }
20
20
 
21
+ // Headings connect to text content below — tighter gap than $base-gap
22
+ // Block components (.bx etc) fall back to $base-gap via the general rule
23
+ :where(h1) + :where(p, ul, ol, blockquote) {
24
+ margin-block-start: 1rem;
25
+ }
26
+
27
+ :where(h2, h3, h4, h5, h6) + :where(p, ul, ol, blockquote) {
28
+ margin-block-start: 0.75rem;
29
+ }
30
+
21
31
  // Reverse pattern - layout elements followed by content elements
22
32
  // Catches cases like div + p, section + h1, article + table, etc.
23
33
  // We can't add div/section/article to $spacing-targets because that would also
package/src/base/_typography.scss CHANGED
@@ -19,7 +19,7 @@
19
19
  text-wrap: balance;
20
20
  }
21
21
 
22
- :where(h2, h3, h4, h5, h6):where(:not(:first-child)) {
22
+ :is(h2, h3, h4, h5, h6):not(:first-child) {
23
23
  margin-block-start: 1.5em;
24
24
  }
25
25
 
package/src/maps_and_variables/_value-maps.scss CHANGED
@@ -121,6 +121,8 @@ $inset-map: (auto: auto, full: 100%) !default;
121
121
  $positional-values: (0, 0.25, 0.5, 1, 1.5, 2, 3, 4) !default;
122
122
  $positional-map: smart-merge($inset-map, $positional-values) !default;
123
123
 
124
+ $negative-positional-map: ( -1, -1.5, -2, -3, -4, ) !default;
125
+
124
126
  // ============================================================================
125
127
  // SIZING
126
128
  // ============================================================================
package/src/play.scss CHANGED
@@ -1,25 +1,27 @@
1
+ @use './functions/classes' as *;
1
2
  @use './functions/map-and-list-helpers' as *;
3
+ @use './functions/strings' as *;
4
+ @use './maps_and_variables' as *;
2
5
  @use './maps_and_variables/base' as *;
3
6
  @use './maps_and_variables/colors' as *;
4
7
  @use './mixins/backgrounds' as *;
5
8
  @use './mixins/breakpoint-utilities' as *;
6
9
  @use './mixins/build-system/controllers' as *;
10
+ @use './mixins/build-system/controllers' as *;
7
11
  @use 'sass:map';
8
12
 
9
13
  // prettier-ignore
10
- @include cq-make-on-breakpoint((visibility: hidden), 'invisible', $responsive-variants );
11
-
12
- // prettier-ignore
13
- @include cq-make-on-breakpoint((visibility: visible), 'visible', $responsive-variants );
14
-
15
- // prettier-ignore
16
- @include cq-make-from-breakpoint((visibility: hidden), 'invisible', $responsive-variants );
17
-
18
- // prettier-ignore
19
- @include cq-make-from-breakpoint((visibility: visible), 'visible', $responsive-variants );
14
+ $layout-properties-map: (
15
+ top: ( values: $positional-map, unit: 'rem' ),
16
+ );
20
17
 
21
18
  // prettier-ignore
22
- @include cq-make-to-breakpoint((visibility: hidden), 'invisible', remove-from-list($responsive-variants, xxl));
19
+ $negative-layout-properties-map: (
20
+ top: ( prefix: '-top', values: $negative-positional-map, unit: 'rem' ),
21
+ );
23
22
 
24
- // prettier-ignore
25
- @include cq-make-to-breakpoint((visibility: visible), 'visible', remove-from-list($responsive-variants, xxl));
23
+ // ============================================================================
24
+ // Builds
25
+ // ============================================================================
26
+ @include build-classes($layout-properties-map, $responsive: false);
27
+ @include build-classes($negative-layout-properties-map, $responsive: false);
package/src/utilities/_layout.scss CHANGED
@@ -11,14 +11,23 @@ $layout-properties-map: (
11
11
  overflow-y: ( values: (auto, clip, hidden, scroll, visible) ),
12
12
  position: ( prefix: false, values: (static, absolute, fixed, relative, sticky) ),
13
13
  z-index: ( prefix: "z-", values: ($z-index-map) ),
14
- top: ( values: $positional-map, unit: 'rem' ),
15
- bottom: ( values: $positional-map, unit: 'rem' ),
16
- left: ( values: $positional-map, unit: 'rem' ),
17
- right: ( values: $positional-map, unit: 'rem' ),
14
+ inset-block-start: ( prefix: 'top-', values: $positional-map, unit: 'rem' ),
15
+ inset-block-end: ( prefix: 'bottom-', values: $positional-map, unit: 'rem' ),
16
+ inset-inline-start: ( prefix: 'left-', values: $positional-map, unit: 'rem' ),
17
+ inset-inline-end: ( prefix: 'right-', values: $positional-map, unit: 'rem' ),
18
18
  inset: ( values: $positional-map, unit: 'rem' ),
19
19
  );
20
20
 
21
+ // prettier-ignore
22
+ $negative-layout-properties-map: (
23
+ inset-block-start: ( prefix: '-top', values: $negative-positional-map, unit: 'rem' ),
24
+ inset-block-end: ( prefix: '-bottom', values: $negative-positional-map, unit: 'rem' ),
25
+ inset-inline-start: ( prefix: '-left', values: $negative-positional-map, unit: 'rem' ),
26
+ inset-inline-end: ( prefix: '-right', values: $negative-positional-map, unit: 'rem' ),
27
+ );
28
+
21
29
  // ============================================================================
22
30
  // Builds
23
31
  // ============================================================================
24
32
  @include build-classes($layout-properties-map, $responsive: true);
33
+ @include build-classes($negative-layout-properties-map, $responsive: true);
package/todo.md ADDED
@@ -0,0 +1,3 @@
1
+ position docs
2
+
3
+ themes with light colors or shades