@api-client/ui 0.2.9 → 0.2.11

package/build/src/md/ripple/internals/ripple.d.ts

@@ -26,7 +26,7 @@ export default class UiRipple extends LitElement {
     protected rippleSize: string;
     protected rippleScale: string;
     protected initialSize: number;
-    protected pressAnimationSignal: import("../../motion/animation.js").AnimationSignal;
+    private rippleStartEvent?;
     protected growAnimation: Animation | null;
     protected delayedEndPressHandle: number | null;
     protected render(): TemplateResult;
@@ -41,6 +41,7 @@ export default class UiRipple extends LitElement {
         endPoint: IPoint;
     };
     protected startPressAnimation(positionEvent?: Event | null): void;
+    private endPressAnimation;
     beginHover(hoverEvent?: Event): void;
     endHover(): void;
     beginFocus(): void;

package/build/src/md/ripple/internals/ripple.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAA;AAYjE,UAAU,MAAM;IACd,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,EAAG,WAAW,CAAA;IAEhD;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,SAAS,CAAC,UAAU,SAAK;IAEzB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAI;IAEzB,SAAS,CAAC,oBAAoB,sDAA0B;IAExD,SAAS,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEhD,SAAS,CAAC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAO;cAElC,MAAM,IAAI,cAAc;IAI3C,mBAAmB;IACnB,SAAS,CAAC,sBAAsB,IAAI,SAAS;cAS1B,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASnE,SAAS,CAAC,aAAa,IAAI,OAAO;IAIlC,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAqBrC,SAAS,CAAC,+BAA+B,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM;IAS7E,SAAS,CAAC,yBAAyB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IA2B3G,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IA0CjE,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;IAMpC,QAAQ,IAAI,IAAI;IAIhB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAIhB,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAS9C,QAAQ,IAAI,IAAI;CAWjB"}
+{"version":3,"file":"ripple.d.ts","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAEtE,OAAO,EAAE,SAAS,EAAY,MAAM,6BAA6B,CAAA;AAYjE,UAAU,MAAM;IACd,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;CACV;AAED,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;IAC3B,QAAQ,CAAC,MAAM,EAAG,WAAW,CAAA;IAEhD;;OAEG;IAC0B,QAAQ,CAAC,SAAS,UAAQ;IAEvD;;OAEG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAElC,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAQ;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,SAAS,CAAC,UAAU,SAAK;IAEzB,SAAS,CAAC,WAAW,SAAK;IAE1B,SAAS,CAAC,WAAW,SAAI;IAEzB,OAAO,CAAC,gBAAgB,CAAC,CAAc;IAIvC,SAAS,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAEhD,SAAS,CAAC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAO;cAElC,MAAM,IAAI,cAAc;IAI3C,mBAAmB;IACnB,SAAS,CAAC,sBAAsB,IAAI,SAAS;cAS1B,MAAM,CAAC,YAAY,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IASnE,SAAS,CAAC,aAAa,IAAI,OAAO;IAIlC,SAAS,CAAC,mBAAmB,IAAI,IAAI;IAqBrC,SAAS,CAAC,+BAA+B,CAAC,YAAY,EAAE,YAAY,GAAG,MAAM;IAS7E,SAAS,CAAC,yBAAyB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IA2B3G,SAAS,CAAC,mBAAmB,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;YA2CnD,iBAAiB;IA6B/B,UAAU,CAAC,UAAU,CAAC,EAAE,KAAK,GAAG,IAAI;IAMpC,QAAQ,IAAI,IAAI;IAIhB,UAAU,IAAI,IAAI;IAIlB,QAAQ,IAAI,IAAI;IAIhB,UAAU,CAAC,aAAa,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI;IAU9C,QAAQ,IAAI,IAAI;CAYjB"}

package/build/src/md/ripple/internals/ripple.js

@@ -7,9 +7,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { createAnimationSignal, Easing } from '../../motion/animation.js';
+import { Easing } from '../../motion/animation.js';
 const PRESS_GROW_MS = 450;
-const MINIMUM_PRESS_MS = 225;
+const MINIMUM_PRESS_MS = 80;
 const INITIAL_ORIGIN_SCALE = 0.2;
 const PADDING = 10;
 const SOFT_EDGE_MINIMUM_SIZE = 75;
@@ -87,7 +87,8 @@ let UiRipple = (() => {
         rippleSize = (__runInitializers(this, _pressed_extraInitializers), '');
         rippleScale = '';
         initialSize = 0;
-        pressAnimationSignal = createAnimationSignal();
+        rippleStartEvent;
+        // protected pressAnimationSignal = createAnimationSignal()
         growAnimation = null;
         delayedEndPressHandle = null;
         render() {
@@ -166,11 +167,13 @@ let UiRipple = (() => {
             if (!mdRoot) {
                 return;
             }
+            this.pressed = true;
+            this.growAnimation?.cancel();
             this.determineRippleSize();
             const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent);
             const translateStart = `${startPoint.x}px, ${startPoint.y}px`;
             const translateEnd = `${endPoint.x}px, ${endPoint.y}px`;
-            const signal = this.pressAnimationSignal.start();
+            // const signal = this.pressAnimationSignal.start()
             const growAnimation = mdRoot.animate({
                 top: [0, 0],
                 left: [0, 0],
@@ -183,16 +186,41 @@ let UiRipple = (() => {
                 easing: Easing.STANDARD,
                 fill: ANIMATION_FILL,
             });
-            growAnimation.addEventListener('finish', () => {
-                this.pressAnimationSignal.finish();
-                this.growAnimation = null;
-            });
-            signal.addEventListener('abort', () => {
-                growAnimation.cancel();
-                this.growAnimation = null;
-            });
+            // growAnimation.addEventListener('finish', () => {
+            //   this.pressAnimationSignal.finish()
+            //   this.growAnimation = null
+            // })
+            // signal.addEventListener('abort', () => {
+            //   growAnimation.cancel()
+            //   this.growAnimation = null
+            // })
             this.growAnimation = growAnimation;
         }
+        async endPressAnimation() {
+            this.rippleStartEvent = undefined;
+            // this.state = State.INACTIVE
+            const animation = this.growAnimation;
+            let pressAnimationPlayState = Infinity;
+            if (typeof animation?.currentTime === 'number') {
+                pressAnimationPlayState = animation.currentTime;
+            }
+            else if (animation?.currentTime) {
+                pressAnimationPlayState = animation.currentTime.to('ms').value;
+            }
+            if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {
+                this.pressed = false;
+                return;
+            }
+            await new Promise((resolve) => {
+                setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
+            });
+            if (this.growAnimation !== animation) {
+                // A new press animation was started. The old animation was canceled and
+                // should not finish the pressed state.
+                return;
+            }
+            this.pressed = false;
+        }
         beginHover(hoverEvent) {
             if (hoverEvent?.pointerType !== 'touch') {
                 this.hovered = true;
@@ -209,6 +237,7 @@ let UiRipple = (() => {
         }
         beginPress(positionEvent) {
             this.pressed = true;
+            this.rippleStartEvent = positionEvent;
             if (this.delayedEndPressHandle !== null) {
                 clearTimeout(this.delayedEndPressHandle);
                 this.delayedEndPressHandle = null;
@@ -226,6 +255,7 @@ let UiRipple = (() => {
                     this.delayedEndPressHandle = null;
                 }, MINIMUM_PRESS_MS - pressAnimationPlayState);
             }
+            this.endPressAnimation();
         }
     };
 })();

package/build/src/md/ripple/internals/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { createAnimationSignal, Easing } from '../../motion/animation.js'\n\nconst PRESS_GROW_MS = 450\nconst MINIMUM_PRESS_MS = 225\nconst INITIAL_ORIGIN_SCALE = 0.2\nconst PADDING = 10\nconst SOFT_EDGE_MINIMUM_SIZE = 75\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35\nconst PRESS_PSEUDO = '::after'\nconst ANIMATION_FILL = 'forwards'\n\ninterface IPoint {\n  x: number\n  y: number\n}\n\nexport default class UiRipple extends LitElement {\n  @query('.surface') accessor mdRoot!: HTMLElement\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor unbounded = false\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  @state() protected accessor hovered = false\n\n  @state() protected accessor focused = false\n\n  @state() protected accessor pressed = false\n\n  get isPressed(): boolean {\n    return this.pressed\n  }\n\n  protected rippleSize = ''\n\n  protected rippleScale = ''\n\n  protected initialSize = 0\n\n  protected pressAnimationSignal = createAnimationSignal()\n\n  protected growAnimation: Animation | null = null\n\n  protected delayedEndPressHandle: number | null = null\n\n  protected override render(): TemplateResult {\n    return html`<div class=\"surface ${classMap(this.getRenderRippleClasses())}\"></div>`\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      hovered: this.hovered,\n      focused: this.focused,\n      pressed: this.pressed,\n      unbounded: this.unbounded,\n    }\n  }\n\n  protected override update(changedProps: PropertyValues<this>): void {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover()\n      this.endFocus()\n      this.endPress()\n    }\n    super.update(changedProps)\n  }\n\n  protected getDimensions(): DOMRect {\n    return (this.parentElement ?? this).getBoundingClientRect()\n  }\n\n  protected determineRippleSize(): void {\n    const { height, width } = this.getDimensions()\n    const maxDim = Math.max(height, width)\n    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)\n\n    let maxRadius = maxDim\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)\n    maxRadius = hypotenuse + PADDING\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize -= initialSize % 2\n    }\n\n    this.initialSize = initialSize\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`\n    this.rippleSize = `${this.initialSize}px`\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): IPoint {\n    const { scrollX, scrollY } = window\n    const { left, top } = this.getDimensions()\n    const documentX = scrollX + left\n    const documentY = scrollY + top\n    const { pageX, pageY } = pointerEvent\n    return { x: pageX - documentX, y: pageY - documentY }\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event | null): { startPoint: IPoint; endPoint: IPoint } {\n    const { height, width } = this.getDimensions()\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    }\n\n    let startPoint\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent)\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      }\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    }\n\n    return { startPoint, endPoint }\n  }\n\n  protected startPressAnimation(positionEvent?: Event | null): void {\n    const { mdRoot } = this\n    if (!mdRoot) {\n      return\n    }\n\n    this.determineRippleSize()\n    const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent)\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`\n\n    const signal = this.pressAnimationSignal.start()\n\n    const growAnimation = mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [`translate(${translateStart}) scale(1)`, `translate(${translateEnd}) scale(${this.rippleScale})`],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: Easing.STANDARD,\n        fill: ANIMATION_FILL,\n      }\n    )\n\n    growAnimation.addEventListener('finish', () => {\n      this.pressAnimationSignal.finish()\n      this.growAnimation = null\n    })\n\n    signal.addEventListener('abort', () => {\n      growAnimation.cancel()\n      this.growAnimation = null\n    })\n\n    this.growAnimation = growAnimation\n  }\n\n  beginHover(hoverEvent?: Event): void {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true\n    }\n  }\n\n  endHover(): void {\n    this.hovered = false\n  }\n\n  beginFocus(): void {\n    this.focused = true\n  }\n\n  endFocus(): void {\n    this.focused = false\n  }\n\n  beginPress(positionEvent?: Event | null): void {\n    this.pressed = true\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle)\n      this.delayedEndPressHandle = null\n    }\n    this.startPressAnimation(positionEvent)\n  }\n\n  endPress(): void {\n    const pressAnimationPlayState = (this.growAnimation?.currentTime ?? Infinity) as number\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false\n        this.delayedEndPressHandle = null\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number\n    }\n  }\n}\n"]}
+{"version":3,"file":"ripple.js","sourceRoot":"","sources":["../../../../../src/md/ripple/internals/ripple.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2022 Google LLC\n * SPDX-License-Identifier: Apache-2.0\n */\n\nimport { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { Easing } from '../../motion/animation.js'\n\nconst PRESS_GROW_MS = 450\nconst MINIMUM_PRESS_MS = 80\nconst INITIAL_ORIGIN_SCALE = 0.2\nconst PADDING = 10\nconst SOFT_EDGE_MINIMUM_SIZE = 75\nconst SOFT_EDGE_CONTAINER_RATIO = 0.35\nconst PRESS_PSEUDO = '::after'\nconst ANIMATION_FILL = 'forwards'\n\ninterface IPoint {\n  x: number\n  y: number\n}\n\nexport default class UiRipple extends LitElement {\n  @query('.surface') accessor mdRoot!: HTMLElement\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor unbounded = false\n\n  /**\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  @state() protected accessor hovered = false\n\n  @state() protected accessor focused = false\n\n  @state() protected accessor pressed = false\n\n  get isPressed(): boolean {\n    return this.pressed\n  }\n\n  protected rippleSize = ''\n\n  protected rippleScale = ''\n\n  protected initialSize = 0\n\n  private rippleStartEvent?: Event | null\n\n  // protected pressAnimationSignal = createAnimationSignal()\n\n  protected growAnimation: Animation | null = null\n\n  protected delayedEndPressHandle: number | null = null\n\n  protected override render(): TemplateResult {\n    return html`<div class=\"surface ${classMap(this.getRenderRippleClasses())}\"></div>`\n  }\n\n  /** @soyTemplate */\n  protected getRenderRippleClasses(): ClassInfo {\n    return {\n      hovered: this.hovered,\n      focused: this.focused,\n      pressed: this.pressed,\n      unbounded: this.unbounded,\n    }\n  }\n\n  protected override update(changedProps: PropertyValues<this>): void {\n    if (changedProps.has('disabled') && this.disabled) {\n      this.endHover()\n      this.endFocus()\n      this.endPress()\n    }\n    super.update(changedProps)\n  }\n\n  protected getDimensions(): DOMRect {\n    return (this.parentElement ?? this).getBoundingClientRect()\n  }\n\n  protected determineRippleSize(): void {\n    const { height, width } = this.getDimensions()\n    const maxDim = Math.max(height, width)\n    const softEdgeSize = Math.max(SOFT_EDGE_CONTAINER_RATIO * maxDim, SOFT_EDGE_MINIMUM_SIZE)\n\n    let maxRadius = maxDim\n    let initialSize = Math.floor(maxDim * INITIAL_ORIGIN_SCALE)\n\n    const hypotenuse = Math.sqrt(width ** 2 + height ** 2)\n    maxRadius = hypotenuse + PADDING\n\n    // ensure `initialSize` is even for unbounded\n    if (this.unbounded) {\n      initialSize -= initialSize % 2\n    }\n\n    this.initialSize = initialSize\n    this.rippleScale = `${(maxRadius + softEdgeSize) / initialSize}`\n    this.rippleSize = `${this.initialSize}px`\n  }\n\n  protected getNormalizedPointerEventCoords(pointerEvent: PointerEvent): IPoint {\n    const { scrollX, scrollY } = window\n    const { left, top } = this.getDimensions()\n    const documentX = scrollX + left\n    const documentY = scrollY + top\n    const { pageX, pageY } = pointerEvent\n    return { x: pageX - documentX, y: pageY - documentY }\n  }\n\n  protected getTranslationCoordinates(positionEvent?: Event | null): { startPoint: IPoint; endPoint: IPoint } {\n    const { height, width } = this.getDimensions()\n    // end in the center\n    const endPoint = {\n      x: (width - this.initialSize) / 2,\n      y: (height - this.initialSize) / 2,\n    }\n\n    let startPoint\n    if (positionEvent instanceof PointerEvent) {\n      startPoint = this.getNormalizedPointerEventCoords(positionEvent)\n    } else {\n      startPoint = {\n        x: width / 2,\n        y: height / 2,\n      }\n    }\n\n    // center around start point\n    startPoint = {\n      x: startPoint.x - this.initialSize / 2,\n      y: startPoint.y - this.initialSize / 2,\n    }\n\n    return { startPoint, endPoint }\n  }\n\n  protected startPressAnimation(positionEvent?: Event | null): void {\n    const { mdRoot } = this\n    if (!mdRoot) {\n      return\n    }\n    this.pressed = true\n    this.growAnimation?.cancel()\n    this.determineRippleSize()\n    const { startPoint, endPoint } = this.getTranslationCoordinates(positionEvent)\n    const translateStart = `${startPoint.x}px, ${startPoint.y}px`\n    const translateEnd = `${endPoint.x}px, ${endPoint.y}px`\n\n    // const signal = this.pressAnimationSignal.start()\n\n    const growAnimation = mdRoot.animate(\n      {\n        top: [0, 0],\n        left: [0, 0],\n        height: [this.rippleSize, this.rippleSize],\n        width: [this.rippleSize, this.rippleSize],\n        transform: [`translate(${translateStart}) scale(1)`, `translate(${translateEnd}) scale(${this.rippleScale})`],\n      },\n      {\n        pseudoElement: PRESS_PSEUDO,\n        duration: PRESS_GROW_MS,\n        easing: Easing.STANDARD,\n        fill: ANIMATION_FILL,\n      }\n    )\n\n    // growAnimation.addEventListener('finish', () => {\n    //   this.pressAnimationSignal.finish()\n    //   this.growAnimation = null\n    // })\n\n    // signal.addEventListener('abort', () => {\n    //   growAnimation.cancel()\n    //   this.growAnimation = null\n    // })\n\n    this.growAnimation = growAnimation\n  }\n\n  private async endPressAnimation() {\n    this.rippleStartEvent = undefined\n    // this.state = State.INACTIVE\n    const animation = this.growAnimation\n    let pressAnimationPlayState = Infinity\n    if (typeof animation?.currentTime === 'number') {\n      pressAnimationPlayState = animation.currentTime\n    } else if (animation?.currentTime) {\n      pressAnimationPlayState = animation.currentTime.to('ms').value\n    }\n\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false\n      return\n    }\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState)\n    })\n\n    if (this.growAnimation !== animation) {\n      // A new press animation was started. The old animation was canceled and\n      // should not finish the pressed state.\n      return\n    }\n\n    this.pressed = false\n  }\n\n  beginHover(hoverEvent?: Event): void {\n    if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {\n      this.hovered = true\n    }\n  }\n\n  endHover(): void {\n    this.hovered = false\n  }\n\n  beginFocus(): void {\n    this.focused = true\n  }\n\n  endFocus(): void {\n    this.focused = false\n  }\n\n  beginPress(positionEvent?: Event | null): void {\n    this.pressed = true\n    this.rippleStartEvent = positionEvent\n    if (this.delayedEndPressHandle !== null) {\n      clearTimeout(this.delayedEndPressHandle)\n      this.delayedEndPressHandle = null\n    }\n    this.startPressAnimation(positionEvent)\n  }\n\n  endPress(): void {\n    const pressAnimationPlayState = (this.growAnimation?.currentTime ?? Infinity) as number\n    if (pressAnimationPlayState >= MINIMUM_PRESS_MS) {\n      this.pressed = false\n    } else {\n      this.delayedEndPressHandle = setTimeout(() => {\n        this.pressed = false\n        this.delayedEndPressHandle = null\n      }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number\n    }\n    this.endPressAnimation()\n  }\n}\n"]}

package/build/src/md/segmented-button/internals/SegmentedButton.d.ts

@@ -26,7 +26,7 @@ export default class SegmentedButton extends UiElement {
     connectedCallback(): void;
     beginPress(options: BeginPressConfig): void;
     endPress(options: EndPressConfig): void;
-    protected handlePointerEnter(e: PointerEvent): void;
+    handlePointerEnter(e: PointerEvent): void;
     handlePointerLeave(e: PointerEvent): void;
     protected handleIconSlotChange(): void;
     protected render(): TemplateResult;

package/build/src/md/segmented-button/internals/SegmentedButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/segmented-button/internals/SegmentedButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,2BAA2B,CAAA;AAElC;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,SAAS;IAChC,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IAC0B,QAAQ,CAAC,QAAQ,UAAQ;IAEE,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAG,WAAW,EAAE,CAAA;IAEvG,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;;IAgBQ,iBAAiB,IAAI,IAAI;IAUzB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAShD,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAI1C,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAKlD,SAAS,CAAC,oBAAoB,IAAI,IAAI;cAInB,MAAM,IAAI,cAAc;IAmB3C,SAAS,CAAC,cAAc,IAAI,cAAc;IAS1C,SAAS,CAAC,iBAAiB,IAAI,cAAc;IAY7C,SAAS,CAAC,aAAa,IAAI,cAAc;IAQzC,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}
+{"version":3,"file":"SegmentedButton.d.ts","sourceRoot":"","sources":["../../../../../src/md/segmented-button/internals/SegmentedButton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAG1C,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAC3F,OAAO,QAAQ,MAAM,kCAAkC,CAAA;AAIvD,OAAO,2BAA2B,CAAA;AAElC;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,SAAS;IAChC,QAAQ,CAAC,MAAM,EAAG,QAAQ,CAAA;IAE9C;;;OAGG;IAC0B,QAAQ,CAAC,QAAQ,UAAQ;IAEE,SAAS,CAAC,QAAQ,CAAC,YAAY,EAAG,WAAW,EAAE,CAAA;IAEvG,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;;OAGG;IACH,IACI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAI1B;;IAgBQ,iBAAiB,IAAI,IAAI;IAUzB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IASvC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAIzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAKlD,SAAS,CAAC,oBAAoB,IAAI,IAAI;cAInB,MAAM,IAAI,cAAc;IAmB3C,SAAS,CAAC,cAAc,IAAI,cAAc;IAS1C,SAAS,CAAC,iBAAiB,IAAI,cAAc;IAY7C,SAAS,CAAC,aAAa,IAAI,cAAc;IAQzC,SAAS,CAAC,YAAY,QAAO,cAAc,CAG1C;CACF"}

package/build/src/md/segmented-button/internals/SegmentedButton.js

@@ -60,7 +60,6 @@ let SegmentedButton = (() => {
         }
         constructor() {
             super();
-            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.actionController.cancelKeyboardEvents = true;
             this.addEventListener('keydown', this.handleKeyDown.bind(this));
             this.addEventListener('keyup', this.handleKeyUp.bind(this));
@@ -68,6 +67,7 @@ let SegmentedButton = (() => {
             this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
             this.addEventListener('pointerup', this.handlePointerUp.bind(this));
             this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
             this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
             this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
         }

package/build/src/md/segmented-button/internals/SegmentedButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../../../../../src/md/segmented-button/internals/SegmentedButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { check } from '../../icons/Icons.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport '../../ripple/ui-ripple.js'\n\n/**\n * @fires trigger - When a button is triggered.\n * @slot - Default slot for the label\n * @slot icon - A slot to render an icon.\n */\nexport default class SegmentedButton extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the button is selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor selected = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor leadingIcons!: HTMLElement[]\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    super.endPress(options)\n    this.ripple.endPress()\n\n    if (!options.cancelled) {\n      this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }))\n    }\n  }\n\n  protected handlePointerEnter(e: PointerEvent): void {\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    this.ripple.endHover()\n  }\n\n  protected handleIconSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, selected = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n      selected,\n    })\n\n    return html`\n      <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n        ${this.renderRipple()}\n        <div class=\"content\">\n          ${this.leadingContent()}\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  protected leadingContent(): TemplateResult {\n    const { leadingIcons } = this\n    const classes: ClassInfo = {\n      leading: true,\n      visible: !!this.selected || !!leadingIcons.length,\n    }\n    return html` <div class=\"${classMap(classes)}\">${this.renderLeadingIcon()} ${this.renderChecked()}</div> `\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    const { leadingIcons } = this\n    const classes: ClassInfo = {\n      'leading-icon': true,\n      'with-icon': !!leadingIcons.length,\n      'hidden': !!this.selected,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\"><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot></div>\n    `\n  }\n\n  protected renderChecked(): TemplateResult {\n    const iconClasses = classMap({\n      'check-mark': true,\n      'checked': !!this.selected,\n    })\n    return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n}\n"]}
+{"version":3,"file":"SegmentedButton.js","sourceRoot":"","sources":["../../../../../src/md/segmented-button/internals/SegmentedButton.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { property, query, queryAssignedElements } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport { UiElement } from '../../UiElement.js'\nimport { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport UiRipple from '../../ripple/internals/ripple.js'\nimport { ripple } from '../../effects/rippleDirective.js'\nimport { check } from '../../icons/Icons.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport '../../ripple/ui-ripple.js'\n\n/**\n * @fires trigger - When a button is triggered.\n * @slot - Default slot for the label\n * @slot icon - A slot to render an icon.\n */\nexport default class SegmentedButton extends UiElement {\n  @query('ui-ripple') accessor ripple!: UiRipple\n\n  /**\n   * Whether the button is selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor selected = false\n\n  @queryAssignedElements({ flatten: true, slot: 'icon' }) protected accessor leadingIcons!: HTMLElement[]\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is a disabled state.\n   * @attribute\n   */\n  @property({ reflect: true, type: Boolean })\n  set disabled(value: boolean) {\n    const old = isDisabled(this)\n    setDisabled(this, value)\n    this.requestUpdate('disabled', old)\n  }\n\n  constructor() {\n    super()\n    this.actionController.cancelKeyboardEvents = true\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('pointerdown', this.handlePointerDown.bind(this))\n    this.addEventListener('pointerup', this.handlePointerUp.bind(this))\n    this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'button')\n    }\n    if (!this.hasAttribute('tabindex') && !this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.ripple.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    super.endPress(options)\n    this.ripple.endPress()\n\n    if (!options.cancelled) {\n      this.dispatchEvent(new Event('trigger', { bubbles: true, composed: true }))\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    this.ripple.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    this.ripple.endHover()\n  }\n\n  protected handleIconSlotChange(): void {\n    this.requestUpdate()\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false, selected = false } = this\n    const surfaceClasses = classMap({\n      surface: true,\n      pressed,\n      selected,\n    })\n\n    return html`\n      <div class=\"${surfaceClasses}\" ${ripple(() => this.ripple)}>\n        ${this.renderRipple()}\n        <div class=\"content\">\n          ${this.leadingContent()}\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  protected leadingContent(): TemplateResult {\n    const { leadingIcons } = this\n    const classes: ClassInfo = {\n      leading: true,\n      visible: !!this.selected || !!leadingIcons.length,\n    }\n    return html` <div class=\"${classMap(classes)}\">${this.renderLeadingIcon()} ${this.renderChecked()}</div> `\n  }\n\n  protected renderLeadingIcon(): TemplateResult {\n    const { leadingIcons } = this\n    const classes: ClassInfo = {\n      'leading-icon': true,\n      'with-icon': !!leadingIcons.length,\n      'hidden': !!this.selected,\n    }\n    return html`\n      <div class=\"${classMap(classes)}\"><slot name=\"icon\" @slotchange=\"${this.handleIconSlotChange}\"></slot></div>\n    `\n  }\n\n  protected renderChecked(): TemplateResult {\n    const iconClasses = classMap({\n      'check-mark': true,\n      'checked': !!this.selected,\n    })\n    return html`<span class=\"${iconClasses}\" role=\"presentation\">${check}</span>`\n  }\n\n  protected renderRipple = (): TemplateResult => {\n    const { disabled } = this\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${disabled}\"></ui-ripple>`\n  }\n}\n"]}

package/demo/md/buttons/{button.html → index.html}

@@ -18,6 +18,6 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="/.tmp/demo/md/buttons/button.js"></script>
+  <script type="module" src="/.tmp/demo/md/buttons/index.js"></script>
 </body>
 </html>

package/demo/md/{inputs/checkbox.html → checkbox/index.html}

@@ -34,6 +34,6 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="/.tmp/demo/md/inputs/checkbox.js"></script>
+  <script type="module" src="/.tmp/demo/md/checkbox/index.js"></script>
 </body>
 </html>

package/demo/md/{list/dropdown-list.html → dropdown-list/index.html}

@@ -26,6 +26,6 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="/.tmp/demo/md/list/dropdown-list.js"></script>
+  <script type="module" src="/.tmp/demo/md/dropdown-list/index.js"></script>
 </body>
 </html>

package/demo/md/{buttons/icon-button.html → icon-button/index.html}

@@ -6,6 +6,10 @@
   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
   <title>UI icon button</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+    />
   <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
   <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
   <style>
@@ -23,6 +27,6 @@
 <body>
   <div id="app"></div>
 
-  <script type="module" src="/.tmp/demo/md/buttons/icon-button.js"></script>
+  <script type="module" src="/.tmp/demo/md/icon-button/index.js"></script>
 </body>
 </html>

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

@@ -0,0 +1,236 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import IconButtonElement from '../../../src/md/icon-button/internals/IconButton.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'
+
+  _clickHandler(e: Event): void {
+    const button = e.target as IconButtonElement
+    console.log(`A ${button.localName} button was clicked.`)
+  }
+
+  _activeHandler(e: Event): void {
+    const button = e.target as IconButtonElement
+    console.log(`A ${button.localName} button was ${button.active ? '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
+          >
+
+          <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-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>
+
+      <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
+          >
+
+          <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>
+        </div>
+      </section>
+
+      <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>
+        </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>
+
+        <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>
+      </section>
+    `
+  }
+}
+
+const instance = new ComponentDemoPage()
+instance.render()