@api-client/ui 0.5.38 → 0.5.40

package/demo/elements/authorization/private.key

@@ -1,51 +0,0 @@
------BEGIN RSA PRIVATE KEY-----
-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
------END RSA PRIVATE KEY-----

package/demo/elements/authorization/private.pem

@@ -1,31 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIFWDCCA0CgAwIBAgIUEFgD2tLMFZ2h4g7JYaTRtLUAtH4wDQYJKoZIhvcNAQEL
-BQAwWTELMAkGA1UEBhMCVVMxCzAJBgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4gRnJh
-bmNpc2NvMREwDwYDVQQKDAhNdWxlU29mdDESMBAGA1UEAwwJbG9jYWxob3N0MB4X
-DTIxMDgyMzIwMDIzOFoXDTMxMDgyMTIwMDIzOFowWTELMAkGA1UEBhMCVVMxCzAJ
-BgNVBAgMAkNBMRYwFAYDVQQHDA1TYW4gRnJhbmNpc2NvMREwDwYDVQQKDAhNdWxl
-U29mdDESMBAGA1UEAwwJbG9jYWxob3N0MIICIjANBgkqhkiG9w0BAQEFAAOCAg8A
-MIICCgKCAgEAuVTrHMDODwWIJ+dfKsOA3OAy2bAGZtNb4MZlvPFDuIHituxMe7R6
-DzSWD6jDwaqWJqaT28FaO0CCxl957u9V802fgmML1BKcG37uCvWIUOZx+hDrA7C5
-POyGfisfxMG2mBEWK53Ml/RKIR94aDtcbzw9AjRASfqS865gYOQaQYQ47J68yzAm
-0gqqM1LufEugqFzABjVG8mg3H0Oda2fu68QLGBiC3V08Z++ioHWfRdNyPXZz9oOa
-b9kKKWIcZoa59wxQ6NfTV7wZ1nqOEKgGyu9jddXLDJWhP9a1NfqsG5NpvlwUnKzi
-TF/zBY06aDqnTnG7GA/pgMvnXIPPArffv0nxDelyVkXccJrIJ98HHNe/HoNTGM5m
-nrvUqtgCSSm2eGHUnscm5CFiRXyskyk+ZEjWhlKJT0n6VYHTCvrmlnUS4tCxZ36k
-IvSFD9zqeOQLHAknqjYJHiVhthOZdczAUnE46zPMixcUeWNTEp0068LEzQQVyAYP
-iwXv9ga+4GYR5epKQVl27055rVFQVumsTUo7LSmX4xh1tdWtbAN2Po9x33MVbL7e
-frcM7nyL2N402jyZx578Z2x7UrBOF4sdUA9YHfXX6UtEE1o7FIKfNHB3/CuU1gUR
-PvPrByyxOrI50CLlTx7BY0VAHiOSvl08cl1oVK+uyO5Tdi+SvijSUDECAwEAAaMY
-MBYwFAYDVR0RBA0wC4IJbG9jYWxob3N0MA0GCSqGSIb3DQEBCwUAA4ICAQA5XA3i
-reCKfNq82w5XNFTcraBze8dtw/hs/L4Str/AtRoxvn1xureewlnpqMn8OapgbNDb
-yauqKVuO0jYNxIhF5nNVWpnH7wduijWacT+7BgoutbgldmMam7aglCTDgkimHYHV
-YWYFeiG6uLtJyFAegAoQT4aBSXz80tmMt+1/wF72BT5sXzOHkuHL3FgloCsT1/8L
-m5wmN3AP3+oZm5X14FNJiHRnzvVKLYcE7608TxOORRmg3wIWgxpb9nGtfB554Ywo
-6G4Nz8q9oBOB7sFxdK4e/4E63gcWeQyCzpWK0d67+mhessuujDHToa8GFsDP61ka
-APzOBynNN3fylN9vw0kJdgJZsVndItH5TrrmPQmr0jpFTiTuprLNEVsq2vvBnvPu
-VZKpp9vPTH7LYVEkiKK+HczeFmPdgH6WQxjVN+hUPKVY5b/G2SRIHxRvXNzD6zLh
-dlHovtJvT3DKt3HsgdRuBv+0p7JKE7JQ++NgA9OBpNhLXAWZyDFxc0IVO7SrbfY6
-w6RP5hxvkDvoH6odw4t/Yb6pb7dBrhoGvfbzuoUra1Q/jxmAlk0mNo6MtS4ggzBn
-up/uZrA1UdgA1MvODaXjJ0DJXLVFCC4R+opiLX8jTnN5FTlxXyXU5prgmKdETyl8
-bZJoWR79OWcyLESFKWnxvz+oTlD/7qoj0cCAYA==
------END CERTIFICATE-----

package/demo/elements/authorization/redirect.html

@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="Description" content="Domain modeling initiative by MuleSoft, a Salesforce company.">
-  <title>Initializing</title>
-  <!-- <meta http-equiv="refresh" content="1;url=https://auth.advancedrestclient.com/oauth-popup.html#access_token=test-token"> -->
-  <meta http-equiv="refresh" content="1;url=/oauth-popup.html#access_token=test-token&refresh_token=abcd">
-  <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>
-  <p>Redirecting</p>
-</body>
-</html>

package/demo/elements/authorization/ssl-commands.sh

@@ -1,30 +0,0 @@
-# Generate private key
-openssl genrsa -out private.key 4096
-
-# Generate a Certificate Signing Request
-
-openssl req -new -sha256 \
-    -out private.csr \
-    -key private.key \
-    -config ssl.conf 
-
-# Generate the certificate
-
-openssl x509 -req \
-    -days 3650 \
-    -in private.csr \
-    -signkey private.key \
-    -out private.crt \
-    -extensions req_ext \
-    -extfile ssl.conf
-
-# Add the certificate to keychain and trust it:
-
-sudo security add-trusted-cert -d -r trustRoot -k /Library/Keychains/System.keychain private.crt
-# https://support.kerioconnect.gfi.com/hc/en-us/articles/360015200119-Adding-Trusted-Root-Certificates-to-the-Server
-
-# Create a pem file from crt
-openssl x509 -in private.crt -out private.pem -outform PEM
-
-# run the server
-server-cmd --https --cert private.pem --key private.key

package/demo/elements/authorization/ssl.conf

@@ -1,24 +0,0 @@
-[ req ]
-default_bits       = 4096
-distinguished_name = req_distinguished_name
-req_extensions     = req_ext
-
-[ req_distinguished_name ]
-countryName                 = US
-countryName_default         = US
-stateOrProvinceName         = California
-stateOrProvinceName_default = CA
-localityName                = San Francisco
-localityName_default        = San Francisco
-organizationName            = MuleSoft
-organizationName_default    = MuleSoft
-organizationalUnitName      = Engineering
-commonName                  = localhost
-commonName_max              = 64
-commonName_default          = localhost
-
-[ req_ext ]
-subjectAltName = @alt_names
-
-[alt_names]
-DNS.1   = localhost

package/demo/elements/autocomplete/index.html

@@ -1,64 +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>Autocomplete</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" />
-  <style>
-    .share-input {
-      .input-container {
-        min-height: 3em;
-        border: none;
-        padding: 4px 12px;
-        display: flex;
-        flex-wrap: wrap;
-        box-sizing: border-box;
-        gap: 4px;
-        border-radius: 4px;
-        background-color: var(--md-sys-color-surface-container-lowest);
-
-        outline-color: var(--md-sys-color-primary);
-        outline-style: solid;
-        outline-width: 1px;
-        outline-offset: -1px;
-        transition:
-          outline-width 0.14s ease-in-out,
-          outline-offset 0.14s ease-in-out;
-
-        &:focus-within {
-          outline-width: 2px;
-          outline-offset: -2px;
-        }
-
-        .native-input {
-          flex: 1;
-          outline: none;
-          border: none;
-          background: transparent;
-          color: var(--md-sys-color-on-surface);
-          font-size: 1rem;
-          font-family: var(--md-sys-typescale-body-large-font-family);
-          line-height: var(--md-sys-typescale-body-large-line-height);
-          padding: 0;
-        }
-      }
-    }
-  </style>
-</head>
-
-<body class="demo">
-  <div id="app"></div>
-  <script type="module" src="/.tmp/demo/elements/autocomplete/index.js"></script>
-</body>
-
-</html>

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>