@kywi-software/core 0.6.6 → 0.7.0

package/dist/site/styles.css

@@ -315,6 +315,386 @@
   color: #065f46;
 }
 
+/* ── Navigation (navMenu / navigation / breadcrumbs / siteMap) ───────────────
+ * Root markup:
+ *   <nav class="kywi-nav kywi-nav--{variant}" data-kywi-nav data-kywi-nav-variant>
+ *     <details class="kywi-nav-mobile"><summary>…</summary></details>
+ *     <ul class="kywi-nav-list kywi-nav-list--level-1">
+ *       <li class="kywi-nav-item kywi-nav-item--has-children">
+ *         <a class="kywi-nav-link">…</a>
+ *         <button class="kywi-nav-toggle" aria-expanded>…</button>
+ *         <div class="kywi-nav-panel">…</div>
+ *
+ * BREAKPOINT — one constant, 860px. A media query cannot read a custom
+ * property, so the literal below (859.98px, the last step before 860) is the
+ * ONLY place it appears in this file; kywi.js switches hover/keyboard behaviour
+ * at the matching `(min-width: 860px)`. Everything else — spacing, colour,
+ * radius, panel width — is a `--kywi-*` token with a neutral fallback, and the
+ * per-nav knobs are re-exposed as `--kywi-nav-*` so a theme can retune one nav
+ * without rewriting these rules.
+ *
+ * Panels open three ways so the nav works with JS off: `.kywi-nav-item--open`
+ * (kywi.js), `:hover`, and `:focus-within` (keyboard). Closed panels stay in the
+ * tab order — that is what makes the focus fallback reachable without JS.
+ *
+ * Every selector is rooted at `[data-kywi-nav-variant]` deliberately: the bare
+ * `.kywi-nav` / `.kywi-nav-item` / `.kywi-nav-link` classes are also used by the
+ * KywiNav scope helper and the admin sidebar, and neither should inherit this. */
+
+.kywi-nav[data-kywi-nav-variant] {
+  --_kywi-nav-gap: var(--kywi-nav-gap, var(--kywi-spacing-md, 1rem));
+  --_kywi-nav-pad-y: var(--kywi-nav-link-padding-y, var(--kywi-spacing-sm, 0.5rem));
+  --_kywi-nav-pad-x: var(--kywi-nav-link-padding-x, var(--kywi-spacing-sm, 0.5rem));
+  --_kywi-nav-text: var(--kywi-nav-color, var(--kywi-color-text, #0f172a));
+  --_kywi-nav-muted: var(--kywi-color-muted, #64748b);
+  --_kywi-nav-accent: var(--kywi-nav-color-active, var(--kywi-color-primary, #2563eb));
+  --_kywi-nav-surface: var(--kywi-nav-panel-background, var(--kywi-color-background, #ffffff));
+  --_kywi-nav-border: var(--kywi-color-border, #e2e8f0);
+  --_kywi-nav-radius: var(--kywi-border-radius-md, 10px);
+  --_kywi-nav-shadow: var(--kywi-nav-panel-shadow, 0 12px 32px rgba(15, 23, 42, 0.14));
+  --_kywi-nav-panel-width: var(--kywi-nav-panel-width, 15rem);
+  position: relative;
+  font-family: var(--kywi-font-family-base, inherit);
+  color: var(--_kywi-nav-text);
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-link,
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-label {
+  display: block;
+  padding: var(--_kywi-nav-pad-y) var(--_kywi-nav-pad-x);
+  color: inherit;
+  text-decoration: none;
+  border-radius: var(--kywi-border-radius-sm, 6px);
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-label { color: var(--_kywi-nav-muted); }
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-link:hover { color: var(--_kywi-nav-accent); }
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-link:focus-visible,
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-toggle:focus-visible,
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile-toggle:focus-visible {
+  outline: 2px solid var(--_kywi-nav-accent);
+  outline-offset: 2px;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item--active > .kywi-nav-link {
+  color: var(--_kywi-nav-accent);
+  font-weight: 600;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item--ancestor > .kywi-nav-link { font-weight: 600; }
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-description {
+  display: block;
+  padding: 0 var(--_kywi-nav-pad-x) var(--_kywi-nav-pad-y);
+  margin-top: calc(-1 * var(--kywi-spacing-xs, 0.25rem));
+  font-size: 0.82rem;
+  line-height: 1.45;
+  color: var(--_kywi-nav-muted);
+}
+
+/* Disclosure trigger — sits beside the link, never replaces it. */
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.6rem;
+  height: 1.6rem;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: 0;
+  border-radius: var(--kywi-border-radius-sm, 6px);
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-chevron {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: translateY(-0.1rem) rotate(45deg);
+  transition: transform 140ms ease;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item--open > .kywi-nav-toggle .kywi-nav-chevron {
+  transform: translateY(0.05rem) rotate(-135deg);
+}
+
+/* Panels — hidden but focusable (see header note), revealed by class, hover or
+ * focus-within. */
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-panel {
+  position: absolute;
+  z-index: 40;
+  min-width: var(--_kywi-nav-panel-width);
+  padding: var(--kywi-spacing-sm, 0.5rem);
+  background: var(--_kywi-nav-surface);
+  border: 1px solid var(--_kywi-nav-border);
+  border-radius: var(--_kywi-nav-radius);
+  box-shadow: var(--_kywi-nav-shadow);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-0.35rem);
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item--open > .kywi-nav-panel,
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item:hover > .kywi-nav-panel,
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-item:focus-within > .kywi-nav-panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: none;
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-panel .kywi-nav-list--level-3 {
+  padding-left: var(--kywi-spacing-sm, 0.5rem);
+}
+
+/* Horizontal bar. */
+.kywi-nav--horizontal .kywi-nav-list--level-1 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--_kywi-nav-gap);
+}
+.kywi-nav--horizontal .kywi-nav-item,
+.kywi-nav--vertical .kywi-nav-item { position: relative; }
+.kywi-nav--horizontal .kywi-nav-item--has-children,
+.kywi-nav--mega .kywi-nav-item--has-children {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--kywi-spacing-xs, 0.25rem) / 2);
+}
+.kywi-nav--horizontal .kywi-nav-panel {
+  top: 100%;
+  left: 0;
+  margin-top: var(--kywi-spacing-xs, 0.25rem);
+}
+.kywi-nav--horizontal .kywi-nav-panel--flip { left: auto; right: 0; }
+
+/* Mega — one full-width panel measured against the nav, not the item. */
+.kywi-nav--mega .kywi-nav-list--level-1 {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--_kywi-nav-gap);
+}
+.kywi-nav--mega .kywi-nav-item { position: static; }
+.kywi-nav--mega .kywi-nav-panel--mega {
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: var(--kywi-spacing-xs, 0.25rem);
+  padding: var(--kywi-spacing-lg, 1.5rem);
+}
+.kywi-nav-mega-inner {
+  max-width: var(--kywi-nav-mega-max-width, 1100px);
+  margin: 0 auto;
+}
+.kywi-nav-mega-intro {
+  margin: 0 0 var(--kywi-spacing-md, 1rem);
+  color: var(--_kywi-nav-muted);
+  font-size: 0.9rem;
+}
+.kywi-nav-mega-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
+  gap: var(--kywi-spacing-lg, 1.5rem);
+}
+.kywi-nav-mega-heading {
+  margin: 0 0 var(--kywi-spacing-xs, 0.25rem);
+  font-family: var(--kywi-font-family-heading, var(--kywi-font-family-base, inherit));
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--_kywi-nav-muted);
+}
+.kywi-nav-mega-heading .kywi-nav-link,
+.kywi-nav-mega-heading .kywi-nav-label { padding-left: 0; padding-right: 0; }
+.kywi-nav-mega-description {
+  margin: 0 0 var(--kywi-spacing-sm, 0.5rem);
+  font-size: 0.85rem;
+  color: var(--_kywi-nav-muted);
+}
+.kywi-nav-mega-column .kywi-nav-link { padding-left: 0; }
+.kywi-nav-mega-column .kywi-nav-description { padding-left: 0; }
+
+/* Vertical side nav — panels fly out to the right. */
+.kywi-nav--vertical .kywi-nav-list--level-1 {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--_kywi-nav-gap) / 4);
+}
+.kywi-nav--vertical .kywi-nav-item--has-children {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+}
+.kywi-nav--vertical .kywi-nav-item--has-children > .kywi-nav-description { grid-column: 1 / -1; }
+.kywi-nav--vertical .kywi-nav-panel {
+  top: 0;
+  left: 100%;
+  margin-left: var(--kywi-spacing-xs, 0.25rem);
+  transform: translateX(-0.35rem);
+}
+.kywi-nav--vertical .kywi-nav-panel--flip {
+  left: auto;
+  right: 100%;
+  margin-left: 0;
+  margin-right: var(--kywi-spacing-xs, 0.25rem);
+}
+.kywi-nav--vertical .kywi-nav-list--level-2,
+.kywi-nav--vertical .kywi-nav-list--level-3 {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Footer columns — headings + link stacks, no interactivity. */
+.kywi-nav--footer .kywi-nav-columns {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: var(--kywi-spacing-xl, 2.5rem);
+}
+.kywi-nav--footer .kywi-nav-column-heading {
+  margin: 0 0 var(--kywi-spacing-sm, 0.5rem);
+  font-family: var(--kywi-font-family-heading, var(--kywi-font-family-base, inherit));
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--_kywi-nav-muted);
+}
+.kywi-nav--footer .kywi-nav-column-heading .kywi-nav-link,
+.kywi-nav--footer .kywi-nav-column-heading .kywi-nav-label,
+.kywi-nav--footer .kywi-nav-list .kywi-nav-link { padding-left: 0; padding-right: 0; }
+.kywi-nav--footer .kywi-nav-column-description {
+  margin: 0 0 var(--kywi-spacing-sm, 0.5rem);
+  font-size: 0.85rem;
+  color: var(--_kywi-nav-muted);
+}
+.kywi-nav--footer .kywi-nav-list--level-2 { display: grid; gap: calc(var(--kywi-spacing-xs, 0.25rem) / 2); }
+.kywi-nav--footer .kywi-nav-description { padding-left: 0; }
+
+/* Mobile hamburger. The <details> is EMPTY on purpose — its list sibling is
+ * revealed with `[open] ~ .kywi-nav-list`, because a closed <details> does not
+ * paint or hit-test its own contents in current Chromium, which makes the
+ * "force it open again on desktop" trick unreliable. Above the breakpoint the
+ * summary is simply hidden and the bar renders normally. */
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile { display: none; }
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--kywi-spacing-sm, 0.5rem);
+  padding: var(--_kywi-nav-pad-y) var(--_kywi-nav-pad-x);
+  cursor: pointer;
+  list-style: none;
+  border: 1px solid var(--_kywi-nav-border);
+  border-radius: var(--kywi-border-radius-sm, 6px);
+}
+.kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile-toggle::-webkit-details-marker { display: none; }
+.kywi-nav-burger {
+  position: relative;
+  width: 1rem;
+  height: 2px;
+  background: currentColor;
+}
+.kywi-nav-burger::before,
+.kywi-nav-burger::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: currentColor;
+}
+.kywi-nav-burger::before { top: -5px; }
+.kywi-nav-burger::after { top: 5px; }
+
+@media (max-width: 859.98px) {
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile { display: block; }
+  /* Collapsed: the bar is hidden until the disclosure is open. */
+  .kywi-nav--horizontal .kywi-nav-mobile ~ .kywi-nav-list--level-1,
+  .kywi-nav--mega .kywi-nav-mobile ~ .kywi-nav-list--level-1,
+  .kywi-nav--vertical .kywi-nav-mobile ~ .kywi-nav-list--level-1 { display: none; }
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-mobile[open] ~ .kywi-nav-list--level-1 {
+    display: block;
+    margin-top: var(--kywi-spacing-sm, 0.5rem);
+  }
+  /* Accordion: panels sit inline and stay open, so every link is reachable
+   * without JS — the hamburger itself is the only disclosure. */
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-item { position: static; display: block; }
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-toggle { display: none; }
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-panel,
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-panel--mega {
+    position: static;
+    min-width: 0;
+    margin: 0 0 0 var(--kywi-spacing-md, 1rem);
+    padding: 0;
+    opacity: 1;
+    pointer-events: auto;
+    transform: none;
+    background: none;
+    border: 0;
+    border-left: 1px solid var(--_kywi-nav-border);
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .kywi-nav-mega-columns { grid-template-columns: 1fr; gap: var(--kywi-spacing-md, 1rem); }
+  .kywi-nav--footer .kywi-nav-columns { gap: var(--kywi-spacing-lg, 1.5rem); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-panel,
+  .kywi-nav[data-kywi-nav-variant] .kywi-nav-chevron { transition: none; }
+}
+
+/* Breadcrumbs — inline trail, separators drawn by CSS. */
+.kywi-module-breadcrumbs .kywi-breadcrumbs-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--kywi-spacing-xs, 0.25rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.88rem;
+  color: var(--kywi-color-muted, #64748b);
+}
+.kywi-module-breadcrumbs .kywi-breadcrumb-item { display: flex; align-items: center; }
+.kywi-module-breadcrumbs .kywi-breadcrumb-item + .kywi-breadcrumb-item::before {
+  content: var(--kywi-breadcrumb-separator, '/');
+  margin-right: var(--kywi-spacing-xs, 0.25rem);
+  color: var(--kywi-color-border, #e2e8f0);
+}
+.kywi-module-breadcrumbs .kywi-breadcrumb-item a { color: inherit; text-decoration: none; }
+.kywi-module-breadcrumbs .kywi-breadcrumb-item a:hover { color: var(--kywi-color-primary, #2563eb); }
+.kywi-module-breadcrumbs .kywi-breadcrumb-current > span {
+  color: var(--kywi-color-text, #0f172a);
+  font-weight: 600;
+}
+
+/* Site map — indented nested outline. */
+.kywi-module-sitemap .kywi-sitemap-title {
+  margin: 0 0 var(--kywi-spacing-md, 1rem);
+  font-family: var(--kywi-font-family-heading, var(--kywi-font-family-base, inherit));
+  font-size: 1.35rem;
+  color: var(--kywi-color-heading, var(--kywi-color-text, #0f172a));
+}
+.kywi-module-sitemap .kywi-sitemap-list { margin: 0; padding: 0; list-style: none; }
+.kywi-module-sitemap .kywi-sitemap-list .kywi-sitemap-list {
+  margin-top: var(--kywi-spacing-xs, 0.25rem);
+  padding-left: var(--kywi-spacing-md, 1rem);
+  border-left: 1px solid var(--kywi-color-border, #e2e8f0);
+}
+.kywi-module-sitemap .kywi-sitemap-item { padding: 0.15rem 0; }
+.kywi-module-sitemap .kywi-sitemap-link {
+  color: var(--kywi-color-text, #0f172a);
+  text-decoration: none;
+}
+.kywi-module-sitemap .kywi-sitemap-link:hover { color: var(--kywi-color-primary, #2563eb); }
+.kywi-module-sitemap .kywi-sitemap-active > .kywi-sitemap-link {
+  color: var(--kywi-color-primary, #2563eb);
+  font-weight: 600;
+}
+.kywi-module-sitemap .kywi-sitemap-label { color: var(--kywi-color-muted, #64748b); }
+
 /* ── Front-of-site edit overlay (?kywi-edit=1) ───────────────────────────────
  * Styles the KywiEditToolbar + editable-region affordances so the overlay is
  * visible on a fresh public site. The toolbar self-gates on edit permission
@@ -671,7 +1051,8 @@ body.kywi-selfid-hello-bar-top-open {
 .kywi-selfid-skip:hover { color: var(--kywi-color-text, #0f172a); }
 
 /* Transparency surface — the single global personalization control (#105).
- * Anchored to the bottom-right corner as a small pill; clicking the pill swaps
+ * Anchored to the bottom-left corner as a small pill (the self-ID slide-in owns
+ * the bottom-right); clicking the pill swaps
  * it for the panel (which audience, switch, reset, opt out). This file is the
  * ONLY stylesheet for it — the runtime injects nothing of its own. */
 /* These surfaces are injected into whatever the host page's CSS reset is, so
@@ -686,12 +1067,15 @@ body.kywi-selfid-hello-bar-top-open {
 }
 .kywi-transparency {
   position: fixed;
-  right: var(--kywi-spacing-lg, 1.5rem);
+  /* Bottom-LEFT, deliberately: the self-ID slide-in card owns the bottom-right
+     corner, and stacking both there leaves the pill unreachable underneath the
+     card (caught in live UAT). Two fixed personalization surfaces, two corners. */
+  left: var(--kywi-spacing-lg, 1.5rem);
   bottom: var(--kywi-spacing-lg, 1.5rem);
   z-index: 55;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: flex-start;
   gap: var(--kywi-spacing-sm, 0.5rem);
   width: max-content;
   max-width: min(22rem, calc(100vw - 2rem));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kywi-software/core",
-  "version": "0.6.6",
+  "version": "0.7.0",
   "description": "Kywi CMS core — schema generator, REST API, and admin UI for Next.js.",
   "type": "module",
   "license": "AGPL-3.0-only",