@api-client/ui 0.2.12 → 0.3.0

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

@@ -1,21 +1,20 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
-import IconButtonElement from '../../../src/md/icon-button/internals/IconButton.js'
+import IconButtonElement, { type MdIconButtonWidth } from '../../../src/md/icon-button/internals/IconButton.js'
+import reactive from '../../../src/decorators/reactive.js'
+import type { MdButtonSize, MdButtonShape } from '../../../src/md/button/internals/base.js'
 
 import '../../../src/md/icon-button/ui-icon-button.js'
-import '../../../src/md/icon-button/ui-filled-icon-button.js'
-import '../../../src/md/icon-button/ui-filled-tonal-icon-button.js'
-import '../../../src/md/icon-button/ui-outlined-icon-button.js'
 import '../../../src/md/icons/ui-icon.js'
 
-import '@material/web/iconbutton/icon-button.js'
-import '@material/web/iconbutton/filled-icon-button.js'
-import '@material/web/iconbutton/filled-tonal-icon-button.js'
-import '@material/web/iconbutton/outlined-icon-button.js'
-import '@material/web/icon/icon.js'
-
 class ComponentDemoPage extends DemoPage {
-  override accessor componentName = 'API icon button'
+  override accessor componentName = 'UI icon button'
+
+  @reactive() accessor size: MdButtonSize = 's'
+
+  @reactive() accessor shape: MdButtonShape = 'round'
+
+  @reactive() accessor width: MdIconButtonWidth = 'default'
 
   _clickHandler(e: Event): void {
     const button = e.target as IconButtonElement
@@ -24,208 +23,105 @@ class ComponentDemoPage extends DemoPage {
 
   _activeHandler(e: Event): void {
     const button = e.target as IconButtonElement
-    console.log(`A ${button.localName} button was ${button.active ? 'activated' : 'deactivated'}`)
+    console.log(`A ${button.localName} button was ${button.selected ? 'activated' : 'deactivated'}`)
   }
 
-  contentTemplate(): TemplateResult {
-    return html`
-      <a href="../">Back</a>
-      <section class="demo-section">
-        <h2 class="title-large">Filled icon button</h2>
-
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-filled-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
-          <ui-filled-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-icon-button
-          >
+  handleSizeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.size = select.value as MdButtonSize
+  }
 
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
+  handleShapeChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.shape = select.value as MdButtonShape
+  }
 
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-filled-icon-button><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button toggle><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button toggle selected><md-icon>settings</md-icon></md-filled-icon-button>
-          <md-filled-icon-button disabled><md-icon>settings</md-icon></md-filled-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-      </section>
+  handleWidthChange(e: Event): void {
+    const select = e.target as HTMLSelectElement
+    this.width = select.value as MdIconButtonWidth
+  }
 
-      <section class="demo-section">
-        <h2 class="title-large">Filled tonal icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-filled-tonal-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: standard filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: toggle, active filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
-          <ui-filled-tonal-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-label="Settings: disabled filled button"
-            ><ui-icon>settings</ui-icon></ui-filled-tonal-icon-button
-          >
+  readonly icon = html`<ui-icon>settings</ui-icon>`
 
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
-        </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-filled-tonal-icon-button><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button toggle><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button toggle selected><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <md-filled-tonal-icon-button disabled><md-icon>settings</md-icon></md-filled-tonal-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+  contentTemplate(): TemplateResult {
+    const { size: s, shape: h, icon: i, width: w } = this
+    return html`
+      <a href="../">Back</a>
+      ${this.renderConfigurationSection()}
+      <section class="demo-section ${s}">
+        <h2 class="display-large">Color</h2>
+        <div class="color-grid">
+          <span>&nbsp</span>
+          <span class="legend-marker">1</span>
+          <span class="legend-marker">2</span>
+          <span class="legend-marker">3</span>
+          <span class="legend-marker">A</span>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="filled" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
+          <span class="legend-marker">B</span>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="tonal" .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
+          <span class="legend-marker">C</span>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button color="outlined" .size="${s}" .shape="${h}" .width="${w}" toggle selected
+            >${i}</ui-icon-button
+          >
+          <span class="legend-marker">D</span>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}">${i}</ui-icon-button>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle>${i}</ui-icon-button>
+          <ui-icon-button .size="${s}" .shape="${h}" .width="${w}" toggle selected>${i}</ui-icon-button>
         </div>
+        <p class="body-medium">A. Filled, B. Tonal, C. Outlined, D. Standard</p>
+        <ol class="decimal body-medium">
+          <li>Default</li>
+          <li>Toggle: unselected</li>
+          <li>Toggle: selected</li>
+        </ol>
       </section>
+    `
+  }
 
+  renderConfigurationSection(): TemplateResult {
+    const { size: s, shape: h, width: w } = this
+    return html`
       <section class="demo-section">
-        <h2 class="title-large">Outlined icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-
-        <div class="demo-row icons-demo-row">
-          <ui-outlined-icon-button
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iont"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iotu"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            active
-            toggle
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iots"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-          <ui-outlined-icon-button
-            disabled
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="iod"
-            ><ui-icon>settings</ui-icon></ui-outlined-icon-button
-          >
-
-          <p class="label-large" id="iont">No toggle</p>
-          <p class="label-large" id="iotu">Toggle (unselected)</p>
-          <p class="label-large" id="iots">Toggle (selected)</p>
-          <p class="label-large" id="iod">Disabled</p>
-        </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-outlined-icon-button><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button toggle><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button toggle selected><md-icon>settings</md-icon></md-outlined-icon-button>
-          <md-outlined-icon-button disabled><md-icon>settings</md-icon></md-outlined-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+        <h2 class="title-large">Configuration</h2>
+        <div class="md-select outlined">
+          <label for="size">Size</label>
+          <select class="md-select" id="size" @change="${this.handleSizeChange}" name="size" .value="${s}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="xs">Extra small</option>
+            <option value="s">Small</option>
+            <option value="m">Medium</option>
+            <option value="l">Large</option>
+            <option value="xl">Extra large</option>
+          </select>
         </div>
-      </section>
-
-      <section class="demo-section">
-        <h2 class="title-large">Standard icon button</h2>
-        <h3 class="title-small">UI icon button</h3>
-        <div class="demo-row icons-demo-row">
-          <ui-icon-button @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isnt"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button toggle @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="istu"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button
-            toggle
-            active
-            @click="${this._clickHandler}"
-            @active="${this._activeHandler}"
-            aria-labelledby="ists"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-          <ui-icon-button disabled @click="${this._clickHandler}" @active="${this._activeHandler}" aria-labelledby="isd"
-            ><ui-icon>settings</ui-icon></ui-icon-button
-          >
-
-          <p class="label-large" id="isnt">No toggle</p>
-          <p class="label-large" id="istu">Toggle (unselected)</p>
-          <p class="label-large" id="ists">Toggle (selected)</p>
-          <p class="label-large" id="isd">Disabled</p>
+        <div class="md-select outlined">
+          <label for="shape">Shape</label>
+          <select id="shape" @change="${this.handleShapeChange}" name="shape" .value="${h}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="round">Round</option>
+            <option value="square">Square</option>
+          </select>
         </div>
-
-        <h3 class="title-small">MD icon button (reference)</h3>
-        <div class="demo-row icons-demo-row">
-          <md-icon-button><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button toggle><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button toggle selected><md-icon>settings</md-icon></md-icon-button>
-          <md-icon-button disabled><md-icon>settings</md-icon></md-icon-button>
-          <p class="label-large">No toggle</p>
-          <p class="label-large">Toggle (unselected)</p>
-          <p class="label-large">Toggle (selected)</p>
-          <p class="label-large">Disabled</p>
+        <div class="md-select outlined">
+          <label for="width">Width</label>
+          <select id="width" @change="${this.handleWidthChange}" name="width" .value="${w}">
+            <button>
+              <selectedcontent></selectedcontent>
+            </button>
+            <option value="default">Default</option>
+            <option value="narrow">Narrow</option>
+            <option value="wide">Wide</option>
+          </select>
         </div>
       </section>
     `

package/demo/md/index.html

@@ -19,8 +19,10 @@
     <nav>
       <h2>Elements</h2>
       <dl>
-        <dt><a href="buttons/index.html">button</a></dt>
+        <dt><a href="buttons/button.html">button</a></dt>
         <dd>A Material 3 button.</dd>
+        <dt><a href="buttons/group.html">button group</a></dt>
+        <dd>A Material 3 button group.</dd>
         <dt><a href="checkbox/index.html">checkbox</a></dt>
         <dd>A Material 3 checkbox.</dd>
         <dt><a href="chip/chip.html">chip</a></dt>

package/demo/md/inputs/input.ts

@@ -471,7 +471,7 @@ class ComponentDemoPage extends DemoPage {
 
         <section class="demo-section">
           <h2 class="title-large">Inputs in a form</h2>
-          <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>
           ${formValues
             ? html`
                 <output>

package/demo/md/inputs/radio.ts

@@ -137,7 +137,7 @@ class ComponentDemoPage extends DemoPage {
             </label>
           </div>
 
-          <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/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.12",
+  "version": "0.3.0",
   "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>`
   }