@api-client/ui 0.2.13 → 0.3.1

package/demo/md/inputs/switch.ts

@@ -125,7 +125,7 @@ class ComponentDemoPage extends DemoPage {
           <ui-switch name="switch" aria-labelledby="switch" id="switchCheckbox"></ui-switch>
           <label class="label-medium" id="switch" for="switchCheckbox">Newsletter</label>
 
-          <ui-filled-button name="submit" value="on" type="submit">Submit</ui-filled-button>
+          <ui-button color="filled" name="submit" value="on" type="submit">Submit</ui-button>
         </form>
 
         ${formValues

package/demo/md/notification/snack.ts

@@ -55,11 +55,11 @@ class ComponentDemoPage extends DemoPage {
       <section class="demo-section">
         <h2 class="title-large">Snackbar</h2>
         <div class="demo-row">
-          <ui-filled-button @click="${this.simpleHandler}">Simple snackbar</ui-filled-button>
-          <ui-filled-button @click="${this.timeoutHandler}">2 second snackbar</ui-filled-button>
-          <ui-filled-button @click="${this.closeHandler}">With close button</ui-filled-button>
-          <ui-filled-button @click="${this.actionHandler}">With action</ui-filled-button>
-          <ui-filled-button @click="${this.closeActionHandler}">With action and close button</ui-filled-button>
+          <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>
     `

package/demo/md/progress/progress.ts

@@ -2,6 +2,7 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
 import '../../../src/md/progress/ui-progress.js'
+import '../../../src/md/button/ui-button.js'
 
 class ComponentDemoPage extends DemoPage {
   override accessor componentName = 'UI progress'
@@ -14,7 +15,7 @@ class ComponentDemoPage extends DemoPage {
 
   startProgress(): void {
     const progress = document.querySelector('ui-progress')!
-    const button = document.querySelector('ui-elevated-button')!
+    const button = document.querySelector('ui-button')!
     this.repeat = 0
     progress.value = progress.min
     progress.style.setProperty('--ui-progress-scale-duration', '0')
@@ -26,7 +27,7 @@ class ComponentDemoPage extends DemoPage {
 
   nextProgress(): void {
     const progress = document.querySelector('ui-progress')!
-    const button = document.querySelector('ui-elevated-button')!
+    const button = document.querySelector('ui-button')!
     this.animating = true
     if (progress.value < progress.max) {
       progress.value += progress.step || 1
@@ -55,7 +56,7 @@ class ComponentDemoPage extends DemoPage {
         <h2 class="title-large">Imperative control</h2>
         <p>
           Once started, loops 5 times before stopping.
-          <ui-elevated-button @click="${this.startProgress}" id="start">Start</ui-elevated-button>
+          <ui-button color="elevated" @click="${this.startProgress}" id="start">Start</ui-button>
         </p>
         <ui-progress id="progress" aria-label="Imperative control"></ui-progress>
       </section>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.13",
+  "version": "0.3.1",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -184,7 +184,7 @@
     "@open-wc/testing": "^4.0.0",
     "@types/marked": "^5.0.2",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^22.14.0",
+    "@types/node": "^24.0.0",
     "@types/prismjs": "^1.26.0",
     "@web/dev-server": "^0.4.6",
     "@web/test-runner": "^0.20.0",

package/src/core/ModalActivity.ts

@@ -7,7 +7,7 @@ import state from '../decorators/state.js'
 import { IntentResult } from './ActivityManager.js'
 
 import '../md/dialog/ui-dialog.js'
-import '../md/button/ui-text-button.js'
+import '../md/button/ui-button.js'
 
 export interface ActionButtonInit {
   /**
@@ -143,8 +143,8 @@ export abstract class ModalActivity extends Activity {
    */
   protected renderNegativeButton(init: ActionButtonInit = {}): TemplateResult {
     const { label = 'Cancel' } = init
-    return html`<ui-text-button slot="button" type="button" value="dismiss" @click="${init.callback}"
-      >${label}</ui-text-button
+    return html`<ui-button color="text" slot="button" type="button" value="dismiss" @click="${init.callback}"
+      >${label}</ui-button
     >`
   }
 
@@ -159,14 +159,15 @@ export abstract class ModalActivity extends Activity {
     const { formId } = this
     const type = formId ? 'submit' : 'button'
     // UI buttons have a proper support for form association.
-    return html`<ui-text-button
+    return html`<ui-button
+      color="text"
       slot="button"
       ?disabled="${disabled}"
       type="${type}"
       value="confirm"
       form="${ifDefined(formId)}"
       @click="${init.callback}"
-      >${label}</ui-text-button
+      >${label}</ui-button
     >`
   }
 

package/src/core/ThemeManager.ts

@@ -1,10 +1,11 @@
-export type ThemeType = 'default' | 'light' | 'dark'
+type ThemeTypeInternal = 'light' | 'dark'
+export type ThemeType = 'default' | ThemeTypeInternal
 
 export class ThemeManager {
   /**
    * Detected system theme.
    */
-  #systemTheme: 'light' | 'dark' = 'light'
+  #systemTheme: ThemeTypeInternal = 'light'
 
   /**
    * The theme to use as selected by the user.
@@ -38,7 +39,7 @@ export class ThemeManager {
   }
 
   #themeActiveCallback(): void {
-    let theme: 'light' | 'dark'
+    let theme: ThemeTypeInternal
     if (this.#userTheme === 'default') {
       theme = this.#systemTheme
     } else {
@@ -47,7 +48,7 @@ export class ThemeManager {
     this.activateTheme(theme)
   }
 
-  activateTheme(type: 'light' | 'dark'): void {
+  activateTheme(type: ThemeTypeInternal): void {
     const root = document.querySelector('html')
     if (!root) {
       return

package/src/demo/DemoPage.ts

@@ -10,10 +10,7 @@ import type CheckboxElement from '../md/checkbox/internals/CheckboxElement.js'
 import { adaptStatic } from '../decorators/styles.js'
 
 import '../md/icons/ui-icon.js'
-import '../md/button/ui-filled-button.js'
-import '../md/button/ui-text-button.js'
-import '../md/button/ui-outlined-button.js'
-import '../md/button/ui-elevated-button.js'
+import '../md/button/ui-button.js'
 
 const Base = RenderableMixin(RouteMixin(EventTarget))
 
@@ -166,7 +163,7 @@ export abstract class DemoPage extends Base {
   authenticateTemplate(): TemplateResult {
     return html`
       <p>Store authorization required.</p>
-      <ui-filled-button @click="${this.handleAuthenticate}">Authenticate</ui-filled-button>
+      <ui-button color="filled" @click="${this.handleAuthenticate}">Authenticate</ui-button>
     `
   }
 }

package/src/elements/authorization/ui/CcAuthorization.ts

@@ -3,7 +3,7 @@ import { state } from 'lit/decorators.js'
 import { Authorization } from './Authorization.js'
 import { Events } from '../../../events/Events.js'
 import '../../../md/dropdown-list/ui-dropdown-list.js'
-import '../../../md/button/ui-filled-tonal-button.js'
+import '../../../md/button/ui-button.js'
 import '../../../md/icon-button/ui-icon-button.js'
 import '../../../md/icons/ui-icon.js'
 import type { ICCAuthorization } from '@api-client/core/models/Authorization.js'
@@ -90,7 +90,7 @@ export default class CcAuthorization extends Authorization {
     return html`
       <div class="selector">
         <ui-dropdown-list @open="${this.handleDropDownOpen}">
-          <ui-filled-tonal-button class="dropdown-trigger">Select a certificate</ui-filled-tonal-button>
+          <ui-button color="tonal" class="dropdown-trigger">Select a certificate</ui-button>
           ${selectorRendered
             ? html`<file-picker slot="dropdown" .kinds="${kinds}" @close="${this.handleClose}"></file-picker>`
             : nothing}

package/src/elements/authorization/ui/OAuth2Authorization.ts

@@ -18,7 +18,7 @@ import { SupportedInputTypes } from '../../../types/input.js'
 import CheckboxElement from '../../../md/checkbox/internals/CheckboxElement.js'
 import { selectNode } from '../Utils.js'
 import { SnackNotifications } from '../../../md/notification/SnackNotifications.js'
-import '../../../md/button/ui-filled-button.js'
+import '../../../md/button/ui-button.js'
 import '../../../md/text-field/ui-filled-text-field.js'
 import '../../../md/list/ui-list.js'
 import '../../../md/list/ui-list-item.js'
@@ -838,12 +838,13 @@ export default class OAuth2Authorization extends Authorization {
         <span @click="${this.handleClickCopy}" @keydown="${this.handlerCopyKeydown}">${accessToken}</span>
       </p>
       <div class="authorize-actions base-level">
-        <ui-filled-button
+        <ui-button
+          color="filled"
           ?disabled="${authorizing}"
           class="auth-button"
           data-type="refresh-token"
           @click="${this.authorize}"
-          >Refresh access token</ui-filled-button
+          >Refresh access token</ui-button
         >
       </div>
     </div>`
@@ -855,8 +856,13 @@ export default class OAuth2Authorization extends Authorization {
   protected renderOAth2Authorize(): TemplateResult | typeof nothing {
     const { authorizing } = this
     return html` <div class="authorize-actions base-level">
-      <ui-filled-button ?disabled="${authorizing}" class="auth-button" data-type="get-token" @click="${this.authorize}"
-        >Request access token</ui-filled-button
+      <ui-button
+        color="filled"
+        ?disabled="${authorizing}"
+        class="auth-button"
+        data-type="get-token"
+        @click="${this.authorize}"
+        >Request access token</ui-button
       >
     </div>`
   }

package/src/elements/authorization/ui/OidcAuthorization.ts

@@ -16,8 +16,7 @@ import type { IOpenIdProviderMetadata } from '@api-client/core/authorization/typ
 import OAuth2Authorization from './OAuth2Authorization.js'
 import Input from '../../../md/input/Input.js'
 import '../../../md/icons/ui-icon.js'
-import '../../../md/button/ui-filled-tonal-button.js'
-import '../../../md/button/ui-filled-button.js'
+import '../../../md/button/ui-button.js'
 
 export const GrantLabels: Record<string, string> = {
   [KnownGrants.implicit]: 'Access token',
@@ -431,11 +430,12 @@ export default class OidcAuthorization extends OAuth2Authorization {
           @change="${this.handleIssuerUri}"
         ></ui-filled-text-field>
 
-        <ui-filled-tonal-button
+        <ui-button
+          color="tonal"
           title="Downloads and processes the discovery info"
           @click="${this.handleIssuerRead}"
           data-type="read-discovery"
-          >Read</ui-filled-tonal-button
+          >Read</ui-button
         >
       </div>
     `
@@ -500,12 +500,13 @@ export default class OidcAuthorization extends OAuth2Authorization {
       <p class="tokens-title">Tokens</p>
       ${tokens.map((info, index) => this.renderToken(info, index))}
       <div class="authorize-actions">
-        <ui-filled-button
+        <ui-button
+          color="filled"
           ?disabled="${authorizing}"
           class="auth-button"
           data-type="refresh-token"
           @click="${this.authorize}"
-          >Refresh tokens</ui-filled-button
+          >Refresh tokens</ui-button
         >
       </div>
     </div>`
@@ -578,12 +579,13 @@ export default class OidcAuthorization extends OAuth2Authorization {
   protected override renderOAth2Authorize(): TemplateResult | typeof nothing {
     const { authorizing } = this
     return html` <div class="authorize-actions base-level">
-      <ui-filled-button
+      <ui-button
+        color="filled"
         ?disabled="${authorizing || !this.discovered}"
         class="auth-button"
         data-type="get-token"
         @click="${this.authorize}"
-        >Request tokens</ui-filled-button
+        >Request tokens</ui-button
       >
     </div>`
   }

package/src/elements/code/HttpSnippets.ts

@@ -21,7 +21,7 @@ import DartSnippet from '../../code-snippets/Dart/DartSnippet.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/icons/ui-icon.js'
 
 interface CodeGroup {
@@ -240,10 +240,10 @@ export default class HttpSnippets extends LitElement {
         closeOnOutsideClick
         @select="${this.handleGroupSelect}"
       >
-        <ui-filled-tonal-button title="Select language" aria-label="Opens a menu to select the language">
+        <ui-button color="tonal" title="Select language" aria-label="Opens a menu to select the language">
           <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
           ${label}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           ${topTabs.map((tab) => html`<ui-list-item role="menuitem" data-id="${tab.id}">${tab.label}</ui-list-item>`)}
         </ui-list>
@@ -260,10 +260,10 @@ export default class HttpSnippets extends LitElement {
     const label = selectedItem ? selectedItem.label : 'Framework'
     return html`
       <ui-dropdown-list verticalAlign="top" class="group-dropdown" closeOnOutsideClick @select="${this.handleSubGroup}">
-        <ui-filled-tonal-button title="Select a framework" aria-label="Opens a menu to select the framework">
+        <ui-button color="tonal" title="Select a framework" aria-label="Opens a menu to select the framework">
           <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
           ${label}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           ${groupTabs.map((tab) => html`<ui-list-item role="menuitem" data-id="${tab.id}">${tab.label}</ui-list-item>`)}
         </ui-list>

package/src/elements/dialog/internals/ConfirmDelete.ts

@@ -2,7 +2,7 @@ import { TemplateResult, html } from 'lit'
 import { property } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
 import UiDialog from '../../../md/dialog/internals/Dialog.js'
-import '../../md/button/ui-text-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/icons/ui-icon.js'
 
 export type IDialogType = 'files' | 'project'
@@ -75,11 +75,11 @@ export default class ConfirmDelete extends UiDialog {
     }
     return html`
       <div class="${classMap(classes)}" part="button">
-        <ui-text-button value="dismiss" class="internal-button" @click="${this.handleDismiss}"
-          >${dismissLabel}</ui-text-button
+        <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
+          >${dismissLabel}</ui-button
         >
-        <ui-text-button value="confirm" class="internal-button" @click="${this.handleConfirm}"
-          >${confirmLabel}</ui-text-button
+        <ui-button color="text" value="confirm" class="internal-button" @click="${this.handleConfirm}"
+          >${confirmLabel}</ui-button
         >
       </div>
     `

package/src/elements/dialog/internals/Rename.ts

@@ -5,7 +5,7 @@ import { live } from 'lit/directives/live.js'
 import UiDialog from '../../../md/dialog/internals/Dialog.js'
 import type Input from '../../../md/input/Input.js'
 
-import '../../../md/button/ui-text-button.js'
+import '../../../md/button/ui-button.js'
 import '../../../md/icons/ui-icon.js'
 import '../../../md/text-field/ui-filled-text-field.js'
 
@@ -117,15 +117,16 @@ export default class RenameDialogElement extends UiDialog {
     }
     return html`
       <div class="${classMap(classes)}" part="button">
-        <ui-text-button value="dismiss" class="internal-button" @click="${this.handleDismiss}"
-          >${dismissLabel}</ui-text-button
+        <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
+          >${dismissLabel}</ui-button
         >
-        <ui-text-button
+        <ui-button
+          color="text"
           value="confirm"
           class="internal-button"
           ?disabled="${!this.hasValue}"
           @click="${this.handleConfirm}"
-          >${confirmLabel}</ui-text-button
+          >${confirmLabel}</ui-button
         >
       </div>
     `

package/src/elements/environment/EnvironmentEditor.ts

@@ -23,7 +23,7 @@ import '../../md/icons/ui-icon.js'
 import '../../md/text-field/ui-filled-text-field.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/icon-button/ui-icon-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/divider/ui-divider.js'
 import '../../md/tabs/ui-tabs.js'
 import '../../md/tabs/ui-tab.js'
@@ -318,7 +318,7 @@ export default class EnvironmentEditor extends ApiElement {
     return html`
       <div class="section-title">Server</div>
       <p class="empty-info">No server defined.</p>
-      <ui-filled-tonal-button @click="${this._createServerHandler}">Create server</ui-filled-tonal-button>
+      <ui-button color="tonal" @click="${this._createServerHandler}">Create server</ui-button>
     `
   }
 
@@ -366,14 +366,15 @@ export default class EnvironmentEditor extends ApiElement {
     const toRender: string[] = all.filter((type) => !current.some((i) => i.type === type))
     return html`
       <ui-dropdown-list verticalAlign="top" @select="${this.handleAuthAdd}" class="auth-dropdown" closeOnOutsideClick>
-        <ui-filled-tonal-button
+        <ui-button
+          color="tonal"
           title="Add authorization option"
           aria-label="Opens a menu to select authorization option"
           ?disabled="${!toRender.length}"
         >
           <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
           Add
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderAuthorizationOptions(toRender)} </ui-list>
       </ui-dropdown-list>
     `

package/src/elements/http/BodyEditor.ts

@@ -31,9 +31,7 @@ import '../../md/icons/ui-icon.js'
 import '../../define/http/http-body-urlencoded-editor.js'
 import '../../define/http/http-body-multipart-editor.js'
 import '../../define/http/http-body-text-editor.js'
-import '../../md/button/ui-outlined-button.js'
-import '../../md/button/ui-text-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
@@ -588,10 +586,10 @@ export default class BodyEditor extends ApiElement {
         class="type-dropdown"
         closeOnOutsideClick
       >
-        <ui-filled-tonal-button title="Select editor type" aria-label="Opens a menu to select editor type">
+        <ui-button color="tonal" title="Select editor type" aria-label="Opens a menu to select editor type">
           <ui-icon icon="arrowDropDown" slot="icon" role="presentation"></ui-icon>
           ${label}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderBodyTypeOptions()} </ui-list>
       </ui-dropdown-list>
     `
@@ -633,13 +631,14 @@ export default class BodyEditor extends ApiElement {
         class="mime-dropdown"
         closeOnOutsideClick
       >
-        <ui-filled-tonal-button
+        <ui-button
+          color="tonal"
           title="Select media type. This overrides the content-type header"
           aria-label="Editor media type"
         >
           <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
           ${label}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderMonacoOptions()} </ui-list>
       </ui-dropdown-list>
     `
@@ -657,30 +656,33 @@ export default class BodyEditor extends ApiElement {
   protected renderUrlEncodeEditorActions(): TemplateResult {
     const { autoEncode } = this
     return html`
-      <ui-filled-tonal-button
+      <ui-button
+        color="tonal"
         aria-label="Adds a new parameter"
         title="Adds a new parameter"
         @click="${this.handleAddUrlEncode}"
       >
         <ui-icon slot="icon" icon="add" role="presentation"></ui-icon>
         Add
-      </ui-filled-tonal-button>
-      <ui-outlined-button
+      </ui-button>
+      <ui-button
+        color="outlined"
         title="URL encodes parameters in the editor"
         aria-label="URL encodes parameters in the editor"
         @click="${this.handleUrlEncode}"
         ?disabled="${autoEncode}"
       >
         URL encode
-      </ui-outlined-button>
-      <ui-outlined-button
+      </ui-button>
+      <ui-button
+        color="outlined"
         title="URL decodes parameters in the editor"
         aria-label="URL decodes parameters in the editor"
         @click="${this.handleUrlDecode}"
         ?disabled="${autoEncode}"
       >
         URL decode
-      </ui-outlined-button>
+      </ui-button>
       <label title="When set it automatically encodes the values before sending the request" class="label-medium">
         <ui-checkbox .checked="${autoEncode}" @change="${this.handleUrlEncodeAutoChange}"></ui-checkbox>
         Encode on send
@@ -690,20 +692,22 @@ export default class BodyEditor extends ApiElement {
 
   protected renderMultipartActions(): TemplateResult {
     return html`
-      <ui-outlined-button
+      <ui-button
+        color="outlined"
         title="Adds a new part with a file value"
         aria-label="Adds a new part with a file value"
         @click="${this.handleMultipartAddFile}"
       >
         Add file part
-      </ui-outlined-button>
-      <ui-outlined-button
+      </ui-button>
+      <ui-button
+        color="outlined"
         title="Adds a new part with a text value"
         aria-label="Adds a new part with a text value"
         @click="${this.handleMultipartAddText}"
       >
         Add text part
-      </ui-outlined-button>
+      </ui-button>
     `
   }
 
@@ -793,7 +797,7 @@ export default class BodyEditor extends ApiElement {
   protected renderFileEditor(): TemplateResult {
     return html`
       <div class="file-picker">
-        <ui-text-button @click="${this.handlePickFile}">Choose a file</ui-text-button>
+        <ui-button color="text" @click="${this.handlePickFile}">Choose a file</ui-button>
         ${this.renderFileDetail()}
       </div>
       <input type="file" class="binary-hidden" @change="${this.handleFileChange}" />
@@ -864,11 +868,12 @@ export default class BodyEditor extends ApiElement {
       <p class="message body-medium">
         The <code>content-type</code> header has different value than <b>${suggested}</b>.
       </p>
-      <ui-filled-tonal-button
+      <ui-button
         class="fix"
         title="Updates the content type header for the request"
         @click="${this.autoFixMime}"
-        >Fix</ui-filled-tonal-button
+        color="tonal"
+        >Fix</ui-button
       >
     `
   }

package/src/elements/http/BodyMultipartEditor.ts

@@ -15,7 +15,7 @@ import ApiElement from '../ApiElement.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/icon-button/ui-icon-button.js'
-import '../../md/button/ui-text-button.js'
+import '../../md/button/ui-button.js'
 
 let hasSupport: boolean
 try {
@@ -639,8 +639,8 @@ export default class BodyMultipartEditor extends ApiElement {
     const meta = item && (item.meta as IFileMeta | undefined)
     return html`
       <div class="input-wrapper file-input">
-        <ui-text-button @click="${this.handleFilePick}" ?disabled="${readOnly}" class="choose-button"
-          >Choose file</ui-text-button
+        <ui-button color="text" @click="${this.handleFilePick}" ?disabled="${readOnly}" class="choose-button"
+          >Choose file</ui-button
         >
         <input type="file" hidden data-index="${index}" @change="${this.handleFilePartValue}" />
         ${meta ? html`<span class="file-info">${meta.name} (${meta.mime}), ${item.data.length} bytes</span>` : ''}

package/src/elements/http/CertificateAdd.element.ts

@@ -15,9 +15,7 @@ import { SnackNotifications } from '../../md/notification/SnackNotifications.js'
 import '../../md/segmented-button/ui-segmented-button.js'
 import '../../md/segmented-button/ui-segmented-button-set.js'
 import '../../md/text-field/ui-filled-text-field.js'
-import '../../md/button/ui-text-button.js'
-import '../../md/button/ui-filled-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/progress/ui-progress.js'
 
@@ -383,8 +381,8 @@ export default class CertificateAdd extends ApiElement {
         @drop="${this.handleFileDrop}"
       >
         <p class="body-medium">Select or drop a certificate file here.</p>
-        <ui-filled-tonal-button @click="${this.handleSelectCertificate}" class="select-button"
-          >Select certificate file</ui-filled-tonal-button
+        <ui-button color="tonal" @click="${this.handleSelectCertificate}" class="select-button"
+          >Select certificate file</ui-button
         >
         ${certificateFile
           ? html`<span class="cert-info body-medium">${certificateFile.fileName}</span>`
@@ -430,9 +428,7 @@ export default class CertificateAdd extends ApiElement {
         @drop="${this.handleFileDrop}"
       >
         <p class="body-medium">Select or drop a key file here.</p>
-        <ui-filled-tonal-button @click="${this.handleSelectKey}" class="select-button"
-          >Select key file</ui-filled-tonal-button
-        >
+        <ui-button color="tonal" @click="${this.handleSelectKey}" class="select-button">Select key file</ui-button>
         ${keyFile
           ? html`<span class="cert-info body-medium">${keyFile.fileName}</span>`
           : html`<span class="missing body-medium"
@@ -464,8 +460,8 @@ export default class CertificateAdd extends ApiElement {
   protected renderImportButton(): TemplateResult {
     return html`
       <div class="form-action">
-        <ui-filled-button @click="${this.handleImport}">Import</ui-filled-button>
-        <ui-text-button @click="${this.handleCancel}">Cancel</ui-text-button>
+        <ui-button color="filled" @click="${this.handleImport}">Import</ui-button>
+        <ui-button color="text" @click="${this.handleCancel}">Cancel</ui-button>
       </div>
     `
   }

package/src/elements/http/HeadersForm.ts

@@ -11,7 +11,7 @@ import type Input from '../../md/input/Input.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.js'
 import { EventTypes } from '../../events/EventTypes.js'
 import { SnackNotifications } from '../../md/notification/SnackNotifications.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/icon-button/ui-icon-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
@@ -405,8 +405,8 @@ export default class HeadersForm extends ApiElement {
   protected renderActionButtons(): TemplateResult {
     return html`
       <div class="editor-actions">
-        <ui-filled-tonal-button @click="${this.handleAdd}">Add</ui-filled-tonal-button>
-        <ui-filled-tonal-button @click="${this.handleCopy}">Copy</ui-filled-tonal-button>
+        <ui-button color="tonal" @click="${this.handleAdd}">Add</ui-button>
+        <ui-button color="tonal" @click="${this.handleCopy}">Copy</ui-button>
         <ui-dropdown-list @select="${this.handleOption}" closeOnOutsideClick class="dropdown">
           <ui-icon-button aria-label="Additional options"
             ><ui-icon icon="moreVert" role="presentation"></ui-icon