@api-client/ui 0.5.47 → 0.5.48

package/build/src/elements/user/internals/UserAvatar.js

@@ -1,10 +1,18 @@
 import { __esDecorate, __runInitializers } from "tslib";
-import { html, LitElement, svg } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import '@material/web/focus/md-focus-ring.js';
-import '@material/web/ripple/ripple.js';
+import { html, svg } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { UiElement } from '../../../md/UiElement.js';
+import { setDisabled } from '../../../lib/disabled.js';
+import '../../../md/focus-ring/ui-focus-ring.js';
+import '../../../md/ripple/ui-ripple.js';
 let UserAvatar = (() => {
-    let _classSuper = LitElement;
+    let _classSuper = UiElement;
+    let _ripple_decorators;
+    let _ripple_initializers = [];
+    let _ripple_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
     let _userInitials_decorators;
     let _userInitials_initializers = [];
     let _userInitials_extraInitializers = [];
@@ -20,25 +28,51 @@ let UserAvatar = (() => {
     return class UserAvatar extends _classSuper {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _ripple_decorators = [query('ui-ripple')];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
             _userInitials_decorators = [state()];
             _userPicture_decorators = [state()];
             _user_decorators = [property({ type: Object })];
             _type_decorators = [property({ type: String })];
+            __esDecorate(this, null, _ripple_decorators, { kind: "accessor", name: "ripple", static: false, private: false, access: { has: obj => "ripple" in obj, get: obj => obj.ripple, set: (obj, value) => { obj.ripple = value; } }, metadata: _metadata }, _ripple_initializers, _ripple_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
             __esDecorate(this, null, _userInitials_decorators, { kind: "accessor", name: "userInitials", static: false, private: false, access: { has: obj => "userInitials" in obj, get: obj => obj.userInitials, set: (obj, value) => { obj.userInitials = value; } }, metadata: _metadata }, _userInitials_initializers, _userInitials_extraInitializers);
             __esDecorate(this, null, _userPicture_decorators, { kind: "accessor", name: "userPicture", static: false, private: false, access: { has: obj => "userPicture" in obj, get: obj => obj.userPicture, set: (obj, value) => { obj.userPicture = value; } }, metadata: _metadata }, _userPicture_initializers, _userPicture_extraInitializers);
             __esDecorate(this, null, _user_decorators, { kind: "accessor", name: "user", static: false, private: false, access: { has: obj => "user" in obj, get: obj => obj.user, set: (obj, value) => { obj.user = value; } }, metadata: _metadata }, _user_initializers, _user_extraInitializers);
             __esDecorate(this, null, _type_decorators, { kind: "accessor", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_extraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
-        #userInitials_accessor_storage = __runInitializers(this, _userInitials_initializers, void 0);
+        #ripple_accessor_storage = __runInitializers(this, _ripple_initializers, null
+        /**
+         * Whether the avatar is disabled.
+         * @attribute
+         */
+        );
+        get ripple() { return this.#ripple_accessor_storage; }
+        set ripple(value) { this.#ripple_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _ripple_extraInitializers), __runInitializers(this, _disabled_initializers, false
         /**
          * Set with the user. The computed user initials.
+         * @attribute
+         */
+        ));
+        /**
+         * Whether the avatar is disabled.
+         * @attribute
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #userInitials_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _userInitials_initializers, void 0));
+        /**
+         * Set with the user. The computed user initials.
+         * @attribute
          */
         get userInitials() { return this.#userInitials_accessor_storage; }
         set userInitials(value) { this.#userInitials_accessor_storage = value; }
         #userPicture_accessor_storage = (__runInitializers(this, _userInitials_extraInitializers), __runInitializers(this, _userPicture_initializers, void 0));
         /**
          * The URL to the user picture.
+         * @attribute
          */
         get userPicture() { return this.#userPicture_accessor_storage; }
         set userPicture(value) { this.#userPicture_accessor_storage = value; }
@@ -55,12 +89,91 @@ let UserAvatar = (() => {
          */
         get type() { return this.#type_accessor_storage; }
         set type(value) { this.#type_accessor_storage = value; }
+        constructor() {
+            super();
+            __runInitializers(this, _type_extraInitializers);
+            this.addEventListener('keydown', this.handleKeyDown.bind(this));
+            this.addEventListener('keyup', this.handleKeyUp.bind(this));
+            this.addEventListener('pointerenter', this.handlePointerEnter.bind(this));
+            this.addEventListener('pointerleave', this.handlePointerLeave.bind(this));
+            this.addEventListener('click', this.handleClick.bind(this));
+            this.addEventListener('pointerdown', this.handlePointerDown.bind(this));
+            this.addEventListener('pointerup', this.handlePointerUp.bind(this));
+            this.addEventListener('pointercancel', this.handlePointerCancel.bind(this));
+            this.addEventListener('contextmenu', this.handleContextMenu.bind(this));
+        }
         willUpdate(cp) {
             if (cp.has('user')) {
                 this.handleUserChange(this.user);
             }
+            if (cp.has('disabled')) {
+                setDisabled(this, cp.get('disabled'));
+            }
             super.willUpdate(cp);
         }
+        beginPress(options) {
+            if (!this.shouldHandleInteraction()) {
+                return;
+            }
+            super.beginPress(options);
+            this.ripple?.beginPress(options.positionEvent);
+        }
+        endPress(options) {
+            if (!this.shouldHandleInteraction()) {
+                return;
+            }
+            super.endPress(options);
+            this.ripple?.endPress();
+        }
+        handleKeyDown(e) {
+            if (!this.shouldHandleInteraction()) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            if (e.code === 'Tab' || e.shiftKey)
+                return;
+            // do not prevent default, so that parent elements can handle the key event
+            this.beginPress({ positionEvent: e });
+        }
+        handleKeyUp(e) {
+            if (!this.shouldHandleInteraction()) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            // do not prevent default, so that parent elements can handle the key event
+            this.endPress({ cancelled: false, actionData: { item: this } });
+        }
+        handlePointerEnter(e) {
+            if (!this.shouldHandleInteraction()) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            this.ripple?.beginHover(e);
+        }
+        handlePointerLeave(e) {
+            if (!this.shouldHandleInteraction()) {
+                e.stopPropagation();
+                e.preventDefault();
+                return;
+            }
+            super.handlePointerLeave(e);
+            this.ripple?.endHover();
+        }
+        handleClick(e) {
+            super.handleClick(e);
+            if (this.disabled) {
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            this.endPress({ cancelled: false, actionData: { event: e } });
+        }
+        shouldHandleInteraction() {
+            return !this.disabled && this.type === 'button';
+        }
         /**
          * Handles changes to the user property.
          * @param user The user object
@@ -114,10 +227,8 @@ let UserAvatar = (() => {
         renderButton(content) {
             return html `
       <button id="button" class="icon-button">
-        <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
-        <md-ripple></md-ripple>
+        ${this.renderFocusRing()} ${this.renderRipple()}
         <span role="presentation" class="icon">${content}</span>
-        <span class="touch"></span>
       </button>
     `;
         }
@@ -161,9 +272,11 @@ let UserAvatar = (() => {
     </svg>
     `;
         }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, _type_extraInitializers);
+        renderRipple() {
+            return html `<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`;
+        }
+        renderFocusRing() {
+            return html `<ui-focus-ring part="focus-ring" for="button"></ui-focus-ring>`;
         }
     };
 })();

package/build/src/elements/user/internals/UserAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, LitElement, PropertyValues, SVGTemplateResult, svg } from 'lit'\nimport { property, state } from 'lit/decorators.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport '@material/web/focus/md-focus-ring.js'\nimport '@material/web/ripple/ripple.js'\n\nexport type AvatarType = 'button' | 'icon'\n\nexport default class UserAvatar extends LitElement {\n  /**\n   * Set with the user. The computed user initials.\n   */\n  @state() protected accessor userInitials: string | undefined\n\n  /**\n   * The URL to the user picture.\n   */\n  @state() protected accessor userPicture: string | undefined\n\n  /**\n   * The user object to display the avatar for.\n   */\n  @property({ type: Object }) accessor user: IUser | undefined\n  /**\n   * The type of avatar to render, either 'button' or 'icon'.\n   * @attribute\n   */\n  @property({ type: String }) accessor type: AvatarType = 'button'\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('user')) {\n      this.handleUserChange(this.user)\n    }\n    super.willUpdate(cp)\n  }\n\n  /**\n   * Handles changes to the user property.\n   * @param user The user object\n   */\n  protected handleUserChange(user?: IUser): void {\n    if (user) {\n      this.userInitials = this.readUserInitials(user)\n      this.userPicture = user.picture && user.picture.url\n    } else {\n      this.userInitials = undefined\n      this.userPicture = undefined\n    }\n  }\n\n  protected readUserInitials(user: IUser): string | undefined {\n    const { name } = user\n    if (!name) {\n      return undefined\n    }\n    const max = 2\n    const parts = name\n      .split(/[\\s-]/)\n      .slice(0, max)\n      .filter((i) => !!i)\n      .map((i) => i[0])\n    return parts.join('')\n  }\n\n  protected handlePictureError(): void {\n    this.userPicture = undefined\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { userPicture } = this\n    let content: TemplateResult\n    if (userPicture) {\n      content = this.pictureTemplate(userPicture)\n    } else if (this.userInitials) {\n      content = this.nameTemplate(this.userInitials)\n    } else {\n      content = this.renderDefaultAvatar()\n    }\n    if (this.type === 'icon') {\n      return this.renderIcon(content)\n    }\n    return this.renderButton(content)\n  }\n\n  protected renderButton(content: TemplateResult): TemplateResult {\n    return html`\n      <button id=\"button\" class=\"icon-button\">\n        <md-focus-ring part=\"focus-ring\" for=\"button\"></md-focus-ring>\n        <md-ripple></md-ripple>\n        <span role=\"presentation\" class=\"icon\">${content}</span>\n        <span class=\"touch\"></span>\n      </button>\n    `\n  }\n\n  protected renderIcon(content: TemplateResult): TemplateResult {\n    return html`<span role=\"presentation\" class=\"icon\">${content}</span>`\n  }\n\n  protected pictureTemplate(url: string): TemplateResult {\n    return html`\n      <img\n        src=\"${url}\"\n        alt=\"${this.userInitials || 'Thumb'}\"\n        class=\"user-picture user-icon\"\n        @error=\"${this.handlePictureError}\"\n      />\n    `\n  }\n\n  /**\n   * Renders a bubble with user initials\n   * @param initials The user initials\n   */\n  protected nameTemplate(initials: string): TemplateResult {\n    return html` <span class=\"avatar-initials user-icon\">${initials}</span> `\n  }\n\n  protected renderDefaultAvatar(): TemplateResult {\n    return html`<span class=\"avatar-default icon\"> ${this.defaultIcon()} </span>`\n  }\n\n  protected defaultIcon(): SVGTemplateResult {\n    return svg`\n    <svg viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\">\n      <rect width=\"120\" height=\"120\" rx=\"60\" class=\"avatar-background\" />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z\"\n        class=\"avatar-lines\"\n      />\n      <path\n        d=\"M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z\"\n        class=\"avatar-lines\"\n      />\n    </svg>\n    `\n  }\n}\n"]}
+{"version":3,"file":"UserAvatar.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult, PropertyValues, SVGTemplateResult, svg } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { UiElement } from '../../../md/UiElement.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type { IUser } from '@api-client/core/models/store/User.js'\nimport type UiRipple from '../../../md/ripple/internals/ripple.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport '../../../md/focus-ring/ui-focus-ring.js'\nimport '../../../md/ripple/ui-ripple.js'\n\nexport type AvatarType = 'button' | 'icon'\n\nexport default class UserAvatar extends UiElement {\n  @query('ui-ripple') accessor ripple: UiRipple | null = null\n  /**\n   * Whether the avatar is disabled.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n  /**\n   * Set with the user. The computed user initials.\n   * @attribute\n   */\n  @state() protected accessor userInitials: string | undefined\n\n  /**\n   * The URL to the user picture.\n   * @attribute\n   */\n  @state() protected accessor userPicture: string | undefined\n\n  /**\n   * The user object to display the avatar for.\n   */\n  @property({ type: Object }) accessor user: IUser | undefined\n  /**\n   * The type of avatar to render, either 'button' or 'icon'.\n   * @attribute\n   */\n  @property({ type: String }) accessor type: AvatarType = 'button'\n\n  constructor() {\n    super()\n\n    this.addEventListener('keydown', this.handleKeyDown.bind(this))\n    this.addEventListener('keyup', this.handleKeyUp.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))\n    this.addEventListener('pointerleave', this.handlePointerLeave.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('contextmenu', this.handleContextMenu.bind(this))\n  }\n\n  protected override willUpdate(cp: PropertyValues<this>): void {\n    if (cp.has('user')) {\n      this.handleUserChange(this.user)\n    }\n    if (cp.has('disabled')) {\n      setDisabled(this, cp.get('disabled'))\n    }\n    super.willUpdate(cp)\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    if (!this.shouldHandleInteraction()) {\n      return\n    }\n    super.beginPress(options)\n    this.ripple?.beginPress(options.positionEvent)\n  }\n\n  override endPress(options: EndPressConfig): void {\n    if (!this.shouldHandleInteraction()) {\n      return\n    }\n    super.endPress(options)\n    this.ripple?.endPress()\n  }\n\n  override handleKeyDown(e: KeyboardEvent): void {\n    if (!this.shouldHandleInteraction()) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    if (e.code === 'Tab' || e.shiftKey) return\n    // do not prevent default, so that parent elements can handle the key event\n    this.beginPress({ positionEvent: e })\n  }\n\n  override handleKeyUp(e: KeyboardEvent): void {\n    if (!this.shouldHandleInteraction()) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n\n    // do not prevent default, so that parent elements can handle the key event\n    this.endPress({ cancelled: false, actionData: { item: this } })\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    if (!this.shouldHandleInteraction()) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    this.ripple?.beginHover(e)\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    if (!this.shouldHandleInteraction()) {\n      e.stopPropagation()\n      e.preventDefault()\n      return\n    }\n    super.handlePointerLeave(e)\n\n    this.ripple?.endHover()\n  }\n\n  override handleClick(e: MouseEvent): void {\n    super.handleClick(e)\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n    this.endPress({ cancelled: false, actionData: { event: e } })\n  }\n\n  protected shouldHandleInteraction(): boolean {\n    return !this.disabled && this.type === 'button'\n  }\n\n  /**\n   * Handles changes to the user property.\n   * @param user The user object\n   */\n  protected handleUserChange(user?: IUser): void {\n    if (user) {\n      this.userInitials = this.readUserInitials(user)\n      this.userPicture = user.picture && user.picture.url\n    } else {\n      this.userInitials = undefined\n      this.userPicture = undefined\n    }\n  }\n\n  protected readUserInitials(user: IUser): string | undefined {\n    const { name } = user\n    if (!name) {\n      return undefined\n    }\n    const max = 2\n    const parts = name\n      .split(/[\\s-]/)\n      .slice(0, max)\n      .filter((i) => !!i)\n      .map((i) => i[0])\n    return parts.join('')\n  }\n\n  protected handlePictureError(): void {\n    this.userPicture = undefined\n  }\n\n  /**\n   * @return Template result for an icon\n   */\n  override render(): TemplateResult {\n    const { userPicture } = this\n    let content: TemplateResult\n    if (userPicture) {\n      content = this.pictureTemplate(userPicture)\n    } else if (this.userInitials) {\n      content = this.nameTemplate(this.userInitials)\n    } else {\n      content = this.renderDefaultAvatar()\n    }\n    if (this.type === 'icon') {\n      return this.renderIcon(content)\n    }\n    return this.renderButton(content)\n  }\n\n  protected renderButton(content: TemplateResult): TemplateResult {\n    return html`\n      <button id=\"button\" class=\"icon-button\">\n        ${this.renderFocusRing()} ${this.renderRipple()}\n        <span role=\"presentation\" class=\"icon\">${content}</span>\n      </button>\n    `\n  }\n\n  protected renderIcon(content: TemplateResult): TemplateResult {\n    return html`<span role=\"presentation\" class=\"icon\">${content}</span>`\n  }\n\n  protected pictureTemplate(url: string): TemplateResult {\n    return html`\n      <img\n        src=\"${url}\"\n        alt=\"${this.userInitials || 'Thumb'}\"\n        class=\"user-picture user-icon\"\n        @error=\"${this.handlePictureError}\"\n      />\n    `\n  }\n\n  /**\n   * Renders a bubble with user initials\n   * @param initials The user initials\n   */\n  protected nameTemplate(initials: string): TemplateResult {\n    return html` <span class=\"avatar-initials user-icon\">${initials}</span> `\n  }\n\n  protected renderDefaultAvatar(): TemplateResult {\n    return html`<span class=\"avatar-default icon\"> ${this.defaultIcon()} </span>`\n  }\n\n  protected defaultIcon(): SVGTemplateResult {\n    return svg`\n    <svg viewBox=\"0 0 120 120\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"icon\">\n      <rect width=\"120\" height=\"120\" rx=\"60\" class=\"avatar-background\" />\n      <path\n        fill-rule=\"evenodd\"\n        clip-rule=\"evenodd\"\n        d=\"M78.0007 48C78.0007 57.9411 69.9419 66 60.0007 66C50.0596 66 42.0007 57.9411 42.0007 48C42.0007 38.0589 50.0596 30 60.0007 30C69.9419 30 78.0007 38.0589 78.0007 48ZM72.0007 48C72.0007 54.6274 66.6282 60 60.0007 60C53.3733 60 48.0007 54.6274 48.0007 48C48.0007 41.3726 53.3733 36 60.0007 36C66.6282 36 72.0007 41.3726 72.0007 48Z\"\n        class=\"avatar-lines\"\n      />\n      <path\n        d=\"M60.0007 75C40.5776 75 24.0286 86.4852 17.7246 102.576C19.2603 104.101 20.878 105.543 22.5706 106.896C27.2648 92.1231 41.9909 81 60.0007 81C78.0106 81 92.7367 92.1231 97.4309 106.896C99.1235 105.544 100.741 104.101 102.277 102.576C95.973 86.4853 79.4239 75 60.0007 75Z\"\n        class=\"avatar-lines\"\n      />\n    </svg>\n    `\n  }\n\n  protected renderRipple(): TemplateResult {\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<ui-focus-ring part=\"focus-ring\" for=\"button\"></ui-focus-ring>`\n  }\n}\n"]}

package/build/src/elements/user/internals/UserAvatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":";AAEA,wBAkHC"}
+{"version":3,"file":"UserAvatar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":";AAEA,wBA6GC"}

package/build/src/elements/user/internals/UserAvatar.styles.js

@@ -43,10 +43,10 @@ export default css `
     z-index: 0;
     flex: 1;
     border-radius: var(--_state-layer-shape);
-    --md-ripple-hover-color: var(--_hover-state-layer-color);
-    --md-ripple-hover-opacity: var(--_hover-state-layer-opacity);
-    --md-ripple-pressed-color: var(--_pressed-state-layer-color);
-    --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);
+
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);
   }
 
   .icon-button:hover {
@@ -68,8 +68,9 @@ export default css `
     --md-focus-ring-shape-end-start: var(--_state-layer-shape);
   }
 
-  md-ripple {
+  .ripple {
     border-radius: var(--_state-layer-shape);
+    z-index: 1;
   }
 
   .icon {
@@ -78,12 +79,6 @@ export default css `
     overflow: hidden;
   }
 
-  .touch {
-    position: absolute;
-    height: max(48px, 100%);
-    width: max(48px, 100%);
-  }
-
   .user-icon,
   .avatar-initials {
     background-color: var(--md-sys-color-primary-container, #9eeffe);

package/build/src/elements/user/internals/UserAvatar.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserAvatar.styles.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    justify-content: center;\n    height: 40px;\n    width: 40px;\n\n    --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-state-layer-color: var(\n      --md-icon-button-hover-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);\n    --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-state-layer-color: var(\n      --md-icon-button-pressed-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);\n    --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));\n  }\n\n  .icon-button {\n    background-color: rgba(0, 0, 0, 0);\n    color: var(--_icon-color);\n    place-items: center;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    place-content: center;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n    user-select: none;\n    z-index: 0;\n    flex: 1;\n    border-radius: var(--_state-layer-shape);\n    --md-ripple-hover-color: var(--_hover-state-layer-color);\n    --md-ripple-hover-opacity: var(--_hover-state-layer-opacity);\n    --md-ripple-pressed-color: var(--_pressed-state-layer-color);\n    --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);\n  }\n\n  .icon-button:hover {\n    color: var(--_hover-icon-color);\n  }\n\n  .icon-button:focus {\n    color: var(--_focus-icon-color);\n  }\n\n  .icon-button:active {\n    color: var(--_pressed-icon-color);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape-start-start: var(--_state-layer-shape);\n    --md-focus-ring-shape-start-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-start: var(--_state-layer-shape);\n  }\n\n  md-ripple {\n    border-radius: var(--_state-layer-shape);\n  }\n\n  .icon {\n    display: inline-flex;\n    border-radius: var(--_state-layer-shape);\n    overflow: hidden;\n  }\n\n  .touch {\n    position: absolute;\n    height: max(48px, 100%);\n    width: max(48px, 100%);\n  }\n\n  .user-icon,\n  .avatar-initials {\n    background-color: var(--md-sys-color-primary-container, #9eeffe);\n    color: var(--md-sys-color-on-primary-container, #001f24);\n  }\n\n  .avatar-initials {\n    text-transform: uppercase;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .user-icon,\n  .icon-button,\n  .icon {\n    height: inherit;\n    width: inherit;\n  }\n\n  .avatar-background {\n    fill: var(--md-sys-color-primary-container, #9eeffe);\n  }\n\n  .avatar-lines {\n    fill: var(--md-sys-color-on-primary-container, #001f24);\n  }\n`\n"]}
+{"version":3,"file":"UserAvatar.styles.js","sourceRoot":"","sources":["../../../../../src/elements/user/internals/UserAvatar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6GjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-flex;\n    outline: none;\n    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    justify-content: center;\n    height: 40px;\n    width: 40px;\n\n    --_focus-icon-color: var(--md-icon-button-focus-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-icon-color: var(--md-icon-button-hover-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_hover-state-layer-color: var(\n      --md-icon-button-hover-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_hover-state-layer-opacity: var(--md-icon-button-hover-state-layer-opacity, 0.08);\n    --_icon-color: var(--md-icon-button-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-icon-color: var(--md-icon-button-pressed-icon-color, var(--md-sys-color-on-surface-variant, #49454f));\n    --_pressed-state-layer-color: var(\n      --md-icon-button-pressed-state-layer-color,\n      var(--md-sys-color-on-surface-variant, #49454f)\n    );\n    --_pressed-state-layer-opacity: var(--md-icon-button-pressed-state-layer-opacity, 0.12);\n    --_state-layer-shape: var(--md-icon-button-state-layer-shape, var(--md-sys-shape-corner-full, 9999px));\n  }\n\n  .icon-button {\n    background-color: rgba(0, 0, 0, 0);\n    color: var(--_icon-color);\n    place-items: center;\n    background: none;\n    border: none;\n    box-sizing: border-box;\n    cursor: pointer;\n    display: flex;\n    place-content: center;\n    outline: none;\n    padding: 0;\n    position: relative;\n    text-decoration: none;\n    user-select: none;\n    z-index: 0;\n    flex: 1;\n    border-radius: var(--_state-layer-shape);\n\n    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);\n    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);\n  }\n\n  .icon-button:hover {\n    color: var(--_hover-icon-color);\n  }\n\n  .icon-button:focus {\n    color: var(--_focus-icon-color);\n  }\n\n  .icon-button:active {\n    color: var(--_pressed-icon-color);\n  }\n\n  md-focus-ring {\n    --md-focus-ring-shape-start-start: var(--_state-layer-shape);\n    --md-focus-ring-shape-start-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-end: var(--_state-layer-shape);\n    --md-focus-ring-shape-end-start: var(--_state-layer-shape);\n  }\n\n  .ripple {\n    border-radius: var(--_state-layer-shape);\n    z-index: 1;\n  }\n\n  .icon {\n    display: inline-flex;\n    border-radius: var(--_state-layer-shape);\n    overflow: hidden;\n  }\n\n  .user-icon,\n  .avatar-initials {\n    background-color: var(--md-sys-color-primary-container, #9eeffe);\n    color: var(--md-sys-color-on-primary-container, #001f24);\n  }\n\n  .avatar-initials {\n    text-transform: uppercase;\n    width: 100%;\n    height: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .user-icon,\n  .icon-button,\n  .icon {\n    height: inherit;\n    width: inherit;\n  }\n\n  .avatar-background {\n    fill: var(--md-sys-color-primary-container, #9eeffe);\n  }\n\n  .avatar-lines {\n    fill: var(--md-sys-color-on-primary-container, #001f24);\n  }\n`\n"]}

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

@@ -3,7 +3,7 @@ import { UiElement } from '../../UiElement.js';
 import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
 import type UiRipple from '../../ripple/internals/ripple.js';
 import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import '../../focus-ring/ui-focus-ring.js';
 export type ButtonType = 'submit' | 'reset' | 'button';
 export type MdButtonShape = 'round' | 'square';
 export type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl';

package/build/src/md/button/internals/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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"}

package/build/src/md/button/internals/base.js

@@ -6,7 +6,7 @@ import { UiElement } from '../../UiElement.js';
 import { isDisabled, setDisabled } from '../../../lib/disabled.js';
 import { findElementInShadowRoots } from '../../../lib/Dom.js';
 import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import '../../focus-ring/ui-focus-ring.js';
 let BaseButton = (() => {
     let _classSuper = UiElement;
     let _instanceExtraInitializers = [];
@@ -423,7 +423,7 @@ let BaseButton = (() => {
             return html `<slot name="icon"></slot>`;
         }
         renderFocusRing() {
-            return html `<md-focus-ring part="focus-ring" class="focus-ring" .control="${this}"></md-focus-ring>`;
+            return html `<ui-focus-ring part="focus-ring" class="focus-ring" .control="${this}"></ui-focus-ring>`;
         }
         renderRipple() {
             return html `<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`;

package/build/src/md/button/internals/base.js.map

@@ -1 +1 @@
-{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { nanoid } from 'nanoid'\nimport { UiElement } from '../../UiElement.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport type ButtonType = 'submit' | 'reset' | 'button'\nexport type MdButtonShape = 'round' | 'square'\nexport type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,\n *                               changing its selection state.\n *                               The event's `newState` and `oldState` properties (string values: 'selected' or\n *                               'unselected') detail this selection change.\n */\nexport default class BaseButton extends UiElement {\n  static readonly formAssociated = true\n\n  #internals = this.attachInternals()\n\n  /**\n   * The form associated with this element\n   * @attribute\n   */\n  get form(): HTMLFormElement | null | string {\n    return this.#internals.form\n  }\n\n  get validity() {\n    return this.#internals.validity\n  }\n\n  get validationMessage() {\n    return this.#internals.validationMessage\n  }\n\n  get willValidate() {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  #value?: string\n\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @attribute\n   */\n  @property({ type: String })\n  set value(value: string | undefined) {\n    if (this.#value === value) {\n      return\n    }\n    this.#value = value\n    this.#internals?.setFormValue(value || null)\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n  /**\n   * The default behavior of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'\n\n  /**\n   * When set, the button is a toggle button.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor toggle = false\n\n  /**\n   * Indicates that the button is currently selected.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * The shape of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'\n\n  /**\n   * The size of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is in 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  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  /**\n   * Turns a `<ui-button>` element into a popover control button; takes the ID\n   * of the popover element to control as its value.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor popoverTarget: string | undefined\n  /**\n   * Specifies the action to be performed on a popover element being controlled\n   * by a control <ui-button>. Possible values are:\n   *\n   * - `hide` - The button will hide a shown popover. If you try to hide an already hidden popover,\n   *   no action will be taken.\n   * - `show` - The button will show a hidden popover. If you try to show an already showing popover,\n   *   no action will be taken.\n   * - `toggle` - The button will toggle a popover between showing and hidden. If the popover is hidden,\n   *   it will be shown; if the popover is showing, it will be hidden. If popoverTargetAction is omitted,\n   *   \"toggle\" is the default action that will be performed by the control button.\n   */\n  @property({ type: String, reflect: true }) accessor popoverTargetAction: string | undefined\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('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.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  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('popoverTarget')) {\n      this.setupPopoverTarget()\n    }\n    super.update(changedProperties)\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp)\n\n    // If the button is disabled, remove the tabindex attribute\n    if (cp.has('disabled')) {\n      if (this.disabled) {\n        this.removeAttribute('tabindex')\n      } else if (!this.hasAttribute('tabindex')) {\n        this.setAttribute('tabindex', '0')\n      }\n    }\n\n    if (cp.has('toggle') || cp.has('selected')) {\n      this.updatePressedState()\n    }\n  }\n\n  protected updatePressedState(): void {\n    if (this.toggle) {\n      this.ariaPressed = String(this.selected)\n    } else {\n      this.selected = false\n      this.removeAttribute('aria-pressed')\n    }\n  }\n\n  checkValidity() {\n    return this.#internals.checkValidity()\n  }\n\n  reportValidity() {\n    return this.#internals.reportValidity()\n  }\n\n  protected override firstUpdated(): void {\n    this.#internals?.setFormValue(this.value || null)\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.classList.add('pressed')\n    this.ripple?.beginFocus()\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.classList.remove('pressed')\n    this.ripple?.endFocus()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    const allowedReasons = reason === 'enter' || reason === 'space'\n    if (this.type === 'submit' && (!reason || allowedReasons)) {\n      this.handleSubmit()\n    } else if (this.type === 'reset' && (!reason || allowedReasons)) {\n      this.handleReset()\n    } else if (allowedReasons) {\n      this.click()\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    // Do not call super.handleClick() here, as it would call `endPress` again.\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected\n      const e = new ToggleEvent('toggle', {\n        bubbles: true,\n        composed: true,\n        newState: this.selected ? 'selected' : 'unselected',\n        oldState: this.selected ? 'unselected' : 'selected',\n      })\n      this.dispatchEvent(e)\n    }\n    this.handlePopoverAction()\n    this.endPress({ cancelled: false, actionData: { event: e } })\n  }\n\n  protected setupPopoverTarget(): void {\n    const id = this.popoverTarget\n    if (!id) {\n      return\n    }\n    const element = findElementInShadowRoots(id, this)\n    if (!element) {\n      return\n    }\n    // A regular button first sets its value to the popover target ID,\n    this.value = id\n    // create an anchor association with the popover target\n    if (!this.id) {\n      this.id = nanoid()\n    }\n    const anchorName = `--anchor-${this.id}`\n    this.style.setProperty('anchor-name', anchorName)\n    element.style.setProperty('position-anchor', anchorName)\n    this.setAttribute('aria-details', id)\n    this.setAttribute('aria-controls', id)\n  }\n\n  /**\n   * When the button has a popover target, this method toggles the popover\n   * visibility by finding the element in the shadow roots and calling its\n   * `togglePopover` method.\n   */\n  protected handlePopoverAction(): void {\n    const id = this.popoverTarget\n    if (!id) {\n      return\n    }\n    const element = findElementInShadowRoots(id, this)\n    if (!element) {\n      return\n    }\n    const action = this.popoverTargetAction || 'toggle'\n    if (action === 'hide') {\n      element.hidePopover()\n    } else if (action === 'show') {\n      element.showPopover()\n    } else {\n      element.togglePopover()\n    }\n    element.focus()\n  }\n\n  protected handleSubmit(): void {\n    const { name, value, type, disabled, form } = this\n    if (!form || !type || disabled) {\n      return\n    }\n    const typedForm = form as HTMLFormElement\n    let button: HTMLButtonElement | undefined\n    if (name || value) {\n      button = document.createElement('button')\n      if (name) {\n        button.name = name\n      }\n      if (value) {\n        button.value = value\n      }\n      button.type = type\n      button.hidden = true\n      typedForm.append(button)\n    }\n    try {\n      typedForm.requestSubmit(button)\n    } catch {\n      // Ignore errors\n    }\n    if (button) {\n      typedForm.removeChild(button)\n    }\n  }\n\n  protected handleReset(): void {\n    const form = this.form as HTMLFormElement\n    form?.reset()\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\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 override render(): TemplateResult {\n    const { trailingIcon = false } = this\n    const icon = this.renderIcon()\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}\n      <slot></slot>\n      ${trailingIcon ? icon : nothing}\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\"></slot>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n\n  protected renderRipple(): TemplateResult {\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n  }\n}\n"]}
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../../../../src/md/button/internals/base.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAA4C,MAAM,KAAK,CAAA;AAC7E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAA;AAE9C,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAElE,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAA;AAE9D,OAAO,2BAA2B,CAAA;AAClC,OAAO,mCAAmC,CAAA;;sBAiBF,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA5B,UAAW,SAAQ,WAAS;;;gCA6B9C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAY1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAa1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gCAMrE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kCAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAM1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iCAM1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gCAMzC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAUzC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kCAO1C,KAAK,CAAC,WAAW,CAAC;yCAOlB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAazC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YA5Fd,iKAAS,IAAI,6BAAJ,IAAI,mFAAoB;YAa7D,iLAAI,KAAK,wEAMR;YAMsE,yLAAS,YAAY,6BAAZ,YAAY,mGAAQ;YAMzD,iKAAS,IAAI,6BAAJ,IAAI,mFAAuB;YAMnC,uKAAS,MAAM,6BAAN,MAAM,uFAAQ;YAMvB,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAM1B,oKAAS,KAAK,6BAAL,KAAK,qFAAyB;YAMvC,iKAAS,IAAI,6BAAJ,IAAI,mFAAoB;YAW5E,0LAAI,QAAQ,wEAIX;YAEmB,uKAAmB,MAAM,6BAAN,MAAM,uFAAkB;YAOpB,4LAAS,aAAa,6BAAb,aAAa,qGAAoB;YAa1C,8MAAS,mBAAmB,6BAAnB,mBAAmB,iHAAoB;;;QAxH3F,MAAM,CAAU,cAAc,GAAG,IAAI,CAAA;QAErC,UAAU,IAHS,mDAAU,EAGhB,IAAI,CAAC,eAAe,EAAE,EAAA;QAEnC;;;WAGG;QACH,IAAI,IAAI;YACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA;QAC7B,CAAC;QAED,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA;QACjC,CAAC;QAED,IAAI,iBAAiB;YACnB,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAA;QAC1C,CAAC;QAED,IAAI,YAAY;YACd,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAA;QACrC,CAAC;QAM2B,6EAAiC;QAJ7D;;;WAGG;QACyB,IAAS,IAAI,0CAAoB;QAAjC,IAAS,IAAI,gDAAoB;QAE7D,MAAM,oDAAS;QAEf,IAAI,KAAK;YACP,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC;QAED;;;WAGG;QAEH,IAAI,KAAK,CAAC,KAAyB;YACjC,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAM;YACR,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;YACnB,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC,CAAA;QAC9C,CAAC;QAMsE,qFAAwB,KAAK;QAEpG;;;WAGG;UALiG;QAJpG;;;WAGG;QACoE,IAAS,YAAY,kDAAQ;QAA7B,IAAS,YAAY,wDAAQ;QAMzD,gIAA4B,QAAQ;QAE/E;;;WAGG;WAL4E;QAJ/E;;;WAGG;QACwC,IAAS,IAAI,0CAAuB;QAApC,IAAS,IAAI,gDAAuB;QAMnC,4HAAkB,KAAK;QAEnE;;;WAGG;WALgE;QAJnE;;;WAGG;QACyC,IAAS,MAAM,4CAAQ;QAAvB,IAAS,MAAM,kDAAQ;QAMvB,kIAAoB,KAAK;QAErE;;;WAGG;WALkE;QAJrE;;;WAGG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAM1B,8HAAgC,OAAO;QAElF;;;WAGG;WAL+E;QAJlF;;;WAGG;QACwC,IAAS,KAAK,2CAAyB;QAAvC,IAAS,KAAK,iDAAyB;QAMvC,yHAA8B,GAAG,GAAA;QAJ5E;;;WAGG;QACwC,IAAS,IAAI,0CAAoB;QAAjC,IAAS,IAAI,gDAAoB;QAE5E,IAAI,QAAQ;YACV,OAAO,UAAU,CAAC,IAAI,CAAC,CAAA;QACzB,CAAC;QAED;;;WAGG;QAEH,IAAI,QAAQ,CAAC,KAAc;YACzB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;YAC5B,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACxB,IAAI,CAAC,aAAa,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QACrC,CAAC;QAEmB,qIAA2C;QAA3C,IAAmB,MAAM,4CAAkB;QAA3C,IAAmB,MAAM,kDAAkB;QAOpB,qJAA0C;QALrF;;;;WAIG;QACwC,IAAS,aAAa,mDAAoB;QAA1C,IAAS,aAAa,yDAAoB;QAa1C,wKAAgD;QAZ3F;;;;;;;;;;;WAWG;QACwC,IAAS,mBAAmB,yDAAoB;QAAhD,IAAS,mBAAmB,+DAAoB;QAE3F;YACE,KAAK,EAAE,CAAA;;YACP,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,GAAG,IAAI,CAAA;YACjD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC/D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACvE,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACnE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3E,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzE,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;SACxE;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;YACrC,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACrD,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACpC,CAAC;QACH,CAAC;QAEkB,MAAM,CAAC,iBAAuC;YAC/D,IAAI,iBAAiB,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC3B,CAAC;YACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAA;QACjC,CAAC;QAEkB,OAAO,CAAC,EAAwB;YACjD,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;YAEjB,2DAA2D;YAC3D,IAAI,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAA;gBAClC,CAAC;qBAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,EAAE,CAAC;oBAC1C,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;gBACpC,CAAC;YACH,CAAC;YAED,IAAI,EAAE,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,kBAAkB,EAAE,CAAA;YAC3B,CAAC;QACH,CAAC;QAES,kBAAkB;YAC1B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;YAC1C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;gBACrB,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAA;YACtC,CAAC;QACH,CAAC;QAED,aAAa;YACX,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAA;QACxC,CAAC;QAED,cAAc;YACZ,OAAO,IAAI,CAAC,UAAU,CAAC,cAAc,EAAE,CAAA;QACzC,CAAC;QAEkB,YAAY;YAC7B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAA;QACnD,CAAC;QAEQ,UAAU,CAAC,OAAyB;YAC3C,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAA;YACzB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,SAAS,CAAC,CAAA;YAC7B,IAAI,CAAC,MAAM,EAAE,UAAU,EAAE,CAAA;QAC3B,CAAC;QAEQ,QAAQ,CAAC,MAAsB;YACtC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;YACtB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;YAChC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAA;YACvB,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;YACpC,IAAI,SAAS,EAAE,CAAC;gBACd,OAAM;YACR,CAAC;YACD,MAAM,cAAc,GAAG,MAAM,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,CAAA;YAC/D,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,EAAE,CAAC;gBAC1D,IAAI,CAAC,YAAY,EAAE,CAAA;YACrB,CAAC;iBAAM,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,CAAC,CAAC,MAAM,IAAI,cAAc,CAAC,EAAE,CAAC;gBAChE,IAAI,CAAC,WAAW,EAAE,CAAA;YACpB,CAAC;iBAAM,IAAI,cAAc,EAAE,CAAC;gBAC1B,IAAI,CAAC,KAAK,EAAE,CAAA;YACd,CAAC;QACH,CAAC;QAEQ,WAAW,CAAC,CAAa;YAChC,2EAA2E;YAC3E,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,CAAC,CAAC,cAAc,EAAE,CAAA;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,OAAM;YACR,CAAC;YAED,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAA;gBAC9B,MAAM,CAAC,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;oBAClC,OAAO,EAAE,IAAI;oBACb,QAAQ,EAAE,IAAI;oBACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;oBACnD,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;iBACpD,CAAC,CAAA;gBACF,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAA;YACvB,CAAC;YACD,IAAI,CAAC,mBAAmB,EAAE,CAAA;YAC1B,IAAI,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAA;QAC/D,CAAC;QAES,kBAAkB;YAC1B,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAA;YAC7B,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,OAAM;YACR,CAAC;YACD,MAAM,OAAO,GAAG,wBAAwB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;YAClD,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YACD,kEAAkE;YAClE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAA;YACf,uDAAuD;YACvD,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,EAAE,GAAG,MAAM,EAAE,CAAA;YACpB,CAAC;YACD,MAAM,UAAU,GAAG,YAAY,IAAI,CAAC,EAAE,EAAE,CAAA;YACxC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,aAAa,EAAE,UAAU,CAAC,CAAA;YACjD,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,UAAU,CAAC,CAAA;YACxD,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC,CAAA;YACrC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,EAAE,CAAC,CAAA;QACxC,CAAC;QAED;;;;WAIG;QACO,mBAAmB;YAC3B,MAAM,EAAE,GAAG,IAAI,CAAC,aAAa,CAAA;YAC7B,IAAI,CAAC,EAAE,EAAE,CAAC;gBACR,OAAM;YACR,CAAC;YACD,MAAM,OAAO,GAAG,wBAAwB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAA;YAClD,IAAI,CAAC,OAAO,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YACD,MAAM,MAAM,GAAG,IAAI,CAAC,mBAAmB,IAAI,QAAQ,CAAA;YACnD,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;gBACtB,OAAO,CAAC,WAAW,EAAE,CAAA;YACvB,CAAC;iBAAM,IAAI,MAAM,KAAK,MAAM,EAAE,CAAC;gBAC7B,OAAO,CAAC,WAAW,EAAE,CAAA;YACvB,CAAC;iBAAM,CAAC;gBACN,OAAO,CAAC,aAAa,EAAE,CAAA;YACzB,CAAC;YACD,OAAO,CAAC,KAAK,EAAE,CAAA;QACjB,CAAC;QAES,YAAY;YACpB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;YAClD,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE,CAAC;gBAC/B,OAAM;YACR,CAAC;YACD,MAAM,SAAS,GAAG,IAAuB,CAAA;YACzC,IAAI,MAAqC,CAAA;YACzC,IAAI,IAAI,IAAI,KAAK,EAAE,CAAC;gBAClB,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;gBACzC,IAAI,IAAI,EAAE,CAAC;oBACT,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;gBACpB,CAAC;gBACD,IAAI,KAAK,EAAE,CAAC;oBACV,MAAM,CAAC,KAAK,GAAG,KAAK,CAAA;gBACtB,CAAC;gBACD,MAAM,CAAC,IAAI,GAAG,IAAI,CAAA;gBAClB,MAAM,CAAC,MAAM,GAAG,IAAI,CAAA;gBACpB,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;YAC1B,CAAC;YACD,IAAI,CAAC;gBACH,SAAS,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;YACjC,CAAC;YAAC,MAAM,CAAC;gBACP,gBAAgB;YAClB,CAAC;YACD,IAAI,MAAM,EAAE,CAAC;gBACX,SAAS,CAAC,WAAW,CAAC,MAAM,CAAC,CAAA;YAC/B,CAAC;QACH,CAAC;QAES,WAAW;YACnB,MAAM,IAAI,GAAG,IAAI,CAAC,IAAuB,CAAA;YACzC,IAAI,EAAE,KAAK,EAAE,CAAA;QACf,CAAC;QAEQ,kBAAkB,CAAC,CAAe;YACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;QAC5B,CAAC;QAEQ,kBAAkB,CAAC,CAAe;YACzC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAA;YAC3B,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAA;QACzB,CAAC;QAEkB,MAAM;YACvB,MAAM,EAAE,YAAY,GAAG,KAAK,EAAE,GAAG,IAAI,CAAA;YACrC,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,CAAA;YAE9B,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,IAAI,YAAY,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI;;QAE9E,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO;KAChC,CAAA;QACH,CAAC;QAES,UAAU;YAClB,OAAO,IAAI,CAAA,2BAA2B,CAAA;QACxC,CAAC;QAES,eAAe;YACvB,OAAO,IAAI,CAAA,iEAAiE,IAAmB,oBAAoB,CAAA;QACrH,CAAC;QAES,YAAY;YACpB,OAAO,IAAI,CAAA,wCAAwC,IAAI,CAAC,QAAQ,gBAAgB,CAAA;QAClF,CAAC;;;AAzWH;;;;;;;;;;GAUG;AACH","sourcesContent":["import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'\nimport { property, query } from 'lit/decorators.js'\nimport { nanoid } from 'nanoid'\nimport { UiElement } from '../../UiElement.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\nimport { isDisabled, setDisabled } from '../../../lib/disabled.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport { findElementInShadowRoots } from '../../../lib/Dom.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '../../focus-ring/ui-focus-ring.js'\n\nexport type ButtonType = 'submit' | 'reset' | 'button'\nexport type MdButtonShape = 'round' | 'square'\nexport type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'\n\n/**\n * A material design button with M3 Expressive features - CSS-native implementation.\n *\n * @slot icon - A slot for the icon element\n * @slot - The default slot for the label\n * @attribute {string} form - The form associated with this element when the element is outside the form.\n * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,\n *                               changing its selection state.\n *                               The event's `newState` and `oldState` properties (string values: 'selected' or\n *                               'unselected') detail this selection change.\n */\nexport default class BaseButton extends UiElement {\n  static readonly formAssociated = true\n\n  #internals = this.attachInternals()\n\n  /**\n   * The form associated with this element\n   * @attribute\n   */\n  get form(): HTMLFormElement | null | string {\n    return this.#internals.form\n  }\n\n  get validity() {\n    return this.#internals.validity\n  }\n\n  get validationMessage() {\n    return this.#internals.validationMessage\n  }\n\n  get willValidate() {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * The name of the button, submitted as a pair with the button's value as part of the form data.\n   * @attribute\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  #value?: string\n\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  /**\n   * Defines the value associated with the button's name when it's submitted with the form data.\n   * @attribute\n   */\n  @property({ type: String })\n  set value(value: string | undefined) {\n    if (this.#value === value) {\n      return\n    }\n    this.#value = value\n    this.#internals?.setFormValue(value || null)\n  }\n\n  /**\n   * Whether to render the icon at the inline end of the label rather than the inline start.\n   * @attribute\n   */\n  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false\n\n  /**\n   * The default behavior of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'\n\n  /**\n   * When set, the button is a toggle button.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor toggle = false\n\n  /**\n   * Indicates that the button is currently selected.\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * The shape of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'\n\n  /**\n   * The size of the button.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'\n\n  get disabled(): boolean {\n    return isDisabled(this)\n  }\n\n  /**\n   * When set, the button is in 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  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  /**\n   * Turns a `<ui-button>` element into a popover control button; takes the ID\n   * of the popover element to control as its value.\n   * @attribute\n   */\n  @property({ type: String, reflect: true }) accessor popoverTarget: string | undefined\n  /**\n   * Specifies the action to be performed on a popover element being controlled\n   * by a control <ui-button>. Possible values are:\n   *\n   * - `hide` - The button will hide a shown popover. If you try to hide an already hidden popover,\n   *   no action will be taken.\n   * - `show` - The button will show a hidden popover. If you try to show an already showing popover,\n   *   no action will be taken.\n   * - `toggle` - The button will toggle a popover between showing and hidden. If the popover is hidden,\n   *   it will be shown; if the popover is showing, it will be hidden. If popoverTargetAction is omitted,\n   *   \"toggle\" is the default action that will be performed by the control button.\n   */\n  @property({ type: String, reflect: true }) accessor popoverTargetAction: string | undefined\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('pointerleave', this.handlePointerLeave.bind(this))\n    this.addEventListener('pointerenter', this.handlePointerEnter.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  protected override update(changedProperties: PropertyValues<this>): void {\n    if (changedProperties.has('popoverTarget')) {\n      this.setupPopoverTarget()\n    }\n    super.update(changedProperties)\n  }\n\n  protected override updated(cp: PropertyValues<this>): void {\n    super.updated(cp)\n\n    // If the button is disabled, remove the tabindex attribute\n    if (cp.has('disabled')) {\n      if (this.disabled) {\n        this.removeAttribute('tabindex')\n      } else if (!this.hasAttribute('tabindex')) {\n        this.setAttribute('tabindex', '0')\n      }\n    }\n\n    if (cp.has('toggle') || cp.has('selected')) {\n      this.updatePressedState()\n    }\n  }\n\n  protected updatePressedState(): void {\n    if (this.toggle) {\n      this.ariaPressed = String(this.selected)\n    } else {\n      this.selected = false\n      this.removeAttribute('aria-pressed')\n    }\n  }\n\n  checkValidity() {\n    return this.#internals.checkValidity()\n  }\n\n  reportValidity() {\n    return this.#internals.reportValidity()\n  }\n\n  protected override firstUpdated(): void {\n    this.#internals?.setFormValue(this.value || null)\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.classList.add('pressed')\n    this.ripple?.beginFocus()\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.classList.remove('pressed')\n    this.ripple?.endFocus()\n    const { cancelled, reason } = config\n    if (cancelled) {\n      return\n    }\n    const allowedReasons = reason === 'enter' || reason === 'space'\n    if (this.type === 'submit' && (!reason || allowedReasons)) {\n      this.handleSubmit()\n    } else if (this.type === 'reset' && (!reason || allowedReasons)) {\n      this.handleReset()\n    } else if (allowedReasons) {\n      this.click()\n    }\n  }\n\n  override handleClick(e: MouseEvent): void {\n    // Do not call super.handleClick() here, as it would call `endPress` again.\n    if (this.disabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    if (this.toggle) {\n      this.selected = !this.selected\n      const e = new ToggleEvent('toggle', {\n        bubbles: true,\n        composed: true,\n        newState: this.selected ? 'selected' : 'unselected',\n        oldState: this.selected ? 'unselected' : 'selected',\n      })\n      this.dispatchEvent(e)\n    }\n    this.handlePopoverAction()\n    this.endPress({ cancelled: false, actionData: { event: e } })\n  }\n\n  protected setupPopoverTarget(): void {\n    const id = this.popoverTarget\n    if (!id) {\n      return\n    }\n    const element = findElementInShadowRoots(id, this)\n    if (!element) {\n      return\n    }\n    // A regular button first sets its value to the popover target ID,\n    this.value = id\n    // create an anchor association with the popover target\n    if (!this.id) {\n      this.id = nanoid()\n    }\n    const anchorName = `--anchor-${this.id}`\n    this.style.setProperty('anchor-name', anchorName)\n    element.style.setProperty('position-anchor', anchorName)\n    this.setAttribute('aria-details', id)\n    this.setAttribute('aria-controls', id)\n  }\n\n  /**\n   * When the button has a popover target, this method toggles the popover\n   * visibility by finding the element in the shadow roots and calling its\n   * `togglePopover` method.\n   */\n  protected handlePopoverAction(): void {\n    const id = this.popoverTarget\n    if (!id) {\n      return\n    }\n    const element = findElementInShadowRoots(id, this)\n    if (!element) {\n      return\n    }\n    const action = this.popoverTargetAction || 'toggle'\n    if (action === 'hide') {\n      element.hidePopover()\n    } else if (action === 'show') {\n      element.showPopover()\n    } else {\n      element.togglePopover()\n    }\n    element.focus()\n  }\n\n  protected handleSubmit(): void {\n    const { name, value, type, disabled, form } = this\n    if (!form || !type || disabled) {\n      return\n    }\n    const typedForm = form as HTMLFormElement\n    let button: HTMLButtonElement | undefined\n    if (name || value) {\n      button = document.createElement('button')\n      if (name) {\n        button.name = name\n      }\n      if (value) {\n        button.value = value\n      }\n      button.type = type\n      button.hidden = true\n      typedForm.append(button)\n    }\n    try {\n      typedForm.requestSubmit(button)\n    } catch {\n      // Ignore errors\n    }\n    if (button) {\n      typedForm.removeChild(button)\n    }\n  }\n\n  protected handleReset(): void {\n    const form = this.form as HTMLFormElement\n    form?.reset()\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\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 override render(): TemplateResult {\n    const { trailingIcon = false } = this\n    const icon = this.renderIcon()\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}\n      <slot></slot>\n      ${trailingIcon ? icon : nothing}\n    `\n  }\n\n  protected renderIcon(): TemplateResult {\n    return html`<slot name=\"icon\"></slot>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<ui-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></ui-focus-ring>`\n  }\n\n  protected renderRipple(): TemplateResult {\n    return html`<ui-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></ui-ripple>`\n  }\n}\n"]}

package/build/src/md/checkbox/internals/CheckboxElement.d.ts

@@ -3,7 +3,7 @@ import CheckedElement from './CheckedElement.js';
 import type UiRipple from '../../ripple/internals/ripple.js';
 import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js';
 import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import '../../focus-ring/ui-focus-ring.js';
 export default class CheckboxElement extends CheckedElement {
     protected get _icon(): SVGTemplateResult | typeof nothing;
     protected accessor ripple: UiRipple | null;

package/build/src/md/checkbox/internals/CheckboxElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAEhD,OAAO,KAAK,QAAQ,MAAM,kCAAkC,CAAA;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAEhG,OAAO,2BAA2B,CAAA;AAClC,OAAO,sCAAsC,CAAA;AAE7C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,cAAc;IACzD,SAAS,KAAK,KAAK,IAAI,iBAAiB,GAAG,OAAO,OAAO,CASxD;IAEmB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,QAAQ,GAAG,IAAI,CAAA;IAE/D,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOtD,SAAS,CAAC,SAAS,IAAI,IAAI;IAIlB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAKhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAO9C,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAOlD,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAO/B,MAAM,IAAI,cAAc;CAgB5C"}
+{"version":3,"file":"CheckboxElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,iBAAiB,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,cAAc,MAAM,qBAAqB,CAAA;AAEhD,OAAO,KAAK,QAAQ,MAAM,kCAAkC,CAAA;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAA;AAEhG,OAAO,2BAA2B,CAAA;AAClC,OAAO,mCAAmC,CAAA;AAE1C,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,cAAc;IACzD,SAAS,KAAK,KAAK,IAAI,iBAAiB,GAAG,OAAO,OAAO,CASxD;IAEmB,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAG,QAAQ,GAAG,IAAI,CAAA;IAE/D,SAAS,CAAC,WAAW,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAOtD,SAAS,CAAC,SAAS,IAAI,IAAI;IAIlB,UAAU,CAAC,OAAO,EAAE,gBAAgB,GAAG,IAAI;IAK3C,QAAQ,CAAC,MAAM,EAAE,cAAc,GAAG,IAAI;IAKhC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAO9C,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC;IAOlD,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;IAOzC,kBAAkB,CAAC,CAAC,EAAE,YAAY,GAAG,IAAI;cAO/B,MAAM,IAAI,cAAc;CAgB5C"}

package/build/src/md/checkbox/internals/CheckboxElement.js

@@ -5,7 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import CheckedElement from './CheckedElement.js';
 import { check, checkIndeterminate } from '../../icons/Icons.js';
 import '../../ripple/ui-ripple.js';
-import '@material/web/focus/md-focus-ring.js';
+import '../../focus-ring/ui-focus-ring.js';
 let CheckboxElement = (() => {
     let _classSuper = CheckedElement;
     let _ripple_decorators;
@@ -79,7 +79,7 @@ let CheckboxElement = (() => {
                 pressed,
             });
             return html `
-      <md-focus-ring part="focus-ring" .control="${this}"></md-focus-ring>
+      <ui-focus-ring part="focus-ring" .control="${this}"></ui-focus-ring>
       <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>

package/build/src/md/checkbox/internals/CheckboxElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'\nimport { query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport CheckedElement from './CheckedElement.js'\nimport { check, checkIndeterminate } from '../../icons/Icons.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport default class CheckboxElement extends CheckedElement {\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this\n    if (indeterminate) {\n      return checkIndeterminate\n    }\n    if (checked) {\n      return check\n    }\n    return nothing\n  }\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  protected pressRipple(options: BeginPressConfig): void {\n    const element = this.ripple\n    if (element && !element.isPressed) {\n      element.beginPress(options.positionEvent as PointerEvent)\n    }\n  }\n\n  protected endRipple(): void {\n    this.ripple?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple(options)\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.beginPress()\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.endPress()\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <md-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>\n      <div class=\"${containerClasses}\">\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <ui-ripple class=\"ripple\" unbounded ?disabled=\"${this.disabled}\"></ui-ripple>\n        <div class=\"icon\">${this._icon}</div>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"CheckboxElement.js","sourceRoot":"","sources":["../../../../../src/md/checkbox/internals/CheckboxElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'\nimport { query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport CheckedElement from './CheckedElement.js'\nimport { check, checkIndeterminate } from '../../icons/Icons.js'\nimport type UiRipple from '../../ripple/internals/ripple.js'\nimport type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'\n\nimport '../../ripple/ui-ripple.js'\nimport '../../focus-ring/ui-focus-ring.js'\n\nexport default class CheckboxElement extends CheckedElement {\n  protected get _icon(): SVGTemplateResult | typeof nothing {\n    const { indeterminate, checked } = this\n    if (indeterminate) {\n      return checkIndeterminate\n    }\n    if (checked) {\n      return check\n    }\n    return nothing\n  }\n\n  @query('ui-ripple') protected accessor ripple!: UiRipple | null\n\n  protected pressRipple(options: BeginPressConfig): void {\n    const element = this.ripple\n    if (element && !element.isPressed) {\n      element.beginPress(options.positionEvent as PointerEvent)\n    }\n  }\n\n  protected endRipple(): void {\n    this.ripple?.endPress()\n  }\n\n  override beginPress(options: BeginPressConfig): void {\n    super.beginPress(options)\n    this.pressRipple(options)\n  }\n\n  override endPress(config: EndPressConfig): void {\n    super.endPress(config)\n    this.endRipple()\n  }\n\n  override async handleKeyDown(e: KeyboardEvent): Promise<void> {\n    super.handleKeyDown(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.beginPress()\n    }\n  }\n\n  override async handleKeyUp(e: KeyboardEvent): Promise<void> {\n    super.handleKeyUp(e)\n    if (['Space'].includes(e.code)) {\n      this.ripple?.endPress()\n    }\n  }\n\n  override handlePointerEnter(e: PointerEvent): void {\n    super.handlePointerEnter(e)\n    if (this.ripple) {\n      this.ripple.beginHover(e)\n    }\n  }\n\n  override handlePointerLeave(e: PointerEvent): void {\n    super.handlePointerLeave(e)\n    if (this.ripple) {\n      this.ripple.endHover()\n    }\n  }\n\n  protected override render(): TemplateResult {\n    const { pressed = false } = this\n    const containerClasses = classMap({\n      surface: true,\n      pressed,\n    })\n    return html`\n      <ui-focus-ring part=\"focus-ring\" .control=\"${this as HTMLElement}\"></ui-focus-ring>\n      <div class=\"${containerClasses}\">\n        <div class=\"container\"></div>\n        <div class=\"state\"></div>\n        <ui-ripple class=\"ripple\" unbounded ?disabled=\"${this.disabled}\"></ui-ripple>\n        <div class=\"icon\">${this._icon}</div>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/focus-ring/internals/focus-ring.d.ts

@@ -0,0 +1,87 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * A focus ring component that provides a visible focus indicator.
+ * This component automatically manages the visibility of the focus ring
+ * based on the focus state of its control element.
+ *
+ * @fires visibility-changed - Dispatched when the focus ring visibility changes.
+ *                           - `detail`: An object with a `visible` property (boolean).
+ */
+export default class UiFocusRing extends LitElement {
+    /**
+     * The control element that this focus ring is associated with.
+     * When the control gains or loses focus, the focus ring will show or hide.
+     */
+    accessor control: HTMLElement | undefined;
+    /**
+     * An element to attach the focus ring to. Defaults to the parent element.
+     * This is typically used when the focus ring should be positioned relative
+     * to a different element than the control.
+     */
+    accessor attach: HTMLElement | undefined;
+    /**
+     * An ID of an element that this focus ring is for.
+     * Alternative to setting the `control` property directly.
+     * @attribute
+     */
+    accessor for: string | undefined;
+    /**
+     * Whether the focus ring should render inward instead of outward.
+     * When true, the focus ring will be positioned inside the control bounds.
+     * @attribute
+     */
+    accessor inward: boolean;
+    /**
+     * The internal visibility state of the focus ring.
+     */
+    accessor visible: boolean;
+    private abortController?;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    /**
+     * Sets up the control element and event listeners.
+     */
+    private setupControl;
+    /**
+     * Cleans up event listeners.
+     */
+    private cleanupListeners;
+    /**
+     * Gets the control element from either the `control` property,
+     * the `for` attribute, or defaults to the parent element.
+     */
+    private getControl;
+    /**
+     * Handles focus events from the control element.
+     */
+    private handleFocus;
+    /**
+     * Handles blur events from the control element.
+     */
+    private handleBlur;
+    /**
+     * Handles pointer down events to hide focus ring during mouse interaction.
+     */
+    private handlePointerDown;
+    /**
+     * Determines if the focus ring should be shown based on the focus event.
+     * The focus ring should only show for keyboard navigation, not mouse clicks.
+     */
+    private shouldShowFocusRing;
+    /**
+     * Shows the focus ring.
+     */
+    show(): void;
+    /**
+     * Hides the focus ring.
+     */
+    hide(): void;
+    /**
+     * Handles the visibility changed event.
+     */
+    private onVisibilityChanged;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+//# sourceMappingURL=focus-ring.d.ts.map