@devslab/site-kit 0.17.0 → 0.17.1

package/README.ko.md

@@ -58,6 +58,7 @@ claim leaf가 검증된 사실 레지스트리를 참조하도록 강제한다.
 - `SiteLink.emphasis`는 링크를 굵게 그린다(헤더 내비게이션·푸터 링크·패밀리 링크). 법이 눈에 띄게 하라는 개인정보처리방침용.
 - `SiteFooter` `consentSettings: { controller, label }`는 링크 뒤, 저작권 앞에 동의 설정을 다시 여는 "쿠키 설정" 버튼을 둔다(D-034). 다른 링크와 같아 보이고 터치에서는 44px 대상이다. [동의](#동의-옵트인-분석) 참고.
 - 섹션(그리고 히어로)은 같은 페이지 링크로 이동하면 붙어 있는 헤더 아래에 멈춘다: `scroll-margin-block-start` = 헤더 높이 + 8px. 헤더 높이는 `--site-header-block-size`(기본 64px) — `:root`나 `.site-shell`(헤더와 `<main>`의 공통 조상)에 정한다. `.site-header`에 정하면 섹션은 64px 간격 그대로다.
+- 킷 헤더 뒤의 다른 모든 `id` 요소(개인정보처리방침의 `#analytics` 제목, `<main id="main-content">`)도 링크로 이동하면(다른 페이지에서 오든 같은 페이지 안이든) 헤더와 그 테두리 아래 16px에 멈춘다: `scroll-margin-block-start` = 헤더 높이 + 1px + 16px(D-035). 명시도 0이라 제품이 대상에 준 `scroll-margin`이 이기고, 섹션은 8px 그대로다. 닫힌 헤더 기준이다 — 어떤 폭에서 헤더가 두 줄로 접히는 제품은 그 폭에서 `--site-header-block-size`를 올린다.
 - `--site-hero-eyebrow-tracking`(기본 `.18em`)과 `--site-hero-eyebrow-weight`(기본 `normal`)로 히어로 키커를 조정한다. 넓은 모노 자간은 라틴 대문자에 맞고, 키커가 한국어인 제품은 랜딩 뿌리에서 자간을 `0`으로 둔다.
 
 새 props를 쓰든 안 쓰든 모든 제품에 적용되는 기본값: 위의 44px 터치 누르는 면, 좁은 헤더 첫 줄이 `--site-header-block-size`(64px)이고 위아래 패딩 없음 — 전역 `box-sizing: border-box` 리셋이 없는 제품은 휴대폰 헤더가 24px 낮아지고(64px에 위아래 12px 패딩이었음), 메뉴 버튼이 44px인 제품은 4px 낮아진다 — 열린 메뉴의 링크는 간격 없는 44px 줄이고 컨트롤 줄 아래 12px, 섹션·히어로의 스크롤 간격, Esc·링크로 메뉴 닫힘, 푸터 링크의 기준선 정렬과 details가 있는 줄의 첫 줄 정렬.

package/README.md

@@ -58,6 +58,7 @@ For a single-language product, and for a footer that has to print business detai
 - `SiteLink.emphasis` draws a link heavier (header navigation, footer links, family links) — for a Korean site's privacy policy, which the law asks to stand out.
 - `SiteFooter` `consentSettings: { controller, label }` adds a "쿠키 설정" button after the links, before the copyright, that reopens the consent settings (D-034). It reads as one of the links and is a 44px target on touch; see [Consent](#consent-opt-in-analytics).
 - Sections (and the hero) stop below the sticky header when an in-page link targets them: `scroll-margin-block-start` is the header height plus 8px. The header height is `--site-header-block-size` (default 64px); set it on `:root` or `.site-shell` — an ancestor of both the header and `<main>` — not on `.site-header`, or the sections keep the 64px offset.
+- Every other element with an `id` after the kit header (a privacy page's `#analytics` heading, `<main id="main-content">`) stops 16px below the header and its border when a link lands on it, from another page or the same one: `scroll-margin-block-start` is the header height plus 1px plus 16px (D-035). The rule has zero specificity, so a product's own `scroll-margin` on a target wins, and sections keep their 8px. It covers the closed header; a product whose header wraps to a second row at some width raises `--site-header-block-size` there.
 - `--site-hero-eyebrow-tracking` (default `.18em`) and `--site-hero-eyebrow-weight` (default `normal`) tune the hero eyebrow. Wide mono tracking suits Latin capitals; a product whose eyebrow is Korean sets the tracking to `0` on its landing root.
 
 Defaults that apply to every product, with or without the new props: the 44px touch targets above; the narrow header's first row is `--site-header-block-size` (64px) with no block padding — a product without a global `box-sizing: border-box` reset loses 24px of phone header height (it was 64px plus 12px padding each side), and one whose menu button is 44px loses 4px; the open menu's links are 44px rows with no gap and its controls row has 12px below it; sections and the hero get the scroll offset; the menu closes on Escape and on following a link; footer links are baseline-aligned, and a row with details aligns on the first line.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devslab/site-kit",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "Strict i18n, SEO/GEO, and Solid public-site shells for DevsLab products",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -65,7 +65,7 @@
     "./fonts/*": "./fonts/*"
   },
   "dependencies": {
-    "@devslab/dds-solid": "0.17.0"
+    "@devslab/dds-solid": "0.17.1"
   },
   "peerDependencies": {
     "@tanstack/solid-router": "1.170.30",

package/styles.css

@@ -13,6 +13,12 @@
 .site-main { flex: 1; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 .site-main--bleed { inline-size: 100%; }
 .site-header { position: sticky; inset-block-start: 0; z-index: 100; border-block-end: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-default); }
+/* Anything a link can land on (#analytics on a privacy page) stops below the sticky header instead of
+   under it: the header row, its 1px border, then 16px of air. Only after a kit header, through the
+   shell's sibling structure (MarketingShell: header, then <main> and the footer), so it reads
+   --site-header-block-size wherever sections do (:root or .site-shell). Zero specificity: sections and
+   the hero keep their own 8px offset (site-sections.css), and any product rule on a target wins. */
+:where(.site-header ~ [id], .site-header ~ * [id]) { scroll-margin-block-start: calc(var(--site-header-block-size, 64px) + 1px + var(--dds-space-16)); }
 .site-header__inner { min-block-size: var(--site-header-block-size, 64px); inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
 .site-brand { justify-self: start; color: var(--dds-color-text-primary); font-weight: 700; text-decoration: none; }
 .site-nav { grid-column: 2; justify-self: center; min-inline-size: 0; }