@api-client/ui 0.5.39 → 0.5.40

package/demo/md/progress/progress.ts

@@ -1,161 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import '../../../src/md/progress/ui-progress.js'
-import '../../../src/md/progress/ui-circular-progress.js'
-import '../../../src/md/button/ui-button.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI progress'
-
-  repeat = 0
-
-  maxRepeat = 5
-
-  animating = false
-
-  startProgress(): void {
-    const progress = document.querySelector('ui-progress')!
-    const button = document.querySelector('ui-button')!
-    this.repeat = 0
-    progress.value = progress.min
-    progress.style.setProperty('--ui-progress-scale-duration', '0')
-    button.disabled = true
-    if (!this.animating) {
-      this.nextProgress()
-    }
-  }
-
-  nextProgress(): void {
-    const progress = document.querySelector('ui-progress')!
-    const button = document.querySelector('ui-button')!
-    this.animating = true
-    if (progress.value < progress.max) {
-      progress.value += progress.step || 1
-    } else {
-      if (++this.repeat >= this.maxRepeat) {
-        this.animating = false
-        button.disabled = false
-        return
-      }
-      progress.value = progress.min
-    }
-    requestAnimationFrame(this.nextProgress.bind(this))
-  }
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      ${this.imperativeTemplate()} ${this.indeterminateTemplate()} ${this.styledTemplate()} ${this.disabledTemplate()}
-      ${this.secondaryTemplate()} ${this.circularProgressTemplate()} ${this.circularProgressIndeterminateTemplate()}
-    `
-  }
-
-  imperativeTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Imperative control</h2>
-        <p>
-          Once started, loops 5 times before stopping.
-          <ui-button color="elevated" @click="${this.startProgress}" id="start">Start</ui-button>
-        </p>
-        <ui-progress id="progress" aria-label="Imperative control"></ui-progress>
-      </section>
-    `
-  }
-
-  indeterminateTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Indeterminate value</h2>
-        <div class="demo-row">
-          <ui-progress indeterminate aria-label="indeterminate progress"></ui-progress>
-        </div>
-        <div class="demo-row">
-          <ui-progress indeterminate class="slow" aria-label="slow indeterminate progress"></ui-progress>
-        </div>
-      </section>
-    `
-  }
-
-  styledTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Styling</h2>
-        <div class="demo-row">
-          <ui-progress
-            value="40"
-            secondaryProgress="80"
-            class="blue"
-            aria-label="Blue progress with a secondary progress"
-          ></ui-progress>
-        </div>
-        <div class="demo-row">
-          <ui-progress value="800" min="100" max="1000" class="red" aria-label="Red progress"></ui-progress>
-        </div>
-        <div class="demo-row">
-          <ui-progress value="60" class="green" aria-label="green progress"></ui-progress>
-        </div>
-      </section>
-    `
-  }
-
-  disabledTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Disabled state</h2>
-        <div class="demo-row">
-          <ui-progress value="40" secondaryProgress="80" disabled aria-label="Disabled progress"></ui-progress>
-        </div>
-        <div class="demo-row">
-          <ui-progress indeterminate disabled aria-label="Disabled indeterminate progress"></ui-progress>
-        </div>
-      </section>
-    `
-  }
-
-  secondaryTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section secondary">
-        <h2 class="title-large">Timeline</h2>
-        <p>0 - 12 (Δ 12)</p>
-        <ui-progress value="0" secondaryProgress="12" max="328" aria-label="Value 1"></ui-progress>
-        <p>12 - 15 (Δ 3)</p>
-        <ui-progress value="12" secondaryProgress="15" max="328" aria-label="Value 2"></ui-progress>
-        <p>15 - 204 (Δ ${204 - 15})</p>
-        <ui-progress value="15" secondaryProgress="204" max="328" aria-label="Value 3"></ui-progress>
-        <p>204 - 254 (Δ ${254 - 204})</p>
-        <ui-progress value="204" secondaryProgress="254" max="328" aria-label="Value 4"></ui-progress>
-        <p>254 - 254 (Δ 0)</p>
-        <ui-progress value="254" secondaryProgress="254" max="328" aria-label="Value 5"></ui-progress>
-        <p>254 - 328 (Δ ${328 - 254})</p>
-        <ui-progress value="254" secondaryProgress="328" max="328" aria-label="Value 6"></ui-progress>
-      </section>
-    `
-  }
-
-  circularProgressTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Circular Progress</h2>
-        <div class="demo-row">
-          <ui-circular-progress value="40" max="100" aria-label="Circular progress"></ui-circular-progress>
-        </div>
-      </section>
-    `
-  }
-
-  circularProgressIndeterminateTemplate(): TemplateResult {
-    return html`
-      <section class="demo-section">
-        <h2 class="title-large">Circular Indeterminate Progress</h2>
-        <div class="demo-row">
-          <ui-circular-progress indeterminate aria-label="Circular indeterminate progress"></ui-circular-progress>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/segmented-button/index.html

@@ -1,21 +0,0 @@
-<!doctype html>
-<html lang="en-GB">
-<head>
-  <meta charset="utf-8">
-  <title>UI segmented buttons</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/segmented-button/index.js"></script>
-</body>
-</html>

package/demo/md/segmented-button/index.ts

@@ -1,55 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import '../../../src/md/segmented-button/ui-segmented-button.js'
-import '../../../src/md/segmented-button/ui-segmented-button-set.js'
-import '../../../src/md/icons/ui-icon.js'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI segmented buttons'
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Single selection buttons</h2>
-        <div class="demo-row">
-          <ui-segmented-button-set>
-            <ui-segmented-button>Option 1</ui-segmented-button>
-            <ui-segmented-button>Option 2</ui-segmented-button>
-            <ui-segmented-button>Option 3</ui-segmented-button>
-          </ui-segmented-button-set>
-        </div>
-
-        <h2 class="title-large">Preselected button (multi)</h2>
-        <div class="demo-row">
-          <ui-segmented-button-set multiselect>
-            <ui-segmented-button>Driving</ui-segmented-button>
-            <ui-segmented-button selected>Public transport</ui-segmented-button>
-            <ui-segmented-button>Biking</ui-segmented-button>
-          </ui-segmented-button-set>
-        </div>
-
-        <h2 class="title-large">Icons</h2>
-        <div class="demo-row">
-          <ui-segmented-button-set>
-            <ui-segmented-button>
-              Option 1
-              <ui-icon slot="icon" icon="add"></ui-icon>
-            </ui-segmented-button>
-            <ui-segmented-button>
-              Option 2
-              <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
-            </ui-segmented-button>
-            <ui-segmented-button>
-              Option 3
-              <ui-icon slot="icon" icon="cancel"></ui-icon>
-            </ui-segmented-button>
-          </ui-segmented-button-set>
-        </div>
-      </section>
-    `
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/select/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>UI Select</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="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_drop_down,check" 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" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/.tmp/demo/md/select/index.js"></script>
-  </body>
-</html>

package/demo/md/select/index.ts

@@ -1,217 +0,0 @@
-import { html, TemplateResult } from 'lit'
-import { DemoPage } from '../../../src/demo/DemoPage.js'
-import { reactive } from '../../../src/decorators/index.js'
-import '../../../src/md/select/ui-select.js'
-import '../../../src/md/select/ui-option.js'
-import '../../../src/md/button/ui-button.js'
-import '../../../src/md/icons/ui-icon.js'
-
-class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'UI Select'
-
-  @reactive() accessor basicSelected: string | undefined
-
-  @reactive() accessor iconSelected: string | undefined
-
-  @reactive() accessor supportingSelected: string | undefined
-
-  @reactive() accessor noIconSelected: string | undefined
-
-  @reactive() accessor programmaticSelected: string | undefined
-
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <h1>UI Select</h1>
-      <p>A Material Design 3 select component that behaves like an outlined text field with dropdown.</p>
-
-      <section>
-        <h2>Basic Select</h2>
-        <p>Select a fruit from the list:</p>
-        <ui-select id="basic-select" @change="${this.handleBasicSelectChange}" label="Select a fruit">
-          <ui-option value="apple" selected>Apple</ui-option>
-          <ui-option value="banana">Banana</ui-option>
-          <ui-option value="cherry">Cherry</ui-option>
-          <ui-option value="date">Date</ui-option>
-          <ui-option value="elderberry">Elderberry</ui-option>
-        </ui-select>
-        <p>Selected: <span id="basic-result">None</span></p>
-      </section>
-
-      <section>
-        <h2>Select with Icons</h2>
-        <p>Select a country with icons:</p>
-        <ui-select id="icon-select" @change="${this.handleIconSelectChange}" value="us" label="Select a country">
-          <ui-option value="us">
-            <ui-icon slot="start">🇺🇸</ui-icon>
-            United States
-            <span slot="overline">North America</span>
-            <span slot="supporting-text">USA</span>
-          </ui-option>
-          <ui-option value="gb">
-            <ui-icon slot="start">🇬🇧</ui-icon>
-            United Kingdom
-            <span slot="overline">Europe</span>
-            <span slot="supporting-text">UK</span>
-          </ui-option>
-          <ui-option value="de">
-            <ui-icon slot="start">🇩🇪</ui-icon>
-            Germany
-            <span slot="overline">Europe</span>
-            <span slot="supporting-text">DE</span>
-          </ui-option>
-          <ui-option value="fr">
-            <ui-icon slot="start">🇫🇷</ui-icon>
-            France
-            <span slot="overline">Europe</span>
-            <span slot="supporting-text">FR</span>
-          </ui-option>
-          <ui-option value="jp">
-            <ui-icon slot="start">🇯🇵</ui-icon>
-            Japan
-            <span slot="overline">Asia</span>
-            <span slot="supporting-text">JP</span>
-          </ui-option>
-        </ui-select>
-        <p>Selected: <span id="icon-result">None</span></p>
-      </section>
-
-      <section>
-        <h2>Select with Supporting Text</h2>
-        <p>Select a user with additional information:</p>
-        <ui-select id="supporting-select" @change="${this.handleSupportingSelectChange}">
-          <ui-option value="alice">
-            Alice Johnson
-            <span slot="supporting-text">alice@example.com</span>
-          </ui-option>
-          <ui-option value="bob">
-            Bob Smith
-            <span slot="supporting-text">bob@example.com</span>
-          </ui-option>
-          <ui-option value="carol">
-            Carol Davis
-            <span slot="supporting-text">carol@example.com</span>
-          </ui-option>
-          <ui-option value="dave">
-            Dave Wilson
-            <span slot="supporting-text">dave@example.com</span>
-          </ui-option>
-        </ui-select>
-        <p>Selected: <span id="supporting-result">None</span></p>
-      </section>
-
-      <section>
-        <h2>Disabled Select</h2>
-        <p>This select is disabled:</p>
-        <ui-select id="disabled-select" disabled>
-          <ui-option value="option1">Option 1</ui-option>
-          <ui-option value="option2">Option 2</ui-option>
-          <ui-option value="option3">Option 3</ui-option>
-        </ui-select>
-      </section>
-
-      <section>
-        <h2>Select without Selection Icon</h2>
-        <p>Select without the check icon:</p>
-        <ui-select id="no-icon-select" @change="${this.handleNoIconSelectChange}">
-          <ui-option value="red">Red</ui-option>
-          <ui-option value="green">Green</ui-option>
-          <ui-option value="blue">Blue</ui-option>
-          <ui-option value="yellow">Yellow</ui-option>
-        </ui-select>
-        <p>Selected: <span id="no-icon-result">None</span></p>
-      </section>
-
-      <section>
-        <h2>Programmatic Control</h2>
-        <p>Control the select value programmatically:</p>
-        <ui-select id="programmatic-select" @change="${this.handleProgrammaticSelectChange}">
-          <ui-option value="one">One</ui-option>
-          <ui-option value="two">Two</ui-option>
-          <ui-option value="three">Three</ui-option>
-          <ui-option value="four">Four</ui-option>
-        </ui-select>
-        <p>Selected: <span id="programmatic-result">None</span></p>
-        <div class="button-group">
-          <ui-button @click="${this.setValueOne}">Set to "One"</ui-button>
-          <ui-button @click="${this.setValueTwo}">Set to "Two"</ui-button>
-          <ui-button @click="${this.clearValue}">Clear</ui-button>
-        </div>
-      </section>
-    `
-  }
-
-  handleBasicSelectChange(e: CustomEvent): void {
-    const { value } = e.detail
-    this.basicSelected = value
-    console.log(`Basic select changed: ${value}`)
-    const resultElement = document.querySelector('#basic-result')
-    if (resultElement) {
-      resultElement.textContent = value || 'None'
-    }
-  }
-
-  handleIconSelectChange(e: CustomEvent): void {
-    const { value } = e.detail
-    this.iconSelected = value
-    console.log(`Icon select changed: ${value}`)
-    const resultElement = document.querySelector('#icon-result')
-    if (resultElement) {
-      resultElement.textContent = value || 'None'
-    }
-  }
-
-  handleSupportingSelectChange(e: CustomEvent): void {
-    const { value } = e.detail
-    this.supportingSelected = value
-    console.log(`Supporting select changed: ${value}`)
-    const resultElement = document.querySelector('#supporting-result')
-    if (resultElement) {
-      resultElement.textContent = value || 'None'
-    }
-  }
-
-  handleNoIconSelectChange(e: CustomEvent): void {
-    const { value } = e.detail
-    this.noIconSelected = value
-    console.log(`No icon select changed: ${value}`)
-    const resultElement = document.querySelector('#no-icon-result')
-    if (resultElement) {
-      resultElement.textContent = value || 'None'
-    }
-  }
-
-  handleProgrammaticSelectChange(e: CustomEvent): void {
-    const { value } = e.detail
-    this.programmaticSelected = value
-    console.log(`Programmatic select changed: ${value}`)
-    const resultElement = document.querySelector('#programmatic-result')
-    if (resultElement) {
-      resultElement.textContent = value || 'None'
-    }
-  }
-
-  setValueOne(): void {
-    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
-    if (select) {
-      select.value = 'one'
-    }
-  }
-
-  setValueTwo(): void {
-    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
-    if (select) {
-      select.value = 'two'
-    }
-  }
-
-  clearValue(): void {
-    const select = document.querySelector('#programmatic-select') as HTMLElement & { value: string }
-    if (select) {
-      select.value = ''
-    }
-  }
-}
-
-const instance = new ComponentDemoPage()
-instance.render()

package/demo/md/tabs/tabs.html

@@ -1,40 +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 tabs</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;
-    }
-
-    .demo .demo-section {
-      max-width: 858px;
-      margin: 0 auto 80px auto;
-    }
-
-    .demo h2, .demo h3 {
-      margin-bottom: 36px;
-    }
-
-    .frame {
-      padding: 40px;
-      border-radius: 20px;
-      border: 1px var(--md-sys-color-outline) solid;
-    }
-
-    .scrollable {
-      max-width: 700px;
-    }
-  </style>
-</head>
-<body>
-  <div id="app"></div>
-
-  <script type="module" src="/.tmp/demo/md/tabs/tabs.js"></script>
-</body>
-</html>