@operato/help 8.0.0-beta.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
+
+
+
+## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
+
+
+### :bug: Bug Fix
+
+* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
+
+
+
 ## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
 
 **Note:** Version bump only for package @operato/help

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/help",
   "description": "Webcomponent help following open-wc recommendations",
   "author": "heartyoh",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {
@@ -66,12 +66,12 @@
   },
   "dependencies": {
     "@material/web": "^2.0.0",
-    "@operato/data-grist": "^8.0.0-beta.0",
-    "@operato/layout": "^8.0.0-beta.0",
-    "@operato/markdown": "^8.0.0-beta.0",
-    "@operato/shell": "^8.0.0-beta.0",
-    "@operato/styles": "^8.0.0-beta.0",
-    "@operato/utils": "^8.0.0-beta.0",
+    "@operato/data-grist": "^8.0.0-beta.2",
+    "@operato/layout": "^8.0.0-beta.2",
+    "@operato/markdown": "^8.0.0-beta.2",
+    "@operato/shell": "^8.0.0-beta.2",
+    "@operato/styles": "^8.0.0-beta.2",
+    "@operato/utils": "^8.0.0-beta.2",
     "lit": "^3.1.2",
     "pwa-helpers": "^0.9.1"
   },
@@ -107,5 +107,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "c4e9cc245659d050a9ffd66542083a6daad4bcb9"
+  "gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
 }

package/.editorconfig

@@ -1,29 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
-
-[*.json]
-indent_size = 2
-
-[*.{html,js,md}]
-block_comment_start = /**
-block_comment = *
-block_comment_end = */

package/.storybook/main.js

@@ -1,3 +0,0 @@
-module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};

package/.storybook/preview.js

@@ -1,52 +0,0 @@
-import { i18next } from '@operato/i18n'
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    toolbar: {
-      icon: 'globe',
-      items: [
-        { value: 'en', right: '🇺🇸', title: 'English' },
-        { value: 'ko', right: '🇰🇷', title: '한국어' },
-        { value: 'zh', right: '🇨🇳', title: '中文' },
-        { value: 'ja', right: '🇯🇵', title: '日本語' },
-        { value: 'ms', right: '🇲🇾', title: 'Bahasa Melayu' }
-      ],
-      showName: true
-    }
-  },
-  theme: {
-    name: 'Theme',
-    description: 'Global theme for components',
-    toolbar: {
-      icon: 'paintbrush',
-      items: [
-        { value: 'light', title: 'Light' },
-        { value: 'dark', title: 'Dark' }
-      ],
-      showName: true
-    }
-  }
-}
-
-export const decorators = [
-  (Story, context) => {
-    const { locale, theme } = context.globals
-
-    if (locale) {
-      i18next.changeLanguage(locale)
-    }
-
-    // Set the theme class for the document
-    if (theme === 'dark') {
-      document.documentElement.classList.add('dark')
-      document.documentElement.classList.remove('light')
-    } else {
-      document.documentElement.classList.add('light')
-      document.documentElement.classList.remove('dark')
-    }
-
-    return Story()
-  }
-]

package/.storybook/server.mjs

@@ -1,8 +0,0 @@
-import { storybookPlugin } from '@web/dev-server-storybook';
-import baseConfig from '../web-dev-server.config.mjs';
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  ...baseConfig,
-  open: '/',
-  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
-});

package/demo/index.html

@@ -1,45 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-  <head>
-    <meta charset="utf-8" />
-    <style>
-      body {
-        background: #fafafa;
-        --ox-checkbox-size: 12px;
-      }
-
-      #demo {
-        position: relative;
-        height: 300px;
-        background-color: lightgray;
-        vertical-align: middle;
-      }
-    </style>
-    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="demo"></div>
-
-    <script type="module">
-      import { html, render } from 'lit'
-      import '../dist/src/components/ox-help-icon.js'
-
-      const parent = document.querySelector('#demo')
-      const topic = 'abc'
-
-      render(html`<ox-help-icon .topic=${topic}></ox-help-icon>`, parent)
-    </script>
-  </body>
-</html>

package/src/components/ox-help-icon.ts

@@ -1,49 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { openHelp } from '../controller/help.js'
-
-@customElement('ox-help-icon')
-export class HelpIcon extends LitElement {
-  static styles = css`
-    md-icon {
-      position: relative;
-      top: 4px;
-      cursor: help;
-      opacity: var(--help-icon-opacity);
-      color: var(--help-icon-color);
-      line-height: 0;
-
-      --md-icon-size: var(--help-icon-size);
-
-      &:hover {
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--help-icon-hover-color);
-      }
-    }
-  `
-
-  @property({ type: String }) topic!: string
-
-  onclick = (e: Event) => {
-    e.stopPropagation()
-
-    openHelp(this.topic)
-  }
-
-  onpointerdown: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null = (e: Event) => {
-    e.stopPropagation()
-  }
-
-  onpointerup: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null = (e: Event) => {
-    e.stopPropagation()
-  }
-
-  render() {
-    const topic = this.topic
-
-    return html`${topic ? html`<md-icon>help</md-icon>` : html``}`
-  }
-}

package/src/components/ox-inline-help.ts

@@ -1,29 +0,0 @@
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { openHelp } from '../controller/help.js'
-
-@customElement('ox-inline-help')
-export class InlineHelp extends LitElement {
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-    }
-  `
-
-  @property({ type: String }) topic!: string
-  @property({ type: String }) type!: string
-
-  render() {
-    return html` <slot></slot> `
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    this.renderRoot.addEventListener('click', e => {
-      openHelp(this.topic)
-    })
-  }
-}

package/src/components/ox-title-with-help.ts

@@ -1,39 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { i18next, localize } from '@operato/i18n'
-
-import { openHelp } from '../controller/help.js'
-
-@customElement('ox-title-with-help')
-export class TitleWithHelp extends localize(i18next)(LitElement) {
-  static styles = css`
-    md-icon {
-      position: relative;
-      top: 4px;
-      cursor: help;
-      opacity: var(--help-icon-opacity);
-      color: var(--help-icon-color);
-      line-height: 0;
-
-      --md-icon-size: var(--help-icon-size);
-
-      &:hover {
-        opacity: var(--help-icon-hover-opacity);
-        color: var(--help-icon-hover-color);
-      }
-    }
-  `
-
-  @property({ type: String }) msgid!: string
-  @property({ type: String }) topic!: string
-
-  render() {
-    const title = i18next.t(this.msgid)
-    const topic = this.topic
-
-    return html` ${title} ${topic ? html`<md-icon @click=${() => openHelp(topic)}>help</md-icon>` : html``} `
-  }
-}

package/src/controller/help.ts

@@ -1,13 +0,0 @@
-import { closeOverlay, openOverlay } from '@operato/layout'
-
-export function openHelp(topic: string) {
-  openOverlay('help', {
-    templateProperties: {
-      topic
-    }
-  })
-}
-
-export function closeHelp() {
-  closeOverlay('help')
-}

package/src/grist/help-decorated-renderer.ts

@@ -1,19 +0,0 @@
-import '../components/ox-help-icon.js'
-
-import { html } from 'lit-html'
-
-import { ColumnConfig, FieldRenderer, GristRecord } from '@operato/data-grist'
-
-interface HelpExtendedRecord extends GristRecord {
-  help?: (value: any, column: ColumnConfig, record: GristRecord, rowIndex: number, owner: any) => string
-}
-
-const decoratorTemplate = (topic: string) => html`<ox-help-icon style="flex: 0;" .topic=${topic}>help</ox-help-icon>`
-
-export const HelpDecoratedRenderer: FieldRenderer = (value, column, record, rowIndex, field) => {
-  const { help } = column?.record as HelpExtendedRecord
-  const text = value === undefined ? '' : value
-
-  const topic = help && help(value, column, record, rowIndex, field)
-  return html`<span>${text}</span>&nbsp;${topic ? decoratorTemplate(topic) : ''}`
-}

package/src/help-style.ts

@@ -1,123 +0,0 @@
-import { css } from 'lit'
-
-export const HelpStyle = css`
-  h1 {
-    background-color: var(--help-panel-title-background-color);
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: var(--help-panel-h1-title-font-size);
-    text-transform: capitalize;
-    color: var(--help-panel-h1-title-color);
-  }
-  h2 {
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: var(--help-panel-h2-title-font-size);
-    color: var(--help-panel-h2-title-color);
-    text-transform: capitalize;
-  }
-  h3 {
-    margin: var(--help-panel-title-margin);
-    padding: var(--help-panel-title-padding);
-    font-size: var(--help-panel-h3-title-font-size);
-    color: var(--help-panel-h3-title-color);
-  }
-  md-icon {
-    vertical-align: middle;
-  }
-
-  img {
-    display: block;
-    margin: var(--spacing-small) var(--spacing-medium);
-    max-width: 100%;
-  }
-  img[src*='#icon25'] {
-    width: 25px;
-    height: 25px;
-  }
-  img[src*='#icon50'] {
-    width: 50px;
-    height: 50px;
-  }
-  img[src*='#icon100'] {
-    width: 100px;
-    height: 100px;
-  }
-  img[src*='#icon25inlined'],
-  img[src*='#icon50inlined'],
-  img[src*='#icon100inlined'] {
-    display: inline-block;
-    margin: var(--spacing-small);
-  }
-  p {
-    margin: var(--help-panel-paragraph-margin);
-    font-size: var(--help-panel-font-size);
-  }
-  [focusBox] {
-    display: block;
-    padding: var(--help-panel-focusBox-padding);
-    border: var(--help-panel-focusBox-border);
-    border-radius: var(--help-panel-focusBox-border-radius);
-    background-color: var(--help-panel-focusBox-background-color);
-    color: var(--help-panel-focusBox-color);
-  }
-
-  [subtitle] {
-    font-weight: bold;
-  }
-  [subtitle]::before {
-    content: '';
-    width: 7px;
-    height: 7px;
-    display: inline-block;
-    border: 3px solid var(--md-sys-color-surface);
-    border-radius: 50%;
-    margin-right: var(--spacing-small);
-  }
-  p + ol,
-  p + ul {
-    font-size: var(--help-panel-content-font-size);
-  }
-  ol,
-  ul {
-    padding: 0 0 0 30px;
-  }
-  ol li,
-  ul li {
-    margin: 0 0 2px 0;
-  }
-  a {
-    margin-bottom: 0 !important;
-    color: var(--help-panel-a-color);
-    font-size: var(--fontsize-default);
-    text-decoration: underline;
-  }
-  a md-icon {
-    margin: 0;
-
-    --md-icon-size: var(--help-panel-a-icon-size);
-  }
-  a:hover {
-    background-color: var(--opacity-light-dark-color);
-    font-weight: bold;
-  }
-
-  table {
-    border-collapse: collapse;
-    border: var(--border-dim-color);
-    font-size: 0.9em;
-  }
-  th {
-    border-top: 3px solid var(--md-sys-color-on-primary-container);
-    background-color: var(--md-sys-color-background);
-    color: var(--md-sys-color-on-secondary-container);
-  }
-  th,
-  td {
-    border-bottom: var(--border-dim-color);
-    padding: var(--spacing-small);
-  }
-  tr:nth-child(even) {
-    background-color: #f6f6f6;
-  }
-`

package/src/index.ts

@@ -1,5 +0,0 @@
-export * from './controller/help.js'
-export * from './grist/help-decorated-renderer.js'
-export * from './components/ox-inline-help.js'
-export * from './components/ox-title-with-help.js'
-export * from './components/ox-help-icon.js'

package/src/pages/ox-help-home.ts

@@ -1,126 +0,0 @@
-import '@material/web/icon/icon.js'
-
-import { css, html } from 'lit'
-import { customElement, property, query } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import Headroom from '@operato/headroom'
-import { i18next, localize } from '@operato/i18n'
-import { navigate, PageView, store } from '@operato/shell'
-import { HeadroomStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-help-home')
-class HelpHome extends connect(store)(localize(i18next)(PageView)) {
-  static styles = [
-    ScrollbarStyles,
-    HeadroomStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        position: relative;
-
-        --md-icon-size: 24px;
-      }
-
-      #navigation {
-        position: absolute;
-        display: flex;
-        width: 100%;
-        padding: var(--help-navigation-padding);
-        border-bottom: var(--help-navigation-bottom);
-        background-color: var(--md-sys-color-surface);
-      }
-
-      #navigation md-icon {
-        padding: var(--help-navigation-icon-padding, var(--padding-default));
-        border-right: var(--help-navigation-icon-border);
-        cursor: pointer;
-        color: var(--help-icon-color);
-      }
-
-      #content {
-        flex: 1;
-
-        overflow: auto;
-        padding: var(--help-panel-content-padding);
-        margin: var(--help-panel-margin);
-      }
-
-      #upward {
-        --md-icon-size: 26px;
-        position: absolute;
-        bottom: var(--data-list-fab-position-vertical);
-        right: var(--data-list-fab-position-horizontal);
-        background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
-        color: var(--data-list-fab-color);
-        box-shadow: var(--data-list-fab-shadow);
-        padding: 7px;
-
-        scroll-padding-top: 65px;
-      }
-    `
-  ]
-
-  @property({ type: String }) topic!: string
-  @property({ type: Boolean }) showGotoTop: boolean = false
-
-  @query('#content') content!: HTMLElement
-  @query('#navigation') navigation!: HTMLElement
-
-  get context() {
-    return {
-      title: i18next.t('text.help')
-    }
-  }
-
-  render() {
-    const src = this.topic && `/helps/${this.topic || 'index'}.md`
-
-    return html`
-      <ox-markdown id="content" .src=${src} toc></ox-markdown>
-
-      <div id="navigation">
-        <md-icon @click=${() => navigate('help')} ?disabled=${this.topic == 'index'}>home</md-icon>
-        <md-icon @click=${() => window.history.back()}>keyboard_arrow_left</md-icon>
-        <md-icon @click=${() => window.history.forward()}>keyboard_arrow_right</md-icon>
-      </div>
-
-      ${this.showGotoTop
-        ? html` <md-icon id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `
-        : html``}
-    `
-  }
-
-  override async firstUpdated() {
-    this.content.addEventListener('scroll', (e: Event) => {
-      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0
-    })
-
-    await this.requestUpdate()
-
-    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))
-    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'
-
-    var headroom = new Headroom(this.navigation, {
-      scroller: this.content
-    })
-
-    headroom.init()
-  }
-
-  override async pageUpdated(changes: any, lifecycle: any) {
-    if (this.active) {
-      this.topic = lifecycle.params['topic'] || 'index'
-      this.content.scrollTop = 0
-    }
-  }
-
-  gotoTop(e: Event) {
-    this.content.scrollTop = 0
-
-    e.stopPropagation()
-  }
-}

package/src/themes/help-theme.css

@@ -1,57 +0,0 @@
-body {
-  --help-panel-background-color: var(--theme-white-color);
-  --help-panel-width: 450px;
-  --help-panel-margin: 0;
-  --help-panel-padding: var(--padding-default) 0 var(--padding-default) var(--padding-wide);
-  --help-panel-border-raidus: 9px;
-  --help-panel-box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.15);
-  --help-panel-border: 2px solid var(--primary-color);
-
-  --help-panel-color: var(--primary-text-color);
-
-  --help-panel-title-margin: var(--margin-default) 0 var(--margin-narrow) 0;
-  --help-panel-title-padding: 0;
-  --help-panel-title-background-color: rgba(var(--primary-color-rgb), 0.1);
-  --help-panel-h1-title-font-size: 1.6em;
-  --help-panel-h1-title-color: var(--primary-color);
-  --help-panel-h2-title-font-size: 1.3em;
-  --help-panel-h2-title-color: var(--secondary-color);
-  --help-panel-h3-title-font-size: 1.1em;
-  --help-panel-h3-title-color: var(--secondary-text-color);
-
-  --help-panel-content-padding: var(--padding-default) var(--padding-wide);
-  --help-panel-paragraph-margin: 0 0 var(--margin-default) 0;
-  --help-panel-font-size: 0.9em;
-  --help-panel-content-font-size: 0.8em;
-
-  --help-panel-focusBox-padding: var(--padding-narrow) var(--padding-default);
-  --help-panel-focusBox-border: 1px solid rgba(0, 0, 0, 0.2);
-  --help-panel-focusBox-border-radius: var(--border-radius);
-  --help-panel-focusBox-background-color: rgba(0, 0, 0, 0.2);
-  --help-panel-focusBox-color: #ffe393;
-
-  --help-panel-a-color: var(--secondary-color);
-  --help-panel-a-icon-size: 1.3em;
-
-  --help-icon-color: var(--secondary-color);
-  --help-icon-hover-color: var(--primary-color);
-  --help-icon-size: 18px;
-  --help-icon-opacity: 0.4;
-  --help-icon-hover-opacity: 1;
-
-  --help-navigation-padding: 0;
-  --help-navigation-bottom: 1px solid rgba(var(--primary-color-rgb), 0.5);
-  --help-navigation-icon-padding: 0;
-  --help-navigation-icon-border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-@media only screen and (max-width: 460px) {
-  body {
-    --help-panel-width: 100vw;
-    --help-panel-border-raidus: 0;
-    --help-panel-border: none;
-    --help-panel-box-shadow: none;
-
-    --help-panel-title-padding: 0 0 0 var(--padding-wide);
-  }
-}

package/src/viewparts/ox-help-panel.ts

@@ -1,217 +0,0 @@
-import '@material/web/icon/icon.js'
-import '@operato/markdown/ox-markdown.js'
-
-import { css, html, LitElement, PropertyValues } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers/connect-mixin.js'
-
-import Headroom from '@operato/headroom'
-import { closeOverlay } from '@operato/layout'
-import { navigate, store } from '@operato/shell'
-import { HeadroomStyles, ScrollbarStyles } from '@operato/styles'
-
-@customElement('ox-help-panel')
-class HelpPanel extends connect(store)(LitElement) {
-  static styles = [
-    ScrollbarStyles,
-    HeadroomStyles,
-    css`
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--help-panel-background-color);
-
-        position: relative;
-        width: var(--help-panel-width);
-        max-height: 90%;
-        border-radius: var(--help-panel-border-raidus);
-        border: var(--help-panel-border);
-        box-shadow: var(--help-panel-box-shadow);
-        color: var(--help-panel-color);
-        margin: 4px;
-
-        overflow: hidden;
-
-        --md-icon-size: 24px;
-      }
-
-      :host(:focus) {
-        outline: none;
-      }
-
-      #navigation {
-        display: flex;
-        position: absolute;
-        width: 100%;
-        padding: var(--help-navigation-padding);
-        border-bottom: var(--help-navigation-bottom);
-        background-color: var(--md-sys-color-surface);
-      }
-
-      #navigation md-icon {
-        padding: var(--help-navigation-icon-padding, var(--padding-default));
-        border-right: var(--help-navigation-icon-border);
-        cursor: pointer;
-        color: var(--help-icon-color);
-      }
-
-      #close {
-        margin-left: auto;
-        border-right: 0;
-      }
-
-      #content {
-        flex: 1;
-        overflow: auto;
-        padding: var(--help-panel-content-padding);
-        margin: var(--help-panel-margin);
-      }
-
-      #upward {
-        --md-icon-size: 26px;
-        position: absolute;
-        bottom: var(--data-list-fab-position-vertical);
-        right: var(--data-list-fab-position-horizontal);
-        background-color: rgba(255, 255, 255, 0.7);
-        border-radius: 20px;
-        color: var(--data-list-fab-color);
-        box-shadow: var(--data-list-fab-shadow);
-        padding: 7px;
-      }
-
-      md-icon[filled] {
-        font-variation-settings: 'FILL' 1;
-      }
-
-      @media screen and (max-width: 460px) {
-        :host {
-          height: 100%;
-          max-height: 100%;
-          margin: 0;
-        }
-      }
-    `
-  ]
-
-  @property({ type: String }) topic!: string
-  @property({ type: Boolean }) showGotoTop: boolean = false
-
-  @state() historyIndex: number = -1
-  @state() history: string[] = []
-
-  @query('#content') content!: HTMLElement
-  @query('#navigation') navigation!: HTMLElement
-
-  render() {
-    const src = this.topic && `/helps/${this.topic}.md`
-
-    return html`
-      <div id="navigation">
-        <md-icon filled @click=${() => this.goHome()} ?disabled=${this.history[0] === this.history[this.historyIndex]}>
-          home
-        </md-icon>
-        <md-icon filled @click=${() => this.historyBack()} ?disabled=${this.historyIndex < 1}>
-          keyboard_arrow_left
-        </md-icon>
-        <md-icon filled @click=${() => this.historyForward()} ?disabled=${this.historyIndex >= this.history.length - 1}>
-          keyboard_arrow_right
-        </md-icon>
-        <md-icon filled @click=${() => navigate(`help?topic=${this.topic}`)}> open_in_new </md-icon>
-        <md-icon filled id="close" @click=${() => closeOverlay('help')}> close </md-icon>
-      </div>
-
-      ${!this.showGotoTop
-        ? html``
-        : html` <md-icon filled id="upward" @click=${(e: Event) => this.gotoTop(e)}>arrow_upward</md-icon> `}
-      <ox-markdown id="content" .src=${src}></ox-markdown>
-    `
-  }
-
-  async firstUpdated() {
-    this.setupRouter()
-
-    this.content.addEventListener('scroll', (e: Event) => {
-      this.showGotoTop = (e.target as HTMLElement)?.scrollTop !== 0
-    })
-
-    await this.requestUpdate()
-
-    var originPaddingTop = parseFloat(getComputedStyle(this.content, null).getPropertyValue('padding-top'))
-    this.content.style.paddingTop = this.navigation.clientHeight + originPaddingTop + 'px'
-
-    var headroom = new Headroom(this.navigation, {
-      scroller: this.content
-    })
-    headroom.init()
-  }
-
-  async updated(changes: PropertyValues<this>) {
-    if (changes.has('topic')) {
-      if (this.historyIndex === -1) {
-        this.history = [this.topic]
-        this.historyIndex = 0
-      }
-    }
-
-    if (changes.has('historyIndex')) {
-      this.topic = this.history[this.historyIndex]
-      this.content.scrollTop = 0
-    }
-  }
-
-  setupRouter() {
-    this.addEventListener('click', e => {
-      if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) {
-        return
-      }
-
-      const anchor = e.composedPath().filter(n => (n as HTMLElement).tagName === 'A')[0] as HTMLAnchorElement
-      if (!anchor || anchor.target || anchor.hasAttribute('download') || anchor.getAttribute('rel') === 'external') {
-        return
-      }
-
-      const href = anchor.href
-      const newUrl = new URL(href, document.baseURI)
-      if (!href || href.indexOf('mailto:') !== -1 || newUrl.origin !== location.origin) {
-        return
-      }
-
-      e.preventDefault()
-      e.stopPropagation()
-
-      const pathname = newUrl.pathname
-      const topic = newUrl.searchParams?.get('topic')
-      if (pathname.endsWith('/help') && topic) {
-        this.history = [...this.history.slice(0, this.historyIndex + 1), topic]
-        this.historyIndex++
-        this.topic = topic
-      } else {
-        navigate(href)
-      }
-
-      return
-    })
-  }
-
-  gotoTop(e: Event) {
-    this.content.scrollTop = 0
-
-    e.stopPropagation()
-  }
-
-  goHome() {
-    if (!this.history?.[0] || this.history[0] == this.topic) {
-      return
-    }
-    this.history.push(this.history[0])
-    this.historyIndex = this.history.length - 1
-  }
-
-  historyBack() {
-    this.historyIndex > 0 && this.historyIndex--
-  }
-
-  historyForward() {
-    this.history && this.historyIndex < this.history.length - 1 && this.historyIndex++
-  }
-}

package/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es2018",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "rootDir": "./",
-    "declaration": true,
-    "incremental": true,
-    "skipLibCheck": true,
-    "types": ["node", "mocha"]
-  },
-  "include": ["**/*.ts"]
-}

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'dist/test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});