temp

packages/site-chapter/lib/client.ts

@@ -0,0 +1,4 @@
+import {define} from "./client/define.ts"
+export * from "./client/element.ts"
+
+define()

packages/site-chapter/lib/client/define.ts

@@ -0,0 +1,27 @@
+import {ChapterContainer} from "./element.ts"
+
+declare global {
+  interface Window {
+    ChapterContainer: typeof ChapterContainer
+  }
+
+  interface HTMLElementTagNameMap {
+    "chapter-container": ChapterContainer
+  }
+
+  namespace preact {
+    namespace JSX {
+      interface IntrinsicElements {
+        "chapter-container": HTMLAttributes<ChapterContainer>
+      }
+    }
+  }
+}
+
+export function define(): void {
+  if (window.customElements.get(ChapterContainer.tagName)) {
+    return
+  }
+  window.ChapterContainer = ChapterContainer
+  window.customElements.define(ChapterContainer.tagName, ChapterContainer)
+}

packages/site-chapter/lib/client/element.ts

@@ -0,0 +1,84 @@
+export class ChapterContainer extends HTMLElement {
+  static get tagName(): string {
+    return "chapter-container"
+  }
+
+  get navigationHidden(): boolean {
+    return this.#hasState("navigation-hidden")
+  }
+
+  set navigationHidden(s: boolean) {
+    this.#changeState("navigation-hidden", s)
+  }
+
+  connectedCallback(): void {
+    this.#attach()
+    this.#setup()
+  }
+
+  #internals: ElementInternals | null = null
+
+  #attach(): void {
+    if (this.attachInternals) {
+      this.#internals = this.attachInternals()
+    }
+  }
+
+  #setup(): void {
+    this.#setupState()
+  }
+
+  #setupState(): void {
+    if (this.#internals && CSS.supports("selector(:state(_))")) {
+      this.#hasState = this.#hasModernState
+      this.#changeState = this.#changeModernState
+      return
+    }
+    this.#hasState = this.#hasFallbackState
+    this.#changeState = this.#changeFallbackState
+  }
+
+  toggleNavigationHidden(): void {
+    this.navigationHidden = !this.navigationHidden
+  }
+
+  #hasState: (k: string) => boolean = () => false
+
+  #hasFallbackState(k: string): boolean {
+    const s = this.getAttribute(`state-${k}`)
+    if (s === null) {
+      return false
+    }
+    return true
+  }
+
+  #hasModernState(k: string): boolean {
+    const t = this.#internals
+    if (!t) {
+      return false
+    }
+    return t.states.has(k)
+  }
+
+  #changeState: (k: string, v: boolean) => void = () => void 0
+
+  #changeFallbackState(k: string, v: boolean): void {
+    if (!v) {
+      this.removeAttribute(`state-${k}`)
+      return
+    }
+    this.setAttribute(`state-${k}`, "")
+  }
+
+  #changeModernState(k: string, v: boolean): void {
+    const t = this.#internals
+    if (!t) {
+      return
+    }
+    if (!v) {
+      t.states.delete(k)
+      return
+    }
+    t.states.add(k)
+  }
+}

packages/site-chapter/lib/main.css

@@ -8,11 +8,19 @@
   --chapter-navigation-width: calc(var(--chapter-navigation-content-width) + var(--chapter-navigation-padding-inline) * 2 + var(--chapter-navigation-border-width));
 
   --chapter-content-padding-block: var(--base-size-32);
-  --chapter-content-padding-inline: var(--base-size-40);
+  --chapter-content-padding-inline: var(--base-size-16);
   --chapter-content-max-width: calc(var(--temp-chapter-breakpoint-xlarge) - var(--chapter-navigation-width));
 
   display: grid;
   grid-template-columns: auto var(--chapter-navigation-width) minmax(0, var(--chapter-content-max-width)) auto;
+
+  @media (--size-viewport-width-small) {
+    --chapter-content-padding-inline: var(--base-size-24);
+  }
+
+  @media (--size-viewport-width-medium) {
+    --chapter-content-padding-inline: var(--base-size-40);
+  }
 }
 
 .chapter::before {
@@ -32,7 +40,23 @@
   order: -1;
 }
 
+.chapter[state-navigation-hidden],
+.chapter:state(navigation-hidden) {
+  @media not (--size-viewport-width-medium) {
+    /* Do not remove the px unit */
+    --chapter-navigation-width: 0px;
+  }
+}
+
+.chapter[state-navigation-hidden] .chapter__navigation,
+.chapter:state(navigation-hidden) .chapter__navigation {
+  @media not (--size-viewport-width-medium) {
+    display: none;
+  }
+}
+
 .chapter__navigation {
+  background-color: var(--color-background-muted);
   border-right-color: var(--color-border-muted);
   border-right-style: solid;
   border-right-width: var(--chapter-navigation-border-width);
@@ -43,6 +67,7 @@
 }
 
 .chapter__content {
+  background-color: var(--color-background-default);
   display: flex;
   flex-direction: column;
   grid-column: 3;
@@ -53,12 +78,11 @@
 
 /* Integration with @onlyoffice/site-search */
 
-.chapter search-container {
-  display: block;
+.chapter .search {
   margin-bottom: var(--base-size-32);
 }
 
-.chapter .search {
+.chapter .search .text-input {
   min-width: 100%;
 }
 
@@ -77,7 +101,15 @@
 .chapter__content .content::after {
   content: "";
   display: block;
-  padding-top: 140px;
+  padding-top: calc(var(--base-size-48) + var(--base-size-64));
+
+  @media (--size-viewport-width-medium) {
+    padding-top: calc(var(--base-size-64) + var(--base-size-64));
+  }
+
+  @media (--size-viewport-width-large) {
+    padding-top: calc(var(--base-size-112) + var(--base-size-64));
+  }
 }
 
 /* Integration with @onlyoffice/site-help */

packages/site-chapter/lib/main.tsx

@@ -1,10 +1,11 @@
 import {type ChildrenIncludable} from "@onlyoffice/preact-types"
 import {type HTMLAttributes} from "preact/compat"
 import {type JSX, h} from "preact"
+import {type ChapterContainer} from "./client.ts"
 
-export function Chapter(p: HTMLAttributes<HTMLDivElement>): JSX.Element {
+export function Chapter(p: HTMLAttributes<ChapterContainer>): JSX.Element {
   const {children, ...props} = p
-  return <div class="chapter" {...props}>{children}</div>
+  return <chapter-container class="chapter" {...props}>{children}</chapter-container>
 }
 
 export function ChapterNavigation({children}: ChildrenIncludable): JSX.Element {

packages/site-chapter/package.json

@@ -5,6 +5,9 @@
   "main": "lib/main.tsx",
   "exports": {
     ".": "./lib/main.tsx",
+    "./client/define.ts": "./lib/client/define.ts",
+    "./client/element.ts": "./lib/client/element.ts",
+    "./client.ts": "./lib/client.ts",
     "./main.css": "./lib/main.css"
   },
   "scripts": {