@santi020k/lumen-astro 4.1.0 → 4.3.0

package/README.md

@@ -103,12 +103,15 @@ The stylesheet defaults `--ui-font` to `"Montserrat", "Avenir Next", "Segoe UI",
 It declares the family stack but does not bundle or load font files. Load Montserrat once through
 your preferred delivery path, or override `--ui-font` in application CSS.
 
-With Tailwind, keep the Lumen import in the same shared CSS entry:
+With Tailwind CSS v4, keep the Lumen imports in the same shared CSS entry. The optional
+`tailwind.css` bridge (Lumen 4.3+) maps semantic colors to utilities such as `bg-surface` and
+`text-ink`, including nested themes. See the [Tailwind guide](https://lumen.santi020k.com/docs/web/tailwind):
 
 ```css
 @import "@santi020k/lumen-astro/layers.css";
 @import "tailwindcss";
 @import "@santi020k/lumen-astro/styles.css";
+@import "@santi020k/lumen-astro/tailwind.css";
 ```
 
 ```astro
@@ -324,6 +327,9 @@ import { Button, Icon } from '@santi020k/lumen-astro'
 
 `Anchor` accepts heading `depth`, `index`, and `description` metadata plus an `activationOffset`.
 Its current link stays synchronized on click and scroll, including at the end of the document.
+The activation line uses the greater of `activationOffset` and the root `scroll-padding-top` plus
+each heading's `scroll-margin-top`, with a one CSS pixel rounding tolerance. Styles are read live so
+text resizing and responsive headers keep native fragment links and the current section aligned.
 `ScrollProgress` derives reading progress from the document and pins the indicator to the top or
 bottom viewport edge. Both use the single root `UIPrimitives` runtime.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen-astro",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -9,7 +9,9 @@
   "sideEffects": [
     "./styles/lumen.css",
     "./styles/critical.css",
-    "./styles.css"
+    "./styles.css",
+    "./styles/tailwind.css",
+    "./styles/layers.css"
   ],
   "types": "./index.ts",
   "exports": {
@@ -26,7 +28,8 @@
     "./layers.css": "./styles/layers.css",
     "./styles.css": "./styles/lumen.css",
     "./styles/critical.css": "./styles/critical.css",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./tailwind.css": "./styles/tailwind.css"
   },
   "files": [
     "bin",
@@ -43,8 +46,8 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen": "^4.1.0",
-    "@santi020k/lumen-core": "^4.1.0",
+    "@santi020k/lumen": "^4.3.0",
+    "@santi020k/lumen-core": "^4.3.0",
     "uqr": "^0.1.3"
   },
   "devDependencies": {

package/runtime/controllers/document-navigation.ts

@@ -1,11 +1,4 @@
-const decodeFragment = (fragment: string): string => {
-  try {
-    return decodeURIComponent(fragment)
-  } catch {
-    // A literal percent sign can still identify a section; isolate malformed escapes.
-    return fragment
-  }
-}
+import { decodeLumenAnchorFragment, getLumenActiveAnchorIndex } from '@santi020k/lumen-core'
 
 interface AnchorDispatcher {
   callbacks: WeakMap<HTMLElement, () => void>
@@ -56,7 +49,7 @@ const initAnchors = (scope: ParentNode): void => {
 
     for (const link of links) {
       const fragment = link.getAttribute('href')?.slice(1) ?? ''
-      const id = decodeFragment(fragment)
+      const id = decodeLumenAnchorFragment(fragment)
       const target = id ? ownerDocument.getElementById(id) : null
 
       if (target) {
@@ -66,6 +59,8 @@ const initAnchors = (scope: ParentNode): void => {
 
     if (!targets.length) continue
 
+    const headings = targets.map(({ target }) => target)
+
     const setActive = (active: HTMLAnchorElement): void => {
       for (const link of links) {
         const isActive = link === active
@@ -81,21 +76,8 @@ const initAnchors = (scope: ParentNode): void => {
     }
 
     const update = (): void => {
-      const scrollingElement = ownerDocument.scrollingElement ?? ownerDocument.documentElement
-      const maximum = scrollingElement.scrollHeight - scrollingElement.clientHeight
-      const atEnd = maximum > 0 && scrollingElement.scrollTop >= maximum - 1
-      const offset = Number(root.dataset.uiAnchorOffset) || 0
-      let active = targets[0]?.link
-
-      if (atEnd) {
-        active = targets.at(-1)?.link
-      } else {
-        for (const item of targets) {
-          if (item.target.getBoundingClientRect().top > offset) break
-
-          active = item.link
-        }
-      }
+      const index = getLumenActiveAnchorIndex(headings, Number(root.dataset.uiAnchorOffset))
+      const active = targets[index]?.link
 
       if (active) setActive(active)
     }

package/styles/critical.css

@@ -837,6 +837,10 @@
   width: min(100%, 34rem);
 }
 
+lumen-date-picker.ui-date-picker-field {
+  display: block;
+}
+
 .ui-combobox > .ui-input {
   width: 100%;
 }

package/styles/tailwind.css

@@ -0,0 +1 @@
+@import "@santi020k/lumen/tailwind.css";