@devslab/site-kit 0.12.0 → 0.13.0

package/dist/types.d.ts

@@ -23,11 +23,25 @@ export interface SiteLink {
     href: string;
     label: string;
     external?: boolean;
+    /**
+     * Drawn heavier than its neighbours. For a link the product must make
+     * easy to find — a Korean site's 개인정보처리방침 (privacy policy), which
+     * the law asks to stand out from the other footer links.
+     */
+    emphasis?: boolean;
 }
 export interface SiteBrand {
     name: string;
     href: string;
     logo?: JSX.Element;
+    /**
+     * The header brand link's accessible name, when the visible name is not
+     * enough ("Acme home"). Start it with the visible name so voice users can
+     * say what they see. A product whose wordmark is its logo passes the mark
+     * as `logo` and `name: ""` — the name would otherwise print twice — and
+     * names the link here.
+     */
+    label?: string;
 }
 export interface LocaleState {
     locale: SiteLocale;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/solid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAC7E,MAAM,WAAW,SAAS;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AAC7E,MAAM,WAAW,WAAW;IAAG,MAAM,EAAE,UAAU,CAAC;IAAC,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;CAAE;AAClG,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/solid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,WAAW;IAAG,MAAM,EAAE,UAAU,CAAC;IAAC,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;CAAE;AAClG,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/package.json

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

package/site-sections.css

@@ -4,6 +4,10 @@
    tokens carry light and dark. */
 
 .site-section { padding-block: var(--dds-space-64); border-block-start: 1px solid var(--dds-color-border-default); }
+/* The site header sticks to the top; an in-page link ("#how") stops the section below it, not under it.
+   A product that changes --site-header-block-size sets it on :root or .site-shell (an ancestor of both
+   the header and <main>) — set on .site-header it resizes the header but never reaches the sections. */
+.site-hero, .site-section { scroll-margin-block-start: calc(var(--site-header-block-size, 64px) + var(--dds-space-8)); }
 .site-section[data-tone="band"] { background: var(--dds-color-bg-subtle); }
 .site-section__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 
@@ -53,7 +57,9 @@ html:lang(ko) .site-rows__body { word-break: keep-all; overflow-wrap: break-word
    height rule — a swapping scene fixes its own height in the consumer. */
 .site-hero { padding-block: var(--dds-space-64); }
 .site-hero__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-48); align-items: start; }
-.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); letter-spacing: .18em; }
+/* Tracking and weight are hooks: wide mono tracking suits Latin caps, not Hangul — a product whose
+   eyebrow is Korean sets --site-hero-eyebrow-tracking: 0 (and a weight) on its landing root. */
+.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); font-weight: var(--site-hero-eyebrow-weight, normal); letter-spacing: var(--site-hero-eyebrow-tracking, .18em); }
 .site-hero__copy h1 { margin: 0; font-size: var(--dds-typo-display-font-size); line-height: var(--dds-typo-display-line-height); letter-spacing: -.025em; text-wrap: balance; white-space: pre-line; }
 .site-hero__lede { margin: 0; margin-block-start: var(--dds-space-24); max-inline-size: 46ch; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-1-font-size); line-height: 1.7; }
 .site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dds-space-16) var(--dds-space-24); margin-block-start: var(--dds-space-32); }

package/styles.css

@@ -8,12 +8,14 @@
 .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); }
-.site-header__inner { min-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-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; }
 .site-nav__list, .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--dds-space-16); padding: 0; margin: 0; list-style: none; }
 .site-nav__list a, .site-footer__links a { color: var(--dds-color-text-secondary); text-decoration: none; }
 .site-nav__list a:hover, .site-footer__links a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteLink.emphasis — a link the product must make easy to find (a Korean privacy policy). */
+:is(.site-nav__list, .site-footer__links, .site-footer__brand) a.site-link--emphasis { color: var(--dds-color-text-primary); font-weight: 700; }
 .site-header__controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--dds-space-8); }
 .site-menu-button { display: none; }
 .site-locale { inline-size: auto; min-inline-size: 9rem; }
@@ -22,7 +24,8 @@
 /* The kit gave these rows layout and colour but no size, so the footer
    inherited the 16px body and read a step larger than the same row on a
    sibling product's page. Every consumer that noticed fixed it locally. */
-.site-footer__links { font-size: var(--dds-typo-body-2-font-size); }
+/* Baseline, so a bare copyright line sits level with links that are 44px targets on touch. */
+.site-footer__links { font-size: var(--dds-typo-body-2-font-size); align-items: baseline; }
 .site-footer__langs { font-size: var(--dds-typo-caption-font-size); }
 .site-footer__langs-menu { position: relative; display: inline-block; }
 .site-footer__langs-trigger { display: inline-flex; align-items: center; gap: var(--dds-space-4); color: var(--dds-color-text-muted); cursor: pointer; list-style: none; }
@@ -38,9 +41,17 @@
 .site-footer__langs-list a[aria-current="page"] { color: var(--dds-color-text-primary); font-weight: 600; }
 .site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dds-space-16) var(--dds-space-32); }
 .site-footer__brand { display: inline-flex; align-items: center; gap: var(--dds-space-8); margin: 0; color: var(--dds-color-text-secondary); }
-.site-footer__brand img, .site-footer__brand svg { block-size: 16px; inline-size: 16px; }
+/* The icon mark beside a printed name. A wordmark passed as the logo (name "") keeps its own size. */
+.site-footer__brand:has(> strong) :is(img, svg) { block-size: 16px; inline-size: 16px; }
 .site-footer__brand a { color: inherit; text-decoration: none; }
 .site-footer__brand a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteFooter.details — a block under the brand line (business registration, address). */
+.site-footer__identity { display: grid; gap: var(--dds-space-8); min-inline-size: 0; }
+.site-footer__details { display: grid; gap: var(--dds-space-4); color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-2-font-size); }
+.site-footer__details > * { margin: 0; }
+.site-footer__details address { font-style: normal; }
+/* With details the left column runs several lines; the links sit level with its first line, not its middle. */
+.site-footer__row:has(> .site-footer__identity) { align-items: first baseline; }
 .site-legal { max-inline-size: 760px; margin-inline: auto; padding-block: var(--dds-space-40); }
 .site-status { border: 1px solid var(--dds-color-border-default); border-inline-start-width: var(--dds-space-4); border-radius: var(--dds-radius-md); padding: var(--dds-space-12) var(--dds-space-16); }
 .site-status--danger { border-inline-start-color: var(--dds-color-status-danger); }
@@ -54,14 +65,25 @@
 .oss-product-mark--md { --oss-product-mark-size: 32px; }
 .oss-product-mark--lg { --oss-product-mark-size: 48px; }
 
+/* Touch: every link in the chrome is a 44px target (spec §6), as every button already is
+   (dds-css button.css). Placed before the narrow block so its menu rows can override the display. */
+@media (pointer: coarse) {
+  .site-brand, .site-nav__list a, .site-footer__links a, .site-footer__brand a, .site-footer__langs-trigger { display: inline-flex; align-items: center; min-block-size: 44px; }
+  .site-footer__langs-list a { display: flex; align-items: center; min-block-size: 44px; }
+}
+
 @media (max-width: 720px) {
-  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--dds-space-12); }
+  /* The first row is the header's own height whatever the button's size (44px on touch), so the
+     closed header is the same 64px everywhere and a section's scroll offset holds. */
+  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--site-header-block-size, 64px); padding-block: 0; }
   .site-menu-button { display: inline-flex; grid-column: 2; grid-row: 1; }
   .site-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
   .site-nav[data-open="true"] { display: grid; }
-  .site-nav__list { display: grid; }
+  /* The open menu is a list of full-width 44px rows (about the pitch the 16px gap gave text lines). */
+  .site-nav__list { display: grid; gap: 0; }
+  .site-nav__list a { display: flex; align-items: center; min-block-size: 44px; }
   .site-header__controls { display: none; grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
-  .site-header__controls[data-open="true"] { display: flex; }
+  .site-header__controls[data-open="true"] { display: flex; padding-block-end: var(--dds-space-12); }
 }
 
 @media (prefers-reduced-motion: reduce) { .site-header { scroll-behavior: auto; } }