markupress 0.8.3 → 0.8.4

package/README.md

@@ -64,4 +64,4 @@ Markupress has its own quiet green light/dark palette. Its shell, navigation row
 
 Without a saved mode, the site follows the operating system and responds when that preference changes. The header's theme button fixes and remembers the chosen mode. In an application that supplies its own mode switch, set `data-theme="light"` or `data-theme="dark"`; nested boundaries apply only to their descendants. Remove the root attribute when using the CSS directly to follow system preference.
 
-The shared shell supports `--markupress-sidebar-width`, `--markupress-content-width`, `--markupress-page-width` and `--markupress-outline-width`. Navigation uses Looma's `--ui-nav-*`, `--ui-selection-*`, typography, spacing and focus families. On screens at or below 996px it becomes a native popover drawer.
+The shared shell supports `--markupress-sidebar-width`, `--markupress-content-width`, `--markupress-page-width` and `--markupress-outline-width`. Navigation is rendered by Looma's Disclosure and Nav Item components and uses its `--ui-nav-*`, `--ui-selection-*`, typography, spacing and focus families. On screens at or below 996px it becomes a native popover drawer.

package/dist/navigation.d.ts

@@ -14,7 +14,7 @@ export declare function siteLink(to: string, home: string): string;
 export type NavItem = Link & {
     readonly icon?: string;
 };
-/** A sidebar entry as `<hk-nav>` renders it: a page or link with `href`, and a folder or group with `children`. */
+/** A sidebar entry from HTMLKit, rendered through Looma navigation controls: a page or link with `href`, and a folder or group with `children`. */
 export interface SidebarNode {
     readonly label: string;
     readonly href?: string;

package/dist/navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIzD,mGAAmG;AACnG,MAAM,WAAW,IAAI;IAAG,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AACvE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEzD;AACD,mIAAmI;AACnI,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,mHAAmH;AACnH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,GAAG,WAAW,EAAE,CAGrH;AAID;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CA0BvG"}
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAIzD,mGAAmG;AACnG,MAAM,WAAW,IAAI;IAAG,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE;AACvE;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEzD;AACD,mIAAmI;AACnI,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG;IAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAExD,mJAAmJ;AACnJ,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,SAAS,WAAW,EAAE,CAAC;CAC3C;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,SAAS,cAAc,EAAE,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,GAAG,WAAW,EAAE,CAGrH;AAID;;;GAGG;AACH,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,IAAI,EAAE,CAAA;KAAE,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CA0BvG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markupress",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Versioned Markdown documentation built on HTMLKit and native declarative components.",
   "license": "MIT",
   "type": "module",
@@ -76,7 +76,7 @@
   },
   "peerDependencies": {
     "@nextwebwg/html-next": "1.0.0-alpha.69",
-    "@threadlabs/looma": "^0.33.0 || ^0.34.0"
+    "@threadlabs/looma": "^0.33.0 || ^0.34.0 || ^0.35.0"
   },
   "bin": {
     "markupress": "./dist/cli.js"

package/theme/navigation.html

@@ -0,0 +1,36 @@
+<link rel="component" href="@threadlabs/looma/components/ui-disclosure/ui-disclosure.html">
+<link rel="component" href="@threadlabs/looma/components/ui-nav-item/ui-nav-item.html">
+<link rel="component" href="@threadlabs/looma/components/ui-icon/ui-icon.html">
+<template component="markupress-nav-items">
+<defs>
+<prop name="items" type="list(object({ label: string, current: string, depth: number, href?: string, group?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>HTMLKit navigation items with nested sections.</prop>
+</defs>
+<ul><li $each="item of $items">
+<template $match>
+<ui-disclosure $when="$item.children" variant="navigation" density="compact" from:summary="$item.label" from:open="$item.open">
+<ui-icon slot="indicator" name="chevron-down"></ui-icon>
+<ui-nav-item $if="$item.href" as="a" density="compact" from:href="$item.href" from:current="$item.current">{concat($item.label, ' overview')}</ui-nav-item>
+<markupress-nav-items from:items="$item.children"></markupress-nav-items>
+</ui-disclosure>
+<ui-nav-item $else as="a" density="compact" from:href="$item.href" from:current="$item.current">{$item.label}</ui-nav-item>
+</template>
+</li></ul>
+<style>
+:host { display: block; min-inline-size: 0; list-style: none; margin: 0; padding: 0; }
+li { margin: var(--ui-space-0-5) 0; padding: 0; }
+</style>
+</template>
+<template component="markupress-navigation">
+<defs>
+<prop name="items" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>HTMLKit's section navigation, rendered with Looma controls.</prop>
+<prop name="label" type="string" default="Documentation">Accessible name for this navigation region.</prop>
+</defs>
+<div>
+<nav class="enhanced" from:aria-label="$label"><markupress-nav-items from:items="$items"></markupress-nav-items></nav>
+<div class="native"><hk-nav from:items="$items" from:label="$label"></hk-nav></div>
+</div>
+<style>
+.native { display: none; }
+@media (scripting: none) { .enhanced { display: none; } .native { display: block; } }
+</style>
+</template>

package/theme/shell.html

@@ -1,6 +1,7 @@
 <link rel="component" href="@threadlabs/looma/components/ui-icon-button/ui-icon-button.html">
 <link rel="component" href="./chrome.html">
 <link rel="component" href="./outline.html">
+<link rel="component" href="./navigation.html">
 <template component="markupress-shell" controller="../dist/controllers/shell.js">
 <defs>
 <title>{$title}</title>
@@ -13,7 +14,7 @@
 <prop name="badge" type="string" default="">Badge beside the title</prop>
 <prop name="search" type="string" default="">The URL of the version's search index</prop>
 <prop name="nav" type="list(object({ label: string, href: string, current: string, icon: string }))" required>Top navigation: the sections, then the configured links, each with an icon URL or ""</prop>
-<prop name="sidebar" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>The section's sidebar: pages and links, and folders and groups with children, as &lt;hk-nav&gt; renders them</prop>
+<prop name="sidebar" type="list(object({ label: string, current: string, depth: number, href?: string, open?: boolean, children?: list(object({ label: string, ... })), ... }))" required>The section's sidebar: pages and links, and folders and groups with children, as HTMLKit supplies them</prop>
 <prop name="contents" type="list(object({ label: string, href: string, description: string }))" required>A generated index's pages and folders</prop>
 <prop name="outline" type="list(object({ id: string, href: string, label: string, depth: number }))" required>The page's headings</prop>
 <prop name="footer" type="object({ columns: list(object({ title: string, items: list(object({ label: string, href: string, current: string })) })), copyright: string })" required>Footer link columns and copyright</prop>
@@ -28,7 +29,7 @@
 <span class="menu" slot="menu"><ui-icon-button label="Navigation" variant="ghost" tone="neutral" popovertarget="documentation-navigation"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"></rect><path d="M9 3v18"></path></svg></ui-icon-button></span></markupress-header>
 <div class="columns"><aside id="documentation-navigation" popover aria-label="Documentation">
 <nav class="mobile-sections" $if="$nav.length" aria-label="Sections"><ul><li $each="item of $nav"><a from:href="$item.href" from:aria-current="$item.current">{$item.label}</a></li></ul></nav>
-<hk-nav from:items="$sidebar" label="Documentation"></hk-nav>
+<markupress-navigation from:items="$sidebar" label="Documentation"></markupress-navigation>
 <nav class="versions" $if="$versions.length > 1" aria-label="Documentation versions"><strong>Versions</strong><ul><li $each="version of $versions"><a from:href="$version.href" from:aria-current="$version.current">{$version.label}</a><small $if="$version.note">{$version.note}</small></li></ul></nav>
 </aside><main id="documentation-content" tabindex="-1"><hk-breadcrumbs from:items="$crumbs"></hk-breadcrumbs><slot name="page"></slot>
 <ul class="contents" $if="$contents.length"><li $each="entry of $contents"><a from:href="$entry.href">{$entry.label}</a><p $if="$entry.description">{$entry.description}</p></li></ul>

package/theme/theme.css

@@ -9,23 +9,6 @@
 [data-component~="markupress-shell"] [data-component="hk-pager"] a { display: grid; }
 [data-component~="markupress-shell"] [data-component="hk-pager"] a[rel="next"] { margin-inline-start: auto; text-align: end; }
 [data-component~="markupress-shell"] [data-component="hk-pager"] small { color: var(--ui-text-muted, inherit); }
-/* The sidebar is HTMLKit's <hk-nav>: nested lists, with each folder and group in a native <details>. */
-[data-component~="markupress-shell"] [data-component="hk-nav"] ul { margin: 0; padding: 0; list-style: none; }
-[data-component~="markupress-shell"] [data-component="hk-nav"] { font-size: var(--ui-font-size-sm); line-height: var(--ui-line-height-normal, 1.5); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] li { margin: var(--ui-space-0-5) 0; }
-[data-component~="markupress-shell"] [data-component="hk-nav"] details ul { padding-inline-start: var(--ui-space-3); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] summary { cursor: pointer; font-weight: var(--ui-font-bold); font-size: var(--ui-font-size-xs); letter-spacing: .09em; text-transform: uppercase; color: var(--ui-text-secondary); padding: var(--ui-nav-padding-block) var(--ui-nav-padding-inline); border-radius: var(--ui-selection-radius); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] a {
-  display: flex; align-items: center; min-block-size: var(--ui-nav-compact-min-block-size);
-  padding: var(--ui-nav-compact-padding-block) var(--ui-nav-compact-padding-inline);
-  border-radius: var(--ui-selection-radius); color: var(--ui-text-secondary); text-decoration: none;
-  transition: background-color var(--ui-motion-fast) var(--ui-ease-standard, ease), color var(--ui-motion-fast) var(--ui-ease-standard, ease);
-}
-[data-component~="markupress-shell"] [data-component="hk-nav"] summary > a { display: inline; padding: 0; min-block-size: 0; font: inherit; color: inherit; }
-[data-component~="markupress-shell"] [data-component="hk-nav"] :is(a, summary):hover { background: var(--ui-nav-hover-surface); color: var(--ui-text); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] :is(a, summary):active { background: var(--ui-selection-surface); color: var(--ui-selection-text); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] a[aria-current="page"] { background: var(--ui-selection-surface); color: var(--ui-selection-text); font-weight: var(--ui-font-bold); }
-[data-component~="markupress-shell"] [data-component="hk-nav"] :is(a, summary):focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-ring); outline-offset: var(--ui-focus-offset, 2px); }
 /* Shared blocks. Markdown inside a callout or tabs is projected into a Looma component, where the page's scoped
    prose styles never reach (HTML Next styling: a page's rules stop at every nested component), so these global
    rules space the blocks and repeat the prose code styles inside them. Details is native and needs no script. */