@api-client/ui 0.2.12 → 0.3.0

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/file-system/internals/Breadcrumbs.ts

@@ -19,7 +19,8 @@ export default class Breadcrumbs extends LitElement {
   }
 
   /**
-   * Deep navigation bar renders the back button and the title only.
+   * The list of breadcrumbs to render.
+   * The breadcrumbs should be ordered from the root to the current folder.
    */
   @property({ type: Object }) accessor breadcrumbs: LiveData<FileBreadcrumb[]> | undefined
 
@@ -91,9 +92,7 @@ export default class Breadcrumbs extends LitElement {
 
   protected override render(): TemplateResult {
     const { breadcrumbs, rootName } = this
-    const items = Array.from(breadcrumbs?.value || [])
-      .filter((i) => i.kind === FolderKind)
-      .reverse()
+    const items = Array.from(breadcrumbs?.value || []).filter((i) => i.kind === FolderKind)
     if (rootName) {
       items.unshift({ key: '', name: rootName, kind: 'root' })
     }

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

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

@@ -6,7 +6,7 @@ import { HttpFlowsUi, StepsTarget } from './HttpFlowsUi.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.js'
 import type Input from '../../md/input/Input.js'
 import UiDialog, { UiDialogClosingReason } from '../../md/dialog/internals/Dialog.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/switch/ui-switch.js'
 import '../../md/dialog/ui-dialog.js'
 import '../../md/divider/ui-divider.js'
@@ -165,7 +165,7 @@ export default class HttpAssertions extends HttpFlowsUi {
   protected renderActionButtons(): TemplateResult {
     return html`
       <div class="editor-actions">
-        <ui-filled-tonal-button @click="${this.handleAdd}" class="add-button">Add</ui-filled-tonal-button>
+        <ui-button color="tonal" @click="${this.handleAdd}" class="add-button">Add</ui-button>
       </div>
     `
   }

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

@@ -11,7 +11,7 @@ import { HttpFlowsUi, StepsTarget } from './HttpFlowsUi.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
-import '../../md/button/ui-outlined-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/divider/ui-divider.js'
 import '../../md/dialog/ui-dialog.js'
 import '../dialog/rename-dialog.js'
@@ -451,10 +451,10 @@ export default class HttpFlows extends HttpFlowsUi {
     const label = trigger === 'request' ? 'Pre-request' : 'Post-request'
     return html`
       <ui-dropdown-list @select="${this.handleTriggerSelect}" horizontalAlign="right" closeOnOutsideClick>
-        <ui-outlined-button class="new-button">
+        <ui-button color="outlined" class="new-button">
           <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
           ${label}
-        </ui-outlined-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           <ui-list-item data-trigger="request" role="menuitem" title="Select pre-request flows"
             >Pre-request</ui-list-item
@@ -474,10 +474,10 @@ export default class HttpFlows extends HttpFlowsUi {
     const hasItems = !!items.length
     return html`
       <ui-dropdown-list @select="${this.handleFlowSelect}" horizontalAlign="right" closeOnOutsideClick>
-        <ui-outlined-button class="new-button">
+        <ui-button color="outlined" class="new-button">
           <ui-icon icon="arrowDropDown" slot="icon"></ui-icon>
           ${label}
-        </ui-outlined-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           ${hasItems
             ? html`
@@ -569,7 +569,7 @@ export default class HttpFlows extends HttpFlowsUi {
     return html`
       <div class="empty-message">Create a flow to get started.</div>
       <div class="empty-message">
-        <ui-outlined-button @click="${this.handleAdd}" class="empty-button">Create</ui-outlined-button>
+        <ui-button color="outlined" @click="${this.handleAdd}" class="empty-button">Create</ui-button>
       </div>
     `
   }

package/src/elements/http/RequestEditor.ts

@@ -37,9 +37,7 @@ import '../../define/http/http-request-config.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-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/tabs/ui-tabs.js'
 import '../../md/tabs/ui-tab.js'
 import '../../md/divider/ui-divider.js'
@@ -769,10 +767,10 @@ export default class RequestEditor extends ApiElement {
         class="verb-dropdown"
         closeOnOutsideClick
       >
-        <ui-text-button class="button">
+        <ui-button color="text" class="button">
           ${method}
           <ui-icon icon="arrowDropDown"></ui-icon>
-        </ui-text-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu"> ${this.renderHttpVerbOptions()} </ui-list>
       </ui-dropdown-list>
     `
@@ -816,11 +814,11 @@ export default class RequestEditor extends ApiElement {
   protected renderSendButton(): TemplateResult | string {
     if (this.loading) {
       return html`
-        <ui-filled-button title="Abort the request" class="send-button" @click="${this.abort}">Abort</ui-filled-button>
+        <ui-button color="filled" title="Abort the request" class="send-button" @click="${this.abort}">Abort</ui-button>
       `
     }
     return html`
-      <ui-filled-button title="Send the request" class="send-button" @click="${this.send}">Send</ui-filled-button>
+      <ui-button color="filled" title="Send the request" class="send-button" @click="${this.send}">Send</ui-button>
     `
   }
 
@@ -950,14 +948,15 @@ export default class RequestEditor 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>
     `
@@ -1195,8 +1194,8 @@ export default class RequestEditor extends ApiElement {
         <p><b>Do you want to continue?</b></p>
       </div>
 
-      <ui-text-button value="dismiss" slot="button">Cancel request</ui-text-button>
-      <ui-text-button value="confirm" slot="button">Continue</ui-text-button>
+      <ui-button color="text" value="dismiss" slot="button">Cancel request</ui-button>
+      <ui-button color="text" value="confirm" slot="button">Continue</ui-button>
     </ui-dialog>`
   }
 }

package/src/elements/http/UrlParamsForm.ts

@@ -6,7 +6,7 @@ import { UrlEncoder } from '@api-client/core/lib/parsers/UrlEncoder.js'
 import ApiElement from '../ApiElement.js'
 import type Input from '../../md/input/Input.js'
 import type SwitchElement from '../../md/switch/internals/SwitchElement.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'
@@ -273,9 +273,9 @@ export default class UrlParamsForm 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.handleEncode}">URL encode</ui-filled-tonal-button>
-        <ui-filled-tonal-button @click="${this.handleDecode}">URL decode</ui-filled-tonal-button>
+        <ui-button color="tonal" @click="${this.handleAdd}">Add</ui-button>
+        <ui-button color="tonal" @click="${this.handleEncode}">URL encode</ui-button>
+        <ui-button color="tonal" @click="${this.handleDecode}">URL decode</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

package/src/elements/project/HttpProjectRequest.ts

@@ -27,7 +27,7 @@ import { EventTypes } from '../../events/EventTypes.js'
 import { midnightTimestamp } from '../../lib/time/Conversion.js'
 
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-text-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'
@@ -439,10 +439,10 @@ export default class HttpProjectRequest extends RequestEditor {
         class="environment-dropdown"
         closeOnOutsideClick
       >
-        <ui-text-button class="button">
+        <ui-button color="text" class="button">
           ${currentEnvironmentLabel || 'No environment'}
           <ui-icon icon="arrowDropDown"></ui-icon>
-        </ui-text-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu">
           <ui-list-item
             role="menuitem"

package/src/elements/project/HttpProjectRequestHistory.ts

@@ -17,8 +17,7 @@ import '@github/relative-time-element'
 import type UiIconButton from '../../md/icon-button/internals/IconButton.js'
 import '../../define/http/http-request-log.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-filled-tonal-button.js'
-import '../../md/button/ui-text-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'
@@ -446,10 +445,10 @@ export default class HttpProjectRequestHistory extends ApiElement {
         closeOnOutsideClick
         @select="${this.handleSelection}"
       >
-        <ui-filled-tonal-button ?disabled="${disabled}">
+        <ui-button color="tonal" ?disabled="${disabled}">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           History
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="History list"> ${this.renderHistoryList()} </ui-list>
       </ui-dropdown-list>
     `
@@ -589,8 +588,8 @@ export default class HttpProjectRequestHistory extends ApiElement {
         <ui-icon slot="icon" icon="deleteOutline"></ui-icon>
         <span slot="title">Delete history?</span>
         <p>This will clear responses history for this request.</p>
-        <ui-text-button slot="button" value="dismiss">Cancel</ui-text-button>
-        <ui-text-button slot="button" value="confirm">Accept</ui-text-button>
+        <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+        <ui-button color="text" slot="button" value="confirm">Accept</ui-button>
       </ui-dialog>
     `
   }