@api-client/ui 0.5.39 → 0.5.40

package/demo/md/menu/index.ts

@@ -1,514 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import reactive from '../../../src/decorators/reactive.js'
-import type { UiMenuItemElement } from '../../../src/md/menu/ui-menu-item.js'
-
-import '../../../src/md/menu/ui-menu.js'
-import '../../../src/md/menu/ui-sub-menu.js'
-import '../../../src/md/menu/ui-menu-item.js'
-import '../../../src/md/button/ui-button.js'
-import '../../../src/md/icons/ui-icon.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI menu'
-
-  @reactive() accessor basicMenuOutput = ''
-  @reactive() accessor basicCount = 0
-  @reactive() accessor nestedMenuOutput = ''
-  @reactive() accessor nestedCount = 0
-  @reactive() accessor overflowMenuOutput = ''
-  @reactive() accessor overflowCount = 0
-  @reactive() accessor selectedOption = ''
-  @reactive() accessor iconMenuSelectOutput = ''
-  @reactive() accessor iconMenuSelectedOption = 'Premium'
-  @reactive() accessor autoCheckMenuOutput = ''
-  @reactive() accessor autoCheckSelectedOption = 'High'
-
-  handleBasicMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as HTMLElement
-    const index = e.detail.index
-    this.basicMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
-    this.basicCount++
-  }
-
-  handleNestedMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as HTMLElement
-    const index = e.detail.index
-    this.nestedMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
-    this.nestedCount++
-  }
-
-  handleOverflowMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as HTMLElement
-    const index = e.detail.index
-    this.overflowMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
-    this.overflowCount++
-  }
-
-  handleSelectionMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as HTMLElement
-    this.selectedOption = item.textContent?.trim() || ''
-  }
-
-  handleIconSelectMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as UiMenuItemElement
-    this.iconMenuSelectedOption = item.value || ''
-    this.iconMenuSelectOutput = `Selected: ${this.iconMenuSelectedOption}`
-  }
-
-  handleAutoCheckMenuSelect(e: CustomEvent): void {
-    const item = e.detail.item as HTMLElement
-    this.autoCheckSelectedOption = item.textContent?.trim() || ''
-    this.autoCheckMenuOutput = `Selected: ${this.autoCheckSelectedOption}`
-  }
-
-  contentTemplate(): TemplateResult {
-    const {
-      basicMenuOutput,
-      nestedMenuOutput,
-      nestedCount,
-      basicCount,
-      overflowMenuOutput,
-      overflowCount,
-      selectedOption,
-      iconMenuSelectOutput,
-      iconMenuSelectedOption,
-      autoCheckMenuOutput,
-      autoCheckSelectedOption,
-    } = this
-    return html`
-      <a href="../">Back</a>
-
-      <section class="demo-section">
-        <h2 class="title-large">Basic Menu</h2>
-        <p>Click the button below to open a basic menu:</p>
-        <ui-button id="basic-menu-trigger" color="filled" popovertarget="basic-menu">Open Basic Menu</ui-button>
-        <ui-menu id="basic-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
-          <ui-menu-item>
-            <span slot="start"><ui-icon>add</ui-icon></span>
-            <span>New</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>folder</ui-icon></span>
-            <span>Open</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>save</ui-icon></span>
-            <span>Save</span>
-          </ui-menu-item>
-          <div class="menu-divider" role="separator"></div>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>print</ui-icon></span>
-            <span>Print</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>file_export</ui-icon></span>
-            <span>Export</span>
-          </ui-menu-item>
-        </ui-menu>
-        ${basicMenuOutput
-          ? html`<p>${basicMenuOutput}</p>
-              <p>Count: ${basicCount}</p>`
-          : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Overflow Menu</h2>
-        <p>A menu with many items that will overflow and require scrolling:</p>
-        <ui-button id="overflow-menu-trigger" color="filled" popovertarget="overflow-menu"
-          >Open Overflow Menu</ui-button
-        >
-        <ui-menu id="overflow-menu" popover="auto" @select="${this.handleOverflowMenuSelect}">
-          <ui-menu-item>
-            <span slot="start"><ui-icon>home</ui-icon></span>
-            <span>Home</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>account_circle</ui-icon></span>
-            <span>Profile</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>settings</ui-icon></span>
-            <span>Settings</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>notifications</ui-icon></span>
-            <span>Notifications</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>mail</ui-icon></span>
-            <span>Messages</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>favorite</ui-icon></span>
-            <span>Favorites</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>bookmark</ui-icon></span>
-            <span>Bookmarks</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>history</ui-icon></span>
-            <span>History</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>download</ui-icon></span>
-            <span>Downloads</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>cloud</ui-icon></span>
-            <span>Cloud Storage</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>share</ui-icon></span>
-            <span>Share</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>security</ui-icon></span>
-            <span>Security</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>backup</ui-icon></span>
-            <span>Backup</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>sync</ui-icon></span>
-            <span>Sync</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>account_box</ui-icon></span>
-            <span>Account Management</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>payment</ui-icon></span>
-            <span>Payment Methods</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>credit_card</ui-icon></span>
-            <span>Billing</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>receipt</ui-icon></span>
-            <span>Receipts</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>analytics</ui-icon></span>
-            <span>Analytics</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>insights</ui-icon></span>
-            <span>Insights</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>trending_up</ui-icon></span>
-            <span>Trends</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>dashboard</ui-icon></span>
-            <span>Dashboard</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>widgets</ui-icon></span>
-            <span>Widgets</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>extension</ui-icon></span>
-            <span>Extensions</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>apps</ui-icon></span>
-            <span>Applications</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>devices</ui-icon></span>
-            <span>Devices</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>network_check</ui-icon></span>
-            <span>Network Status</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>wifi</ui-icon></span>
-            <span>Wi-Fi Settings</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>bluetooth</ui-icon></span>
-            <span>Bluetooth</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>location_on</ui-icon></span>
-            <span>Location Services</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>language</ui-icon></span>
-            <span>Language</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>accessibility</ui-icon></span>
-            <span>Accessibility</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>brightness_6</ui-icon></span>
-            <span>Display</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>volume_up</ui-icon></span>
-            <span>Sound</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>battery_std</ui-icon></span>
-            <span>Battery</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>storage</ui-icon></span>
-            <span>Storage</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>memory</ui-icon></span>
-            <span>Memory</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>update</ui-icon></span>
-            <span>Software Update</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>info</ui-icon></span>
-            <span>About</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>help</ui-icon></span>
-            <span>Help & Support</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>feedback</ui-icon></span>
-            <span>Send Feedback</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>bug_report</ui-icon></span>
-            <span>Report Bug</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>contact_support</ui-icon></span>
-            <span>Contact Support</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>forum</ui-icon></span>
-            <span>Community Forum</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>school</ui-icon></span>
-            <span>Learning Center</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>library_books</ui-icon></span>
-            <span>Documentation</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>video_library</ui-icon></span>
-            <span>Video Tutorials</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>logout</ui-icon></span>
-            <span>Sign Out</span>
-          </ui-menu-item>
-        </ui-menu>
-        ${overflowMenuOutput
-          ? html`<p>${overflowMenuOutput}</p>
-              <p>Count: ${overflowCount}</p>`
-          : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Submenus</h2>
-        <p>A menu with submenus:</p>
-        <ui-button id="submenu-trigger" color="filled" popovertarget="submenu-demo"
-          >Open Attribute-based Menu</ui-button
-        >
-
-        <!-- Main Menu -->
-        <ui-menu id="submenu-demo" popover="auto" @select="${this.handleNestedMenuSelect}">
-          <ui-menu-item id="file-item" submenu="file-submenu">
-            <span slot="start"><ui-icon>docs</ui-icon></span>
-            <span>File</span>
-          </ui-menu-item>
-          <ui-menu-item id="edit-item" submenu="edit-submenu">
-            <span slot="start"><ui-icon>edit</ui-icon></span>
-            <span>Edit</span>
-          </ui-menu-item>
-          <ui-menu-item id="view-item">
-            <span slot="start"><ui-icon>visibility</ui-icon></span>
-            <span>View</span>
-          </ui-menu-item>
-          <!-- File Submenu (separate from main menu) -->
-          <ui-sub-menu id="file-submenu" anchor="file-item" popover="auto">
-            <ui-menu-item>
-              <span slot="start"><ui-icon>add</ui-icon></span>
-              <span>New File</span>
-            </ui-menu-item>
-            <ui-menu-item>
-              <span slot="start"><ui-icon>folder</ui-icon></span>
-              <span>Open File</span>
-            </ui-menu-item>
-            <ui-menu-item>
-              <span slot="start"><ui-icon>save</ui-icon></span>
-              <span>Save File</span>
-            </ui-menu-item>
-            <ui-menu-item id="export-item" submenu="export-submenu">
-              <span slot="start"><ui-icon>file_export</ui-icon></span>
-              <span>Export</span>
-            </ui-menu-item>
-
-            <!-- Nested Export Submenu -->
-            <ui-sub-menu id="export-submenu" anchor="export-item" popover="auto">
-              <ui-menu-item>
-                <span>Export as PDF</span>
-              </ui-menu-item>
-              <ui-menu-item>
-                <span>Export as PNG</span>
-              </ui-menu-item>
-              <ui-menu-item>
-                <span>Export as SVG</span>
-              </ui-menu-item>
-            </ui-sub-menu>
-          </ui-sub-menu>
-          <!-- Edit Submenu -->
-          <ui-sub-menu id="edit-submenu" anchor="edit-item" popover="auto">
-            <ui-menu-item>
-              <span slot="start"><ui-icon>undo</ui-icon></span>
-              <span>Undo</span>
-            </ui-menu-item>
-            <ui-menu-item>
-              <span slot="start"><ui-icon>redo</ui-icon></span>
-              <span>Redo</span>
-            </ui-menu-item>
-            <ui-menu-item>
-              <span slot="start"><ui-icon>cut</ui-icon></span>
-              <span>Cut</span>
-            </ui-menu-item>
-            <ui-menu-item>
-              <span slot="start"><ui-icon>content_copy</ui-icon></span>
-              <span>Copy</span>
-            </ui-menu-item>
-          </ui-sub-menu>
-        </ui-menu>
-        ${nestedMenuOutput
-          ? html`<p>${nestedMenuOutput}</p>
-              <p>Count: ${nestedCount}</p>`
-          : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Selection Menu</h2>
-        <p>A menu that allows selection of options:</p>
-        <ui-button id="selection-menu-trigger" color="filled" popovertarget="selection-menu"
-          >Open Selection Menu</ui-button
-        >
-        <ui-menu id="selection-menu" popover="auto" @select="${this.handleSelectionMenuSelect}">
-          <ui-menu-item data-value="option1" ?selected="${selectedOption === 'Option 1'}">
-            ${selectedOption === 'Option 1' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
-            <span>Option 1</span>
-          </ui-menu-item>
-          <ui-menu-item data-value="option2" ?selected="${selectedOption === 'Option 2'}">
-            ${selectedOption === 'Option 2' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
-            <span>Option 2</span>
-          </ui-menu-item>
-          <ui-menu-item data-value="option3" ?selected="${selectedOption === 'Option 3'}">
-            ${selectedOption === 'Option 3' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
-            <span>Option 3</span>
-          </ui-menu-item>
-        </ui-menu>
-        ${selectedOption ? html`<p>Selected: ${selectedOption}</p>` : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Menu with Selection and icons</h2>
-        <p>
-          A menu that maintains selection state. Select an option and reopen the menu to see the selection preserved:
-        </p>
-        <ui-button id="single-select-menu-trigger" color="filled" popovertarget="single-select-menu">
-          Select Option: ${iconMenuSelectedOption || 'None'}
-        </ui-button>
-        <ui-menu id="single-select-menu" popover="auto" @select="${this.handleIconSelectMenuSelect}">
-          <ui-menu-item value="premium" showSelectionIcon ?selected="${iconMenuSelectedOption === 'premium'}">
-            <span slot="start"><ui-icon>star</ui-icon></span>
-            <span>Premium</span>
-          </ui-menu-item>
-          <ui-menu-item value="standard" showSelectionIcon ?selected="${iconMenuSelectedOption === 'standard'}">
-            <span slot="start"><ui-icon>account_circle</ui-icon></span>
-            <span>Standard</span>
-          </ui-menu-item>
-          <ui-menu-item value="basic" showSelectionIcon ?selected="${iconMenuSelectedOption === 'basic'}">
-            <span slot="start"><ui-icon>public</ui-icon></span>
-            <span>Basic</span>
-          </ui-menu-item>
-        </ui-menu>
-        ${iconMenuSelectOutput ? html`<p>${iconMenuSelectOutput}</p>` : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Menu with Auto-Check Icons</h2>
-        <p>
-          A menu that automatically shows check icons for selected items when the
-          <code>show-selection-icon</code> attribute is used:
-        </p>
-        <ui-button id="auto-check-menu-trigger" color="filled" popovertarget="auto-check-menu">
-          Priority: ${autoCheckSelectedOption || 'None'}
-        </ui-button>
-        <ui-menu id="auto-check-menu" popover="auto" @select="${this.handleAutoCheckMenuSelect}">
-          <ui-menu-item showSelectionIcon>
-            <span>Low</span>
-          </ui-menu-item>
-          <ui-menu-item showSelectionIcon selected>
-            <span>High</span>
-          </ui-menu-item>
-          <ui-menu-item showSelectionIcon>
-            <span>Critical</span>
-          </ui-menu-item>
-        </ui-menu>
-        ${autoCheckMenuOutput ? html`<p>${autoCheckMenuOutput}</p>` : ''}
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Edge Positioning Test</h2>
-        <p>Test menu positioning at screen edges:</p>
-        <div style="display: flex; justify-content: space-between; margin: 20px 0;">
-          <ui-button id="left-edge-menu-trigger" color="filled" popovertarget="left-edge-menu">Left Edge</ui-button>
-          <ui-button id="right-edge-menu-trigger" color="filled" popovertarget="right-edge-menu">Right Edge</ui-button>
-        </div>
-
-        <ui-menu id="left-edge-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Left Edge Menu Item 1</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Left Edge Menu Item 2</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Left Edge Menu Item 3</span>
-          </ui-menu-item>
-        </ui-menu>
-
-        <ui-menu id="right-edge-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Right Edge Menu Item 1</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Right Edge Menu Item 2</span>
-          </ui-menu-item>
-          <ui-menu-item>
-            <span slot="start"><ui-icon>check</ui-icon></span>
-            <span>Right Edge Menu Item 3</span>
-          </ui-menu-item>
-        </ui-menu>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/notification/snack.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI snackbar</title>
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
-  <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" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/notification/snack.js"></script>
-</body>
-</html>

package/demo/md/notification/snack.ts

@@ -1,70 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { SnackNotifications } from '../../../src/md/notification/SnackNotifications.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI snackbar'
-
-  _actionHandler(): void {
-    console.log(`An action was triggered.`)
-  }
-
-  simpleHandler(): void {
-    SnackNotifications.notify('Simple notification')
-  }
-
-  timeoutHandler(): void {
-    SnackNotifications.notify('2-seconds notification', 2000)
-  }
-
-  closeHandler(): void {
-    SnackNotifications.notify('This toast has a close button.', {
-      close: true,
-      closed() {
-        console.log('Close action occurred')
-      },
-    })
-  }
-
-  actionHandler(): void {
-    SnackNotifications.notify('This toast is persistent.', {
-      actionLabel: 'Click me',
-      actionCallback() {
-        console.log('Action was called (action)')
-      },
-      persistent: true,
-    })
-  }
-
-  closeActionHandler(): void {
-    SnackNotifications.notify('Close and action toast message.', {
-      actionLabel: 'Click me',
-      actionCallback() {
-        console.log('Action was called (close and action)')
-      },
-      close: true,
-      closed() {
-        console.log('The close & action toast was closed.')
-      },
-    })
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Snackbar</h2>
-        <div class="demo-row">
-          <ui-button color="filled" @click="${this.simpleHandler}">Simple snackbar</ui-button>
-          <ui-button color="filled" @click="${this.timeoutHandler}">2 second snackbar</ui-button>
-          <ui-button color="filled" @click="${this.closeHandler}">With close button</ui-button>
-          <ui-button color="filled" @click="${this.actionHandler}">With action</ui-button>
-          <ui-button color="filled" @click="${this.closeActionHandler}">With action and close button</ui-button>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/progress/progress.html

@@ -1,46 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <title>UI progress</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" />
-  <style>
-    .demo-row {
-      margin: 20px 0;
-    }
-
-    ui-progress.slow {
-      --ui-progress-indeterminate-cycle-duration: 20s;
-    }
-
-    ui-progress.blue {
-      --ui-progress-primary-progress-color: #2196f3;
-      --ui-progress-secondary-progress-color: #90caf9;
-    }
-
-    ui-progress.red {
-      --ui-progress-primary-progress-color: #f44336;
-      --ui-progress-secondary-progress-color: #ef9a9a;
-    }
-
-    ui-progress.green {
-      --ui-progress-primary-progress-color: #4caf50;
-      --ui-progress-secondary-progress-color: #80cbc4;
-    }
-
-    .secondary {
-      --ui-progress-track-color: var(--md-sys-color-surface-variant);
-      --ui-progress-primary-progress-color: var(--md-sys-color-surface-variant);
-      --ui-progress-secondary-progress-color: var(--md-sys-color-primary);
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/progress/progress.js"></script>
-</body>
-</html>