@api-client/ui 0.3.2 → 0.3.4

package/demo/md/tabs/tabs.ts

@@ -7,6 +7,10 @@ import { iconWrapper } from '../../../src/md/icons/Icons.js'
 import { reactive } from '../../../src/decorators/index.js'
 import { TabSelectionDetail } from '../../../src/md/tabs/internals/Tabs.js'
 
+import '@material/web/tabs/primary-tab.js'
+import '@material/web/tabs/secondary-tab.js'
+import '@material/web/tabs/tabs.js'
+
 const travelIcon = iconWrapper(
   svg`<path d="M8.5 22v-1.5l2-1.5v-5.5L2 16v-2l8.5-5V3.5q0-.625.438-1.062Q11.375 2 12 2t1.062.438q.438.437.438 1.062V9l8.5 5v2l-8.5-2.5V19l2 1.5V22L12 21Z"/>`
 )
@@ -31,14 +35,16 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor selected4 = 'cars4'
 
-  handleSelect(e: CustomEvent): void {
+  @reactive() accessor selected5 = 'travel5'
+
+  handleTabsChange(e: CustomEvent): void {
     const info = e.detail as TabSelectionDetail
     console.log(info)
     const property = (e.target as HTMLElement).dataset.property as 'selected1' | undefined
     if (!property) {
       return
     }
-    this[property] = info.select as string
+    this[property] = info.item.getAttribute('aria-controls') || ''
   }
 
   contentTemplate(): TemplateResult {
@@ -52,19 +58,22 @@ class ComponentDemoPage extends DemoPage {
     const { selected1 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Primary tabs</h2>
-        <ui-tabs .selected="${selected1}" data-property="selected1" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel1">Travel</ui-tab>
-          <ui-tab aria-controls="hotel1">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars1">Cars</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
-          <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
-          <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
-          <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
+        <h2 class="display-large">Primary tabs</h2>
+
+        <div class="frame">
+          <ui-tabs data-property="selected1" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel1">Travel</ui-tab>
+            <ui-tab aria-controls="hotel1">Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel1">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars1">Cars</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel1" ?hidden="${selected1 !== 'travel1'}">Travel page</p>
+            <p id="hotel1" ?hidden="${selected1 !== 'hotel1'}">Hotel page</p>
+            <p id="travelHotel1" ?hidden="${selected1 !== 'travelHotel1'}">Hotel & travel page</p>
+            <p id="cars1" ?hidden="${selected1 !== 'cars1'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
@@ -74,90 +83,131 @@ class ComponentDemoPage extends DemoPage {
     const { selected2 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Secondary tabs</h2>
-        <ui-tabs priority="secondary" .selected="${selected2}" data-property="selected2" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel2">Travel</ui-tab>
-          <ui-tab aria-controls="hotel2">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars2">Cars</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
-          <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
-          <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
-          <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
+        <h2 class="display-large">Secondary tabs</h2>
+
+        <div class="frame">
+          <ui-tabs priority="secondary" data-property="selected2" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel2">Travel</ui-tab>
+            <ui-tab aria-controls="hotel2" selected>Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel2">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars2">Cars</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel2" ?hidden="${selected2 !== 'travel2'}">Travel page</p>
+            <p id="hotel2" ?hidden="${selected2 !== 'hotel2'}">Hotel page</p>
+            <p id="travelHotel2" ?hidden="${selected2 !== 'travelHotel2'}">Hotel & travel page</p>
+            <p id="cars2" ?hidden="${selected2 !== 'cars2'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
   }
 
   renderIconTabs(): TemplateResult {
-    const { selected3 } = this
+    const { selected3, selected4 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Icon tabs</h2>
-        <ui-tabs .selected="${selected3}" data-property="selected3" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel3">
-            <ui-icon slot="icon">${travelIcon}</ui-icon>
-            Travel
-          </ui-tab>
-          <ui-tab aria-controls="hotel3">
-            <ui-icon slot="icon">${hotelIcon}</ui-icon>
-            Hotel
-          </ui-tab>
-          <ui-tab aria-controls="travelHotel3">
-            <ui-icon slot="icon">${cityIcon}</ui-icon>
-            Travel + Hotel
-          </ui-tab>
-          <ui-tab aria-controls="cars3">
-            <ui-icon slot="icon">${taxiIcon}</ui-icon>
-            Cars
-          </ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
-          <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
-          <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
-          <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
+        <h2 class="display-large">Primary icon tabs</h2>
+        <div class="frame">
+          <ui-tabs data-property="selected3" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel3">
+              <ui-icon slot="icon">${travelIcon}</ui-icon>
+              Travel
+            </ui-tab>
+            <ui-tab aria-controls="hotel3">
+              <ui-icon slot="icon">${hotelIcon}</ui-icon>
+              Hotel
+            </ui-tab>
+            <ui-tab aria-controls="travelHotel3" selected>
+              <ui-icon slot="icon">${cityIcon}</ui-icon>
+              Travel + Hotel
+            </ui-tab>
+            <ui-tab aria-controls="cars3">
+              <ui-icon slot="icon">${taxiIcon}</ui-icon>
+              Cars
+            </ui-tab>
+          </ui-tabs>
+          <div class="page">
+            <p id="travel3" ?hidden="${selected3 !== 'travel3'}">Travel page</p>
+            <p id="hotel3" ?hidden="${selected3 !== 'hotel3'}">Hotel page</p>
+            <p id="travelHotel3" ?hidden="${selected3 !== 'travelHotel3'}">Hotel & travel page</p>
+            <p id="cars3" ?hidden="${selected3 !== 'cars3'}">Cars page</p>
+          </div>
+        </div>
+      </section>
+      <section class="demo-section">
+        <h2 class="display-large">Secondary icon tabs</h2>
+
+        <div class="frame">
+          <ui-tabs priority="secondary" data-property="selected4" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel4">
+              <ui-icon slot="icon">${travelIcon}</ui-icon>
+              Travel
+            </ui-tab>
+            <ui-tab aria-controls="hotel4">
+              <ui-icon slot="icon">${hotelIcon}</ui-icon>
+              Hotel
+            </ui-tab>
+            <ui-tab aria-controls="travelHotel4">
+              <ui-icon slot="icon">${cityIcon}</ui-icon>
+              Travel + Hotel
+            </ui-tab>
+            <ui-tab aria-controls="cars4" selected>
+              <ui-icon slot="icon">${taxiIcon}</ui-icon>
+              Cars
+            </ui-tab>
+          </ui-tabs>
+          <div class="page">
+            <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
+            <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
+            <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
+            <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
+          </div>
         </div>
       </section>
     `
   }
 
   renderScrollableDemo(): TemplateResult {
-    const { selected4 } = this
+    const { selected5 } = this
     return html`
       <section class="demo-section">
-        <h2 class="title-large">Scrollable tabs</h2>
-        <ui-tabs .selected="${selected4}" scrollable data-property="selected4" @select="${this.handleSelect}">
-          <ui-tab aria-controls="travel4">Travel</ui-tab>
-          <ui-tab aria-controls="hotel4">Hotel</ui-tab>
-          <ui-tab aria-controls="travelHotel4">Travel + Hotel</ui-tab>
-          <ui-tab aria-controls="cars4">Cars</ui-tab>
-
-          <ui-tab aria-controls="travel41">Travel (1)</ui-tab>
-          <ui-tab aria-controls="hotel41">Hotel (1)</ui-tab>
-          <ui-tab aria-controls="travelHotel41">Travel + Hotel (1)</ui-tab>
-          <ui-tab aria-controls="cars41" disabled>Cars (1)</ui-tab>
-
-          <ui-tab aria-controls="travel42">Travel (2)</ui-tab>
-          <ui-tab aria-controls="hotel42">Hotel (2)</ui-tab>
-          <ui-tab aria-controls="travelHotel42">Travel + Hotel (2)</ui-tab>
-          <ui-tab aria-controls="cars42">Cars (2)</ui-tab>
-        </ui-tabs>
-
-        <div class="page">
-          <p id="travel4" ?hidden="${selected4 !== 'travel4'}">Travel page</p>
-          <p id="hotel4" ?hidden="${selected4 !== 'hotel4'}">Hotel page</p>
-          <p id="travelHotel4" ?hidden="${selected4 !== 'travelHotel4'}">Hotel & travel page</p>
-          <p id="cars4" ?hidden="${selected4 !== 'cars4'}">Cars page</p>
-
-          <p id="travel41" ?hidden="${selected4 !== 'travel41'}">Travel page (1)</p>
-          <p id="hotel41" ?hidden="${selected4 !== 'hotel41'}">Hotel page (1)</p>
-          <p id="travelHotel41" ?hidden="${selected4 !== 'travelHotel41'}">Hotel & travel page (1)</p>
-          <p id="cars41" ?hidden="${selected4 !== 'cars41'}">Cars page (1)</p>
+        <h2 class="display-large">Scrollable tabs</h2>
+        <div class="frame scrollable">
+          <ui-tabs data-property="selected5" @change="${this.handleTabsChange}">
+            <ui-tab aria-controls="travel5" selected>Travel</ui-tab>
+            <ui-tab aria-controls="hotel5">Hotel</ui-tab>
+            <ui-tab aria-controls="travelHotel5">Travel + Hotel</ui-tab>
+            <ui-tab aria-controls="cars5" disabled>Cars</ui-tab>
+
+            <ui-tab aria-controls="travel51">Travel (1)</ui-tab>
+            <ui-tab aria-controls="hotel51">Hotel (1)</ui-tab>
+            <ui-tab aria-controls="travelHotel51">Travel + Hotel (1)</ui-tab>
+            <ui-tab aria-controls="cars51" disabled>Cars (1)</ui-tab>
+
+            <ui-tab aria-controls="travel52">Travel (2)</ui-tab>
+            <ui-tab aria-controls="hotel52">Hotel (2)</ui-tab>
+            <ui-tab aria-controls="travelHotel52">Travel + Hotel (2)</ui-tab>
+            <ui-tab aria-controls="cars52" disabled>Cars (2)</ui-tab>
+          </ui-tabs>
+
+          <div class="page">
+            <p id="travel5" ?hidden="${selected5 !== 'travel5'}">Travel page</p>
+            <p id="hotel5" ?hidden="${selected5 !== 'hotel5'}">Hotel page</p>
+            <p id="travelHotel5" ?hidden="${selected5 !== 'travelHotel5'}">Hotel & travel page</p>
+            <p id="cars5" ?hidden="${selected5 !== 'cars5'}">Cars page</p>
+
+            <p id="travel51" ?hidden="${selected5 !== 'travel51'}">Travel page (1)</p>
+            <p id="hotel51" ?hidden="${selected5 !== 'hotel51'}">Hotel page (1)</p>
+            <p id="travelHotel51" ?hidden="${selected5 !== 'travelHotel51'}">Hotel & travel page (1)</p>
+            <p id="cars51" ?hidden="${selected5 !== 'cars51'}">Cars page (1)</p>
+
+            <p id="travel52" ?hidden="${selected5 !== 'travel52'}">Travel page (2)</p>
+            <p id="hotel52" ?hidden="${selected5 !== 'hotel52'}">Hotel page (2)</p>
+            <p id="travelHotel52" ?hidden="${selected5 !== 'travelHotel52'}">Hotel & travel page (2)</p>
+            <p id="cars52" ?hidden="${selected5 !== 'cars52'}">Cars page (2)</p>
+          </div>
         </div>
       </section>
     `

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/elements/environment/EnvironmentEditor.ts

@@ -220,8 +220,7 @@ export default class EnvironmentEditor extends ApiElement {
   }
 
   protected handleTabSelection(e: CustomEvent<TabSelectionDetail>): void {
-    const { item } = e.detail
-    const { page } = item.dataset
+    const { page } = e.detail.item.dataset
     if (!page) {
       return
     }
@@ -524,11 +523,14 @@ export default class EnvironmentEditor extends ApiElement {
   }
 
   protected renderTabs(): TemplateResult {
+    const { selected: s } = this
     return html`
-      <ui-tabs .selected="${this.selected}" @select="${this.handleTabSelection}">
-        <ui-tab aria-controls="server" data-page="server">Server</ui-tab>
-        <ui-tab aria-controls="variables" data-page="variables">Variables</ui-tab>
-        <ui-tab aria-controls="authorization" data-page="authorization">Authorization</ui-tab>
+      <ui-tabs @select="${this.handleTabSelection}">
+        <ui-tab .selected="${s === 'server'}" aria-controls="server" data-page="server">Server</ui-tab>
+        <ui-tab .selected="${s === 'variables'}" aria-controls="variables" data-page="variables">Variables</ui-tab>
+        <ui-tab .selected="${s === 'authorization'}" aria-controls="authorization" data-page="authorization"
+          >Authorization</ui-tab
+        >
       </ui-tabs>
     `
   }

package/src/elements/har/HarViewer.ts

@@ -456,12 +456,12 @@ export default class HarViewer extends ApiElement {
    * Handler for the list item selection event.
    */
   protected handleDetailsTabSelection(e: CustomEvent<TabSelectionDetail>): void {
-    const { select } = e.detail
+    const { selected } = e.detail.item.dataset
     const { entry } = (e.target as UiTabs).dataset
-    if (!select || !entry) {
+    if (!selected || !entry) {
       return
     }
-    this.selectedTabs.set(entry, select as HarTab)
+    this.selectedTabs.set(entry, selected as HarTab)
     this.requestUpdate()
   }
 
@@ -687,18 +687,16 @@ export default class HarViewer extends ApiElement {
     const hasResponseCookies = Array.isArray(responseCookies) && !!responseCookies.length
     const hasCookies = hasRequestCookies || hasResponseCookies
     return html`
-      <ui-tabs
-        priority="secondary"
-        selectedAttribute="data-selected"
-        .selected="${selected}"
-        @select="${this.handleDetailsTabSelection}"
-        data-entry="${id}"
-      >
-        <ui-tab data-selected="${HarTab.request}">Request</ui-tab>
-        <ui-tab data-selected="${HarTab.response}">Response</ui-tab>
-        <ui-tab data-selected="${HarTab.requestContent}" ?hidden="${!hashRequestContent}">Request content</ui-tab>
-        <ui-tab data-selected="${HarTab.responseContent}" ?hidden="${!hashResponseContent}">Response content</ui-tab>
-        <ui-tab data-selected="${HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
+      <ui-tabs priority="secondary" @change="${this.handleDetailsTabSelection}" data-entry="${id}">
+        <ui-tab .selected="${selected === HarTab.request}" data-selected="${HarTab.request}">Request</ui-tab>
+        <ui-tab .selected="${selected === HarTab.response}" data-selected="${HarTab.response}">Response</ui-tab>
+        <ui-tab .selected="${selected === HarTab.requestContent}" ?hidden="${!hashRequestContent}"
+          >Request content</ui-tab
+        >
+        <ui-tab .selected="${selected === HarTab.responseContent}" ?hidden="${!hashResponseContent}"
+          >Response content</ui-tab
+        >
+        <ui-tab .selected="${selected === HarTab.cookies}" ?hidden="${!hasCookies}">Cookies</ui-tab>
       </ui-tabs>
     `
   }

package/src/elements/http/RequestEditor.ts

@@ -481,9 +481,8 @@ export default class RequestEditor extends ApiElement {
     this.computeSnippetsRequest()
   }
 
-  protected handleTabSelect(e: CustomEvent): void {
-    const info = e.detail as TabSelectionDetail
-    this.selectedTab = info.select as SelectedTab
+  protected handleTabSelect(e: CustomEvent<TabSelectionDetail>): void {
+    this.selectedTab = e.detail.item.getAttribute('aria-controls') as SelectedTab
     if (this.ui) {
       this.ui.selectedEditor = this.selectedTab
       this.notifyPropertyChanged('ui', this.ui)
@@ -828,16 +827,22 @@ export default class RequestEditor extends ApiElement {
   protected renderTabs(): TemplateResult {
     const { isPayload, selectedTab } = this
     //  ui && ui.selectedEditor ||
-    const selected = selectedTab
-    return html` <ui-tabs .selected="${selected}" @select="${this.handleTabSelect}" class="editor-tabs">
-      <ui-tab aria-controls="parameters" id="parameters-tab">Parameters</ui-tab>
-      <ui-tab aria-controls="headers" id="headers-tab">Headers</ui-tab>
-      <ui-tab ?hidden="${!isPayload}" aria-controls="payload" id="payload-tab">Body</ui-tab>
-      <ui-tab aria-controls="authorization" id="authorization-tab">Authorization</ui-tab>
-      <ui-tab aria-controls="flows" id="flows-tab">Flows</ui-tab>
-      <ui-tab aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
-      <ui-tab aria-controls="config" id="config-tab">Config</ui-tab>
-      <ui-tab aria-controls="code-snippets" id="code-snippets-tab">Code snippets</ui-tab>
+    const s = selectedTab
+    return html` <ui-tabs @select="${this.handleTabSelect}" class="editor-tabs">
+      <ui-tab .selected="${s === 'parameters'}" aria-controls="parameters" id="parameters-tab">Parameters</ui-tab>
+      <ui-tab .selected="${s === 'headers'}" aria-controls="headers" id="headers-tab">Headers</ui-tab>
+      <ui-tab ?hidden="${!isPayload}" .selected="${s === 'payload'}" aria-controls="payload" id="payload-tab"
+        >Body</ui-tab
+      >
+      <ui-tab .selected="${s === 'authorization'}" aria-controls="authorization" id="authorization-tab"
+        >Authorization</ui-tab
+      >
+      <ui-tab .selected="${s === 'flows'}" aria-controls="flows" id="flows-tab">Flows</ui-tab>
+      <ui-tab .selected="${s === 'assertions'}" aria-controls="assertions" id="assertions-tab">Assertions</ui-tab>
+      <ui-tab .selected="${s === 'config'}" aria-controls="config" id="config-tab">Config</ui-tab>
+      <ui-tab .selected="${s === 'code-snippets'}" aria-controls="code-snippets" id="code-snippets-tab"
+        >Code snippets</ui-tab
+      >
     </ui-tabs>`
   }
 

package/src/elements/http/RequestLog.ts

@@ -162,7 +162,7 @@ export default class RequestLog extends ApiElement {
   }
 
   protected handleViewSelect(e: CustomEvent<TabSelectionDetail>): void {
-    const key = e.detail.select as RequestLogView | undefined
+    const key = e.detail.item.getAttribute('aria-controls') as RequestLogView | undefined
     if (!key) {
       return
     }
@@ -175,12 +175,19 @@ export default class RequestLog extends ApiElement {
   }
 
   protected renderTabs(effectiveLog?: CoreRequestLog): TemplateResult {
-    const { view: selected = 'headers' } = this
+    const { view: s = 'headers' } = this
     return html`
-      <ui-tabs .selected="${selected}" @select="${this.handleViewSelect}">
-        <ui-tab aria-controls="headers" id="headers-tab" title="Request and response header">Headers</ui-tab>
+      <ui-tabs @select="${this.handleViewSelect}">
+        <ui-tab
+          .selected="${s === 'headers'}"
+          aria-controls="headers"
+          id="headers-tab"
+          title="Request and response header"
+          >Headers</ui-tab
+        >
         <ui-tab
           ?hidden="${!this.hasRequestPayload}"
+          .selected="${s === 'payload'}"
           aria-controls="payload"
           id="payload-tab"
           title="Request payload set to server"
@@ -188,15 +195,34 @@ export default class RequestLog extends ApiElement {
         >
         <ui-tab
           ?hidden="${!this.hasResponsePayload}"
+          .selected="${s === 'preview'}"
           aria-controls="preview"
           id="preview-tab"
           title="Formatted view of the response"
           >Preview</ui-tab
         >
-        <ui-tab aria-controls="response" id="response-tab" title="Unformatted view of the response">Response</ui-tab>
-        <ui-tab aria-controls="timings" id="timings-tab" title="Request detailed timings">Timings</ui-tab>
-        <ui-tab aria-controls="redirects" id="redirects-tab" title="Detailed redirect information">Redirects</ui-tab>
-        <ui-tab aria-controls="assertions" id="assertions-tab" title="HTTP assertions result"
+        <ui-tab
+          .selected="${s === 'response'}"
+          aria-controls="response"
+          id="response-tab"
+          title="Unformatted view of the response"
+          >Response</ui-tab
+        >
+        <ui-tab .selected="${s === 'timings'}" aria-controls="timings" id="timings-tab" title="Request detailed timings"
+          >Timings</ui-tab
+        >
+        <ui-tab
+          .selected="${s === 'redirects'}"
+          aria-controls="redirects"
+          id="redirects-tab"
+          title="Detailed redirect information"
+          >Redirects</ui-tab
+        >
+        <ui-tab
+          .selected="${s === 'assertions'}"
+          aria-controls="assertions"
+          id="assertions-tab"
+          title="HTTP assertions result"
           >Assertions ${this.renderAssertionsBadge(effectiveLog)}</ui-tab
         >
       </ui-tabs>

package/src/md/button/internals/base.ts

@@ -262,16 +262,12 @@ export default class BaseButton extends UiElement {
 
   override handlePointerEnter(e: PointerEvent): void {
     super.handlePointerEnter(e)
-    if (this.ripple) {
-      this.ripple.beginHover(e)
-    }
+    this.ripple?.beginHover(e)
   }
 
   override handlePointerLeave(e: PointerEvent): void {
     super.handlePointerLeave(e)
-    if (this.ripple) {
-      this.ripple.endHover()
-    }
+    this.ripple?.endHover()
   }
 
   protected override render(): TemplateResult {

package/src/md/button/internals/button.styles.ts

@@ -83,6 +83,10 @@ export default css`
     transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
+  .ripple.activated {
+    z-index: 1;
+  }
+
   .focus-ring {
     --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));
     --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));
@@ -91,10 +95,6 @@ export default css`
     transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
-  .ripple.activated {
-    z-index: 1;
-  }
-
   /* Disabled state */
   :host([disabled]) {
     background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);