@api-client/ui 0.5.39 → 0.5.41

package/demo/elements/autocomplete/index.ts

@@ -1,171 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { live } from 'lit/directives/live.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import reactive from '../../../src/decorators/reactive.js'
-import type { IUser } from '@api-client/core/models/store/User.js'
-import { User } from '@api-client/core/mocking/lib/User.js'
-
-import '../../../src/elements/autocomplete/autocomplete-input.js'
-import '../../../src/md/text-field/ui-outlined-text-field.js'
-import '../../../src/md/listbox/ui-listbox.js'
-import '../../../src/md/list/ui-list-item.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'Autocomplete input'
-
-  @reactive() accessor fixedValue = ''
-  @reactive() accessor dynamicValue = ''
-  @reactive() accessor dynamicCustomValue = ''
-  @reactive() accessor users: IUser[] = []
-  @reactive() accessor customUsers: IUser[] = []
-
-  userMock = new User()
-
-  handleFixedAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
-    const item = event.detail.item
-    this.fixedValue = item.getAttribute('data-value') || item.textContent || ''
-  }
-
-  handleFixedInput(event: InputEvent): void {
-    const target = event.target as HTMLInputElement
-    this.fixedValue = target.value
-  }
-
-  handleDynamicAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
-    const item = event.detail.item
-    this.dynamicValue = item.dataset.name || ''
-  }
-
-  handleDynamicInput(event: InputEvent): void {
-    const target = event.target as HTMLInputElement
-    this.dynamicValue = target.value
-    this.generateMockUsers(target.value, 'users')
-  }
-
-  generateMockUsers(startsWith: string, prop: 'users' | 'customUsers'): void {
-    const timeout = this.userMock.types.number({ min: 100, max: 1000 })
-    const results = this.userMock.types.number({ min: 0, max: 30 })
-    setTimeout(() => {
-      this[prop] = Array.from({ length: results }, () => {
-        const item = this.userMock.user()
-        item.name = item.name.startsWith(startsWith) ? item.name : `${startsWith}${item.name}`
-        return item
-      })
-      console.log('Generated users:', this[prop])
-    }, timeout)
-  }
-
-  handleDynamicCustomInput(event: InputEvent): void {
-    const target = event.target as HTMLInputElement
-    this.dynamicCustomValue = target.value
-    this.generateMockUsers(target.value, 'customUsers')
-  }
-
-  handleDynamicCustomAutocomplete(event: CustomEvent<{ item: HTMLElement }>): void {
-    const item = event.detail.item
-    this.dynamicCustomValue = item.dataset.name || ''
-  }
-
-  override contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-
-      <section class="demo-section">
-        <h2 class="title-large">Fixed suggestions</h2>
-
-        <div class="demo-row">
-          <autocomplete-input @autocomplete="${this.handleFixedAutocomplete}">
-            <ui-outlined-text-field
-              slot="input"
-              label="Select a fruit"
-              name="fixed"
-              .value="${live(this.fixedValue)}"
-              @input="${this.handleFixedInput}"
-            ></ui-outlined-text-field>
-            <ui-listbox slot="suggestions">
-              <ui-list-item data-value="apple" role="option">Apple</ui-list-item>
-              <ui-list-item data-value="banana" role="option">Banana</ui-list-item>
-              <ui-list-item data-value="cherry" role="option">Cherry</ui-list-item>
-              <ui-list-item data-value="date" role="option">Date</ui-list-item>
-              <ui-list-item data-value="elderberry" role="option">Elderberry</ui-list-item>
-              <ui-list-item data-value="fig" role="option">Fig</ui-list-item>
-              <ui-list-item data-value="grape" role="option">Grape</ui-list-item>
-              <ui-list-item data-value="honeydew" role="option">Honeydew</ui-list-item>
-              <ui-list-item data-value="kiwi" role="option">Kiwi</ui-list-item>
-              <ui-list-item data-value="lemon" role="option">Lemon</ui-list-item>
-              <ui-list-item data-value="mango" role="option">Mango</ui-list-item>
-              <ui-list-item data-value="nectarine" role="option">Nectarine</ui-list-item>
-              <ui-list-item data-value="orange" role="option">Orange</ui-list-item>
-              <ui-list-item data-value="papaya" role="option">Papaya</ui-list-item>
-            </ui-listbox>
-          </autocomplete-input>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Dynamic suggestions</h2>
-
-        <div class="demo-row">
-          <autocomplete-input @autocomplete="${this.handleDynamicAutocomplete}">
-            <ui-outlined-text-field
-              slot="input"
-              label="Choose a user"
-              name="dynamic"
-              .value="${live(this.dynamicValue)}"
-              @input="${this.handleDynamicInput}"
-            ></ui-outlined-text-field>
-            <ui-listbox slot="suggestions"
-              >${this.users.map(
-                (user) =>
-                  html`<ui-list-item
-                    data-name="${user.name}"
-                    data-email="${user.email[0].email}"
-                    data-index="name email"
-                    role="option"
-                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
-                  >`
-              )}</ui-listbox
-            >
-          </autocomplete-input>
-        </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Custom Input</h2>
-
-        <div class="demo-row">
-          <autocomplete-input @autocomplete="${this.handleDynamicCustomAutocomplete}">
-            <div class="share-input" slot="anchor">
-              <div class="input-container">
-                <input
-                  type="text"
-                  slot="input"
-                  autocomplete="off"
-                  placeholder="Enter name or email"
-                  name="dynamic-custom"
-                  class="native-input"
-                  .value="${live(this.dynamicCustomValue)}"
-                  @input="${this.handleDynamicCustomInput}"
-                />
-              </div>
-            </div>
-            <ui-listbox slot="suggestions"
-              >${this.customUsers.map(
-                (user) =>
-                  html`<ui-list-item
-                    data-name="${user.name}"
-                    data-email="${user.email[0].email}"
-                    data-index="name email"
-                    role="option"
-                    >${user.name}<span slot="supporting-text">${user.email[0].email}</span></ui-list-item
-                  >`
-              )}</ui-listbox
-            >
-          </autocomplete-input>
-        </div>
-      </section>
-    `
-  }
-}
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/elements/code-editor/CodeEditorDemo.ts

@@ -1,173 +0,0 @@
-import { html } from 'lit'
-import type { FunctionSchema } from '@pawel-up/jexl/schemas/types.js'
-import reactive from '../../../src/decorators/reactive.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import type {
-  Suggestion,
-  FunctionInsertEvent,
-  SuggestionInsertEvent,
-} from '../../../src/elements/code-editor/code-editor.js'
-import '../../../src/elements/code-editor/code-editor.js'
-import { stringLibrarySchema } from '@pawel-up/jexl/schemas/string.schema.js'
-import { arrayLibrarySchema } from '@pawel-up/jexl/schemas/array.schema.js'
-import { dateLibrarySchema } from '@pawel-up/jexl/schemas/date.schema.js'
-import { mathLibrarySchema } from '@pawel-up/jexl/schemas/math.schema.js'
-
-class CodeEditorDemo extends DemoPage {
-  override accessor componentName = 'Code Editor'
-
-  @reactive()
-  private accessor output = ''
-
-  @reactive()
-  private accessor editorValue = [
-    '// Start typing function names or {{ mentions }}',
-    '',
-    '"Hello {{John}}! Can you help with the " + upper() + " function?"',
-  ].join('\n')
-
-  private suggestions: Suggestion[] = [
-    {
-      id: 'user-john',
-      label: 'John',
-      description: 'Software Engineer',
-      suffix: 'Engineering',
-      data: { role: 'developer', department: 'engineering' },
-    },
-    {
-      id: 'user-jane',
-      label: 'Jane',
-      description: 'Product Manager',
-      suffix: 'Product',
-      data: { role: 'manager', department: 'product' },
-    },
-    {
-      id: 'admin-system',
-      label: 'System',
-      description: 'System Administrator',
-      suffix: 'Admin',
-      data: { role: 'admin', department: 'infrastructure' },
-    },
-  ]
-
-  functions: FunctionSchema[] = []
-
-  constructor() {
-    super()
-
-    // Initialize function schemas
-    this.functions = this.createFunctionSchema()
-  }
-
-  /**
-   * Creates a schema for the code-editor functions.
-   * This method is responsible for defining the functions that can be used in the formula,
-   * given the current data type.
-   */
-  createFunctionSchema(): FunctionSchema[] {
-    const result: FunctionSchema[] = []
-
-    for (const func of Object.values(stringLibrarySchema.functions)) {
-      result.push(func)
-    }
-
-    for (const func of Object.values(arrayLibrarySchema.functions)) {
-      result.push(func)
-    }
-
-    for (const func of Object.values(dateLibrarySchema.functions)) {
-      result.push(func)
-    }
-
-    for (const func of Object.values(mathLibrarySchema.functions)) {
-      result.push(func)
-    }
-
-    return result
-  }
-
-  private handleFunctionInsert(event: CustomEvent<FunctionInsertEvent>): void {
-    const { functionSchema, position } = event.detail
-    this.output = `Function inserted: ${functionSchema.name} at position ${position}`
-  }
-
-  private handleSuggestionInsert(event: CustomEvent<SuggestionInsertEvent>): void {
-    const { suggestion, position } = event.detail
-    this.output = `Suggestion inserted: ${suggestion.label} at position ${position}`
-  }
-
-  private handleInput(event: Event): void {
-    const target = event.target as HTMLElement & { value: string }
-    this.editorValue = target.value
-  }
-
-  private handleFunctionDocumentation(event: CustomEvent<{ functionSchema: FunctionSchema }>): void {
-    const { functionSchema } = event.detail
-    this.output = `Function documentation requested for: ${functionSchema.name}`
-    console.log('Function documentation:', functionSchema)
-  }
-
-  private handleChange(event: Event): void {
-    const target = event.target as HTMLElement & { value: string }
-    this.output = `Editor content changed: ${target.value}`
-    console.log('Editor change:', target.value)
-  }
-
-  contentTemplate() {
-    return html`
-      <a href="../">Back</a>
-
-      <section class="demo-section">
-        <h2 class="display-large">Basic Code Editor</h2>
-        <p>A CodeMirror 6 based editor with function autocomplete and suggestion pills.</p>
-
-        <code-editor
-          label="Code Editor"
-          supportingtext="Type function names or {{fnName}} to see autocomplete"
-          .value=${this.editorValue}
-          .functionSchemas=${this.functions}
-          .suggestions=${this.suggestions}
-          @functioninsert=${this.handleFunctionInsert}
-          @suggestioninsert=${this.handleSuggestionInsert}
-          @input=${this.handleInput}
-          @change=${this.handleChange}
-          showdocumentation
-          @docsrequest="${this.handleFunctionDocumentation}"
-        ></code-editor>
-
-        ${this.output ? html`<p><strong>Output:</strong> ${this.output}</p>` : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Disabled State</h2>
-        <p>A disabled editor for read-only content.</p>
-
-        <code-editor
-          label="Disabled Editor"
-          supportingtext="This editor is disabled"
-          .value=${'// This editor is disabled\nconst readOnly = true'}
-          .functionSchemas=${this.functions}
-          .suggestions=${this.suggestions}
-          disabled
-        ></code-editor>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="display-large">Error State</h2>
-        <p>An editor in error state.</p>
-
-        <code-editor
-          label="Error Editor"
-          supportingtext="This editor has an error"
-          .value=${'// This editor has an error\nconst invalid = true'}
-          .functionSchemas=${this.functions}
-          .suggestions=${this.suggestions}
-          invalid
-        ></code-editor>
-      </section>
-    `
-  }
-}
-
-const instance = new CodeEditorDemo()
-instance.render()

package/demo/elements/code-editor/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Code Editor Demo</title>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-</head>
-<body data-gr-ext-disabled="next">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/code-editor/CodeEditorDemo.js"></script>
-</body>
-</html>

package/demo/elements/context-menu/DemoIcons.ts

@@ -1,21 +0,0 @@
-import { svg } from 'lit'
-import { iconWrapper } from '../../../src/md/icons/Icons.js'
-
-// fonts by Material Design: https://fonts.google.com/icons?selected=Material+Icons
-
-export const copy = iconWrapper(
-  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>`
-)
-export const paste = iconWrapper(
-  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"/>`
-)
-export const flag = iconWrapper(
-  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.36 6l.4 2H18v6h-3.36l-.4-2H7V6h5.36M14 4H5v17h2v-7h5.6l.4 2h7V6h-5.6L14 4z"/>`
-)
-export const formatSize = iconWrapper(
-  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 4v3h5v12h3V7h5V4H9zm-6 8h3v7h3v-7h3V9H3v3z"/>`
-)
-export const title = iconWrapper(svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 4v3h5.5v12h3V7H19V4H5z"/>`)
-export const fontDownload = iconWrapper(
-  svg`<path d="M0 0h24v24H0V0z" fill="none"/><path d="M9.93 13.5h4.14L12 7.98zM20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4.05 16.5l-1.14-3H9.17l-1.12 3H5.96l5.11-13h1.86l5.11 13h-2.09z"/>`
-)

package/demo/elements/context-menu/basic.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>Basic context menu</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <link href="./demo.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/context-menu/basic.js"></script>
-</body>
-
-</html>

package/demo/elements/context-menu/basic.ts

@@ -1,119 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
-import {
-  BeforeRenderOptions,
-  ContextMenuCommand,
-  CommandExecuteOptions,
-} from '../../../src/elements/contextual-menu/internals/types.js'
-
-class ComponentPage extends DemoPage {
-  override accessor componentName = 'Basic context menu'
-
-  constructor() {
-    super()
-    this.componentName = 'Basic contextual menu'
-  }
-
-  override firstRender(): void {
-    super.firstRender()
-    this.initContextMenu()
-  }
-
-  initContextMenu(): void {
-    const container = document.body.querySelector('#workspace') as HTMLElement
-    const instance = new ContextualMenu(container)
-    const commands: ContextMenuCommand[] = [
-      {
-        target: 'all',
-        label: 'test',
-        title: 'All items title',
-        id: 'test-command',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        target: 'all',
-        label: 'visible',
-        title: 'test visible title',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-        visible: () => false,
-      },
-      {
-        target: 'all',
-        label: 'Not enabled',
-        title: 'test enabled title',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-        enabled: () => false,
-      },
-      {
-        target: ['section.target', 'aside.target.second'],
-        type: 'separator',
-      },
-      {
-        target: 'section.target',
-        label: 'Target only',
-        title: 'Target only title',
-        id: 'target-command',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        target: ['section.target', 'aside.target.second'],
-        label: 'Target and second only',
-        title: 'Target and second title',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        target: 'custom',
-        label: 'Custom action',
-        title: 'Custom action title',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-      {
-        target: 'all',
-        label: 'Uninitialized',
-        beforeRender: (ctx: BeforeRenderOptions): void => {
-          const { menu, target } = ctx
-          const label = `Clicked on a ${target.localName}`
-          menu.label = label
-        },
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-    ]
-    instance.registerCommands(commands)
-    instance.connect()
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Basic contextual menu</h2>
-        <section class="documentation-section">
-          <h3>Interactive demo</h3>
-          <div id="workspace">
-            <section class="target">Section</section>
-            <aside class="target second">Aside</aside>
-          </div>
-          <p>This menu has a hidden item.</p>
-        </section>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentPage()
-instance.render()

package/demo/elements/context-menu/custom-data.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>Enabled state context menu</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <link rel="stylesheet" href="./demo.css"/>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/context-menu/custom-data.js"></script>
-</body>
-
-</html>

package/demo/elements/context-menu/custom-data.ts

@@ -1,62 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { ContextualMenu } from '../../../src/elements/contextual-menu/internals/ContextualMenu.js'
-import { ContextMenuCommand, CommandExecuteOptions } from '../../../src/elements/contextual-menu/internals/types.js'
-
-class ComponentPage extends DemoPage {
-  override accessor componentName = 'Custom data'
-
-  override firstRender(): void {
-    super.firstRender()
-    this.initContextMenu()
-  }
-
-  initContextMenu(): void {
-    const container = document.body.querySelector('#workspace') as HTMLElement
-    const instance = new ContextualMenu(container)
-    const commands: ContextMenuCommand[] = [
-      {
-        target: 'custom',
-        label: 'Custom action',
-        title: 'Custom action title',
-        execute: (args: CommandExecuteOptions): void => {
-          console.log(args)
-        },
-      },
-    ]
-    instance.registerCommands(commands)
-    instance.connect()
-  }
-
-  customTriggerHandler(e: Event): void {
-    e.preventDefault()
-    const container = document.body.querySelector('#workspace') as HTMLElement
-    container.dispatchEvent(
-      new CustomEvent('custommenu', {
-        detail: {
-          name: 'custom',
-          x: container.offsetLeft + 100,
-          y: container.offsetTop + 100,
-          customData: { test: true },
-        },
-      })
-    )
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="./">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Contextual menu with custom data</h2>
-        <div id="workspace">
-          <div class="target" data-id="test-value"></div>
-        </div>
-        <button id="customTrigger" @click="${this.customTriggerHandler}">Trigger custom</button>
-        <p>The menu is only triggered via the custom event.</p>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentPage()
-instance.render()

package/demo/elements/context-menu/demo.css

@@ -1,28 +0,0 @@
-.centered[role="main"] {
-  max-width: 1400px;
-}
-
-body.demo {
-  font-family: 'Roboto', sans-serif;
-}
-
-#workspace {
-  width: 100%;
-  height: 300px;
-  background-color: dimgray;
-  position: relative;
-}
-
-.target {
-  width: 60px;
-  height: 60px;
-  background-color: white;
-  position: absolute;
-  top: 30px;
-  left: 50px;
-}
-
-.target.second {
-  top: 60px;
-  left: calc(50% - 60px);
-}

package/demo/elements/context-menu/enabled-state.html

@@ -1,25 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>Enabled state context menu</title>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
-    rel="stylesheet"
-  />
-  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
-  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
-  <link href="../../page.css" rel="stylesheet" type="text/css" />
-  <link rel="stylesheet" href="./demo.css"/>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/context-menu/enabled-state.js"></script>
-</body>
-
-</html>