@tylertech/forge 3.0.0-next.19 → 3.0.0-next.20

package/esm/badge/badge.js

@@ -8,7 +8,7 @@ import { attachShadowTemplate, CustomElement } from '@tylertech/forge-core';
 import { BaseComponent } from '../core/base/base-component';
 import { BADGE_CONSTANTS } from './badge-constants';
 const template = '<template><div class=\"forge-badge\" part=\"root\"><slot name=\"start\"></slot><slot></slot><slot name=\"end\"></slot></div></template>';
-const styles = ':host{display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, var(--forge-shape-full, 9999px));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-webkit-transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing),-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host([hide]) .forge-badge{-webkit-transform:scale(0);transform:scale(0)}:host([dot]) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host([dot]) .forge-badge>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host([strong][theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([strong][theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host([strong][theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host([strong][theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host([strong][theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not([strong]):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container, #ecc2c9));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host([strong]:is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not([strong]):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host([strong]:is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not([strong])[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host([strong][theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
+const styles = ':host{display:-webkit-box;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box}:host([hidden]){display:none}.forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000));--_badge-shape:var(--forge-badge-shape, var(--forge-shape-full, 9999px));--_badge-height:var(--forge-badge-height, 20px);--_badge-min-width:var(--forge-badge-min-width, 0);--_badge-max-width:var(--forge-badge-max-width, auto);--_badge-padding-inline:var(--forge-badge-padding-inline, var(--forge-spacing-xsmall, 8px));--_badge-padding-block:var(--forge-badge-padding-block, 0);--_badge-border-width:var(--forge-badge-border-width, var(--forge-border-thin, 1px));--_badge-border-style:var(--forge-badge-border-style, none);--_badge-border-color:var(--forge-badge-border-color, var(--_badge-color));--_badge-gap:var(--forge-badge-gap, var(--forge-spacing-xsmall, 8px));--_badge-font-weight:var(--forge-badge-font-weight, bold);--_badge-dot-size:var(--forge-badge-dot-size, 8px);--_badge-dot-height:var(--forge-badge-dot-height, var(--_badge-dot-size));--_badge-dot-width:var(--forge-badge-dot-width, var(--_badge-dot-size));--_badge-dot-padding:var(--forge-badge-dot-padding, 0);--_badge-transition-duration:var(--forge-badge-transition-duration, var(--forge-animation-duration-short4, 200ms));--_badge-transition-easing:var(--forge-badge-transition-easing, var(--forge-animation-easing-decelerate, cubic-bezier(0, 0, 0, 1)))}.forge-badge{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit);background:var(--_badge-background);color:var(--_badge-color);height:var(--_badge-height);min-width:var(--_badge-min-width);max-width:var(--_badge-max-width);border-width:var(--_badge-border-width);border-style:var(--_badge-border-style);border-color:var(--_badge-border-color);display:-webkit-inline-box;display:inline-flex;-webkit-box-align:center;align-items:center;gap:var(--_badge-gap);border-radius:var(--_badge-shape);padding-inline:var(--_badge-padding-inline);padding-block:var(--_badge-padding-block);overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;-webkit-transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing);transition:transform var(--_badge-transition-duration) var(--_badge-transition-easing),-webkit-transform var(--_badge-transition-duration) var(--_badge-transition-easing);font-weight:var(--_badge-font-weight);text-overflow:ellipsis;white-space:nowrap}::slotted(:is([slot=start],[slot=end])){font-size:inherit}:host([hide]) .forge-badge{-webkit-transform:scale(0);transform:scale(0)}:host([dot]) .forge-badge{--_badge-height:var(--_badge-dot-height);--_badge-min-width:var(--forge-badge-min-width, auto);padding:var(--_badge-dot-padding);width:var(--_badge-dot-width)}:host([dot]) .forge-badge>slot{display:none}:host([theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary-container, #d1d5ed));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary-container, #222c62))}:host([strong][theme=primary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-primary, #3f51b5));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-primary, #ffffff))}:host([theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary-container, #fff0c3));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary-container, #8a6804))}:host([strong][theme=secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-secondary, #ffc107));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-secondary, #000000))}:host([theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary-container, #d0d7ff));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary-container, #213189))}:host([strong][theme=tertiary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-tertiary, #3d5afe));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-tertiary, #ffffff))}:host([theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success-container, #cde0ce));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success-container, #19441b))}:host([strong][theme=success]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-success, #2e7d32));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-success, #ffffff))}:host([theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning-container, #f4d3c2));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning-container, #712700))}:host([strong][theme=warning]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-warning, #d14900));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-warning, #ffffff))}:host(:not([strong]):is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error-container, #ecc2c9));--_badge-color:var(--forge-badge-color, var(--forge-theme-error, #b00020))}:host([strong]:is([theme=error],[theme=danger])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-error, #b00020));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-error, #ffffff))}:host(:not([strong]):is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info-container, #c7daf0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info-container, #0b3768))}:host([strong]:is([theme=info],[theme=info-primary])) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-info, #1565c0));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-info, #ffffff))}:host(:not([strong])[theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-container-low, #ebebeb));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-container-low, #000000))}:host([strong][theme=info-secondary]) .forge-badge{--_badge-background:var(--forge-badge-background, var(--forge-theme-surface-inverse, #333333));--_badge-color:var(--forge-badge-color, var(--forge-theme-on-surface-inverse, #ffffff))}';
 /**
  * @tag forge-badge
  *

package/esm/button-area/button-area-adapter.d.ts

@@ -4,45 +4,44 @@
  * License: Apache-2.0
  */
 import { BaseAdapter, IBaseAdapter } from '../core';
-import { ForgeRippleCapableSurface } from '../ripple';
 import { IButtonAreaComponent } from './button-area';
 export interface IButtonAreaAdapter extends IBaseAdapter {
     destroy(): void;
     setDisabled(value: boolean): void;
-    addListener(type: string, listener: (event: Event) => void): void;
-    removeListener(type: string, listener: (event: Event) => void): void;
-    addSlotChangeListener(listener: () => void): void;
-    removeSlotChangeListener(listener: () => void): void;
+    addListener(type: string, listener: EventListener, capture?: boolean): void;
+    removeListener(type: string, listener: EventListener, capture?: boolean): void;
+    addButtonSlotListener(type: string, listener: EventListener): void;
+    removeButtonSlotListener(type: string, listener: EventListener): void;
+    addContentSlotListener(type: string, listener: EventListener): void;
+    removeContentSlotListener(type: string, listener: EventListener): void;
+    animateStateLayer(): void;
     startButtonObserver(callback: MutationCallback): void;
     stopButtonObserver(): void;
     detectSlottedButton(): void;
-    buttonIsDisabled(): boolean;
+    isButtonDisabled(): boolean;
     requestDisabledButtonFrame(): void;
-    createRipple(): Promise<void>;
 }
-export declare class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> implements IButtonAreaAdapter, ForgeRippleCapableSurface {
+export declare class ButtonAreaAdapter extends BaseAdapter<IButtonAreaComponent> implements IButtonAreaAdapter {
     private _rootElement;
     private _buttonSlotElement;
+    private _contentSlotElement;
     private _buttonElement?;
-    private _rippleInstance?;
     private _buttonObserver?;
-    private _destroyUserInteractionListener;
+    private _focusIndicatorElement;
+    private _stateLayerElement;
     constructor(component: IButtonAreaComponent);
     destroy(): void;
-    get root(): HTMLElement;
-    get unbounded(): boolean | undefined;
-    get disabled(): boolean | undefined;
     setDisabled(value: boolean): void;
-    addListener(type: string, listener: (event: Event) => void): void;
-    removeListener(type: string, listener: (event: Event) => void): void;
-    addSlotChangeListener(listener: () => void): void;
-    removeSlotChangeListener(listener: () => void): void;
+    addListener(type: string, listener: EventListener, capture?: boolean): void;
+    removeListener(type: string, listener: EventListener, capture?: boolean): void;
+    addButtonSlotListener(type: string, listener: EventListener): void;
+    removeButtonSlotListener(type: string, listener: EventListener): void;
+    addContentSlotListener(type: string, listener: EventListener): void;
+    removeContentSlotListener(type: string, listener: EventListener): void;
+    animateStateLayer(): void;
     startButtonObserver(callback: MutationCallback): void;
     stopButtonObserver(): void;
     detectSlottedButton(): void;
-    buttonIsDisabled(): boolean;
+    isButtonDisabled(): boolean;
     requestDisabledButtonFrame(): void;
-    createRipple(): Promise<void>;
-    private _userInteractionListener;
-    private _isRootEvent;
 }

package/esm/button-area/button-area-adapter.js

@@ -3,46 +3,52 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { addClass, getShadowElement, removeClass, toggleClass } from '@tylertech/forge-core';
-import { BaseAdapter, createUserInteractionListener } from '../core';
-import { ForgeRipple, ForgeRippleFoundation } from '../ripple';
+import { getShadowElement } from '@tylertech/forge-core';
+import { BaseAdapter } from '../core';
+import { FOCUS_INDICATOR_CONSTANTS } from '../focus-indicator';
+import { STATE_LAYER_CONSTANTS } from '../state-layer';
 import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
 export class ButtonAreaAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
         this._rootElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.ROOT);
         this._buttonSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.BUTTON_SLOT);
+        this._contentSlotElement = getShadowElement(component, BUTTON_AREA_CONSTANTS.selectors.CONTENT_SLOT);
+        this._focusIndicatorElement = getShadowElement(component, FOCUS_INDICATOR_CONSTANTS.elementName);
+        this._stateLayerElement = getShadowElement(component, STATE_LAYER_CONSTANTS.elementName);
     }
-    destroy() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
+    destroy() { }
+    setDisabled(value) {
+        var _a;
+        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, value);
+        if (value) {
+            this._focusIndicatorElement.remove();
+            this._stateLayerElement.remove();
+        }
+        else {
+            this._rootElement.append(this._focusIndicatorElement, this._stateLayerElement);
         }
     }
-    get root() {
-        return this._rootElement;
-    }
-    get unbounded() {
-        return false;
+    addListener(type, listener, capture) {
+        this._rootElement.addEventListener(type, listener, { capture });
     }
-    get disabled() {
-        return this.buttonIsDisabled();
+    removeListener(type, listener, capture) {
+        this._rootElement.removeEventListener(type, listener, { capture });
     }
-    setDisabled(value) {
-        var _a;
-        toggleClass(this._rootElement, value, BUTTON_AREA_CONSTANTS.classes.DISABLED);
-        (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.toggleAttribute(BUTTON_AREA_CONSTANTS.attributes.DISABLED, value);
+    addButtonSlotListener(type, listener) {
+        this._buttonSlotElement.addEventListener(type, listener);
     }
-    addListener(type, listener) {
-        this._rootElement.addEventListener(type, listener);
+    removeButtonSlotListener(type, listener) {
+        this._buttonSlotElement.removeEventListener(type, listener);
     }
-    removeListener(type, listener) {
-        this._rootElement.removeEventListener(type, listener);
+    addContentSlotListener(type, listener) {
+        this._contentSlotElement.addEventListener(type, listener);
     }
-    addSlotChangeListener(listener) {
-        this._buttonSlotElement.addEventListener('slotchange', listener);
+    removeContentSlotListener(type, listener) {
+        this._contentSlotElement.removeEventListener(type, listener);
     }
-    removeSlotChangeListener(listener) {
-        this._buttonSlotElement.removeEventListener('slotchange', listener);
+    animateStateLayer() {
+        this._stateLayerElement.playAnimation();
     }
     startButtonObserver(callback) {
         if (this._buttonElement) {
@@ -59,7 +65,7 @@ export class ButtonAreaAdapter extends BaseAdapter {
     detectSlottedButton() {
         this._buttonElement = this._buttonSlotElement.assignedElements()[0];
     }
-    buttonIsDisabled() {
+    isButtonDisabled() {
         var _a, _b;
         return (_b = (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.disabled) !== null && _b !== void 0 ? _b : true;
     }
@@ -70,52 +76,4 @@ export class ButtonAreaAdapter extends BaseAdapter {
             requestAnimationFrame(() => this._buttonElement.disabled = false);
         }
     }
-    async createRipple() {
-        if (!this._rippleInstance) {
-            const type = await this._userInteractionListener();
-            if (!this._rippleInstance) {
-                const adapter = Object.assign(Object.assign({}, ForgeRipple.createAdapter(this)), { isSurfaceActive: () => { var _a, _b; return this._rootElement.matches(':active') || ((_b = (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.matches(':active')) !== null && _b !== void 0 ? _b : false); }, isSurfaceDisabled: () => { var _a; return (_a = this.disabled) !== null && _a !== void 0 ? _a : true; }, isUnbounded: () => !!this.unbounded, registerInteractionHandler: (evtType, handler) => {
-                        var _a;
-                        if (this._isRootEvent(evtType)) {
-                            this._rootElement.addEventListener(evtType, handler, { passive: true });
-                        }
-                        else {
-                            (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.addEventListener(evtType, handler, { passive: true });
-                        }
-                    }, deregisterInteractionHandler: (evtType, handler) => {
-                        var _a;
-                        if (this._isRootEvent(evtType)) {
-                            this._rootElement.removeEventListener(evtType, handler, { passive: true });
-                        }
-                        else {
-                            (_a = this._buttonElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(evtType, handler, { passive: true });
-                        }
-                    }, addClass: (className) => addClass(className, this._rootElement), removeClass: (className) => removeClass(className, this._rootElement), updateCssVariable: (varName, value) => this._rootElement.style.setProperty(varName, value) });
-                this._rippleInstance = new ForgeRipple(this._rootElement, new ForgeRippleFoundation(adapter));
-                if (type === 'focusin') {
-                    this._rippleInstance.handleFocus();
-                }
-            }
-        }
-        else {
-            if (typeof this._destroyUserInteractionListener === 'function') {
-                this._destroyUserInteractionListener();
-            }
-            this._rippleInstance.destroy();
-            this._rippleInstance = undefined;
-        }
-    }
-    async _userInteractionListener() {
-        if (typeof this._destroyUserInteractionListener === 'function') {
-            this._destroyUserInteractionListener();
-        }
-        const { userInteraction, destroy } = createUserInteractionListener(this._rootElement);
-        this._destroyUserInteractionListener = destroy;
-        const { type } = await userInteraction;
-        this._destroyUserInteractionListener = undefined;
-        return type;
-    }
-    _isRootEvent(evtType) {
-        return ['touchstart', 'pointerdown', 'mousedown'].includes(evtType);
-    }
 }

package/esm/button-area/button-area-constants.d.ts

@@ -13,12 +13,14 @@ export declare const BUTTON_AREA_CONSTANTS: {
     ids: {
         ROOT: string;
         BUTTON_SLOT: string;
+        CONTENT_SLOT: string;
     };
     classes: {
-        DISABLED: string;
+        ROOT: string;
     };
     selectors: {
         ROOT: string;
         BUTTON_SLOT: string;
+        CONTENT_SLOT: string;
     };
 };

package/esm/button-area/button-area-constants.js

@@ -12,14 +12,16 @@ const attributes = {
 };
 const ids = {
     ROOT: 'root',
-    BUTTON_SLOT: 'button'
+    BUTTON_SLOT: 'button',
+    CONTENT_SLOT: 'content'
 };
 const classes = {
-    DISABLED: `forge-button-area--disabled`
+    ROOT: `forge-button-area`
 };
 const selectors = {
     ROOT: `#${ids.ROOT}`,
-    BUTTON_SLOT: `slot[name=button]`
+    BUTTON_SLOT: `slot[name=button]`,
+    CONTENT_SLOT: `#${ids.CONTENT_SLOT}`
 };
 export const BUTTON_AREA_CONSTANTS = {
     elementName,

package/esm/button-area/button-area-foundation.d.ts

@@ -14,6 +14,7 @@ export declare class ButtonAreaFoundation implements IButtonAreaFoundation {
     private _clickListener;
     private _keydownListener;
     private _pointerdownListener;
+    private _ignoreStateLayerListener;
     private _slotListener;
     constructor(_adapter: IButtonAreaAdapter);
     initialize(): void;
@@ -21,6 +22,7 @@ export declare class ButtonAreaFoundation implements IButtonAreaFoundation {
     private _handleClick;
     private _handleKeydown;
     private _handlePointerdown;
+    private _handleIgnoreStateLayer;
     private _handleSlotChange;
     private _handleButtonDisabled;
     private _shouldIgnoreEvent;

package/esm/button-area/button-area-foundation.js

@@ -9,22 +9,30 @@ export class ButtonAreaFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._disabled = false;
-        this._clickListener = event => this._handleClick(event);
-        this._keydownListener = event => this._handleKeydown(event);
-        this._pointerdownListener = event => this._handlePointerdown(event);
-        this._slotListener = () => this._handleSlotChange();
+        this._clickListener = this._handleClick.bind(this);
+        this._keydownListener = this._handleKeydown.bind(this);
+        this._pointerdownListener = this._handlePointerdown.bind(this);
+        this._ignoreStateLayerListener = this._handleIgnoreStateLayer.bind(this);
+        this._slotListener = this._handleSlotChange.bind(this);
     }
     initialize() {
         this._adapter.addListener('click', this._clickListener);
         this._adapter.addListener('keydown', this._keydownListener);
         this._adapter.addListener('pointerdown', this._pointerdownListener);
-        this._adapter.addSlotChangeListener(this._slotListener);
-        this._adapter.createRipple();
+        this._adapter.addContentSlotListener('click', this._ignoreStateLayerListener.bind(this));
+        this._adapter.addContentSlotListener('pointerdown', this._ignoreStateLayerListener.bind(this));
+        this._adapter.addContentSlotListener('pointerup', this._ignoreStateLayerListener.bind(this));
+        this._adapter.addButtonSlotListener('slotchange', this._slotListener);
     }
     disconnect() {
-        this._adapter.destroy();
         this._adapter.removeListener('click', this._clickListener);
-        this._adapter.removeSlotChangeListener(this._slotListener);
+        this._adapter.removeListener('keydown', this._keydownListener);
+        this._adapter.removeListener('pointerdown', this._pointerdownListener);
+        this._adapter.removeContentSlotListener('click', this._ignoreStateLayerListener.bind(this));
+        this._adapter.removeContentSlotListener('pointerdown', this._ignoreStateLayerListener.bind(this));
+        this._adapter.removeContentSlotListener('pointerup', this._ignoreStateLayerListener.bind(this));
+        this._adapter.removeButtonSlotListener('slotchange', this._slotListener);
+        this._adapter.destroy();
         this._adapter.stopButtonObserver();
     }
     _handleClick(event) {
@@ -51,23 +59,35 @@ export class ButtonAreaFoundation {
         if (this._shouldIgnoreEvent(event)) {
             event.stopPropagation();
         }
+        else {
+            this._adapter.animateStateLayer();
+        }
     }
     _handlePointerdown(event) {
         if (this._disabled) {
             return;
         }
-        // Prevent the ripple animation when ignored children are clicked
+        // Prevent the pointerdown if it originates from an ignored element
         if (this._shouldIgnoreEvent(event)) {
             this._adapter.requestDisabledButtonFrame();
         }
     }
+    _handleIgnoreStateLayer(event) {
+        if (this._disabled) {
+            return;
+        }
+        // Prevent the state layer animation if the event originates from an ignored element
+        if (this._shouldIgnoreEvent(event)) {
+            event.stopPropagation();
+        }
+    }
     _handleSlotChange() {
         // Clear old button-connected listeners
         this._adapter.stopButtonObserver();
         this._adapter.detectSlottedButton();
         this._adapter.startButtonObserver(() => this._handleButtonDisabled());
         // Match the component and button states if either is disabled
-        if (this._adapter.buttonIsDisabled()) {
+        if (this._adapter.isButtonDisabled()) {
             this.disabled = true;
         }
         else if (this._disabled) {
@@ -75,7 +95,7 @@ export class ButtonAreaFoundation {
         }
     }
     _handleButtonDisabled() {
-        this.disabled = this._adapter.buttonIsDisabled();
+        this.disabled = this._adapter.isButtonDisabled();
     }
     _shouldIgnoreEvent(event) {
         const eventPath = getEventPath(event);

package/esm/button-area/button-area.d.ts

@@ -13,9 +13,26 @@ declare global {
     }
 }
 /**
- * The custom element class behind the `<forge-button-area>` element.
- *
  * @tag forge-button-area
+ *
+ * @summary Button areas are used to create a clickable area that group related information and actions about a single subject.
+ *
+ * @description
+ * The button area component wraps any arbitrary content with a <button> element to enable accessible clickable interfaces including nested controls and other complex content.
+ *
+ * @property {boolean} disabled - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
+ *
+ * @attribute {boolean} disabled - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
+ *
+ * @event {Event} click - The button area emits a native HTML click event whenever it or the slotted button is clicked. Add the listener to the <forge-button-area> element to receive all events. Note: Set data-forge-ignore on any nested buttons or other interactive elements to prevent them from activating the button area.
+ *
+ * @csspart root - The root container element.
+ * @csspart button - The visually hidden slot for the <button> element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - Places content within the default (unnamed) slot (main body of the component).
+ * @slot button - Places content within a visually hidden slot. Always place a <button> element in this slot.
  */
 export declare class ButtonAreaComponent extends HTMLElement implements IButtonAreaComponent {
     static get observedAttributes(): string[];

package/esm/button-area/button-area.js

@@ -8,13 +8,31 @@ import { CustomElement, attachShadowTemplate, FoundationProperty, coerceBoolean
 import { ButtonAreaAdapter } from './button-area-adapter';
 import { ButtonAreaFoundation } from './button-area-foundation';
 import { BUTTON_AREA_CONSTANTS } from './button-area-constants';
-import { RippleComponent } from '../ripple';
-const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"forge-button-area__button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot></slot></div></template>';
-const styles = '@-webkit-keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@keyframes mdc-ripple-fg-radius-in{from{-webkit-animation-timing-function:cubic-bezier(0.4,0,0.2,1);animation-timing-function:cubic-bezier(0.4,0,0.2,1);-webkit-transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1);transform:translate(var(--mdc-ripple-fg-translate-start,0)) scale(1)}to{-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}}@-webkit-keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@keyframes mdc-ripple-fg-opacity-in{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:var(--mdc-ripple-fg-opacity, 0)}}@-webkit-keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}@keyframes mdc-ripple-fg-opacity-out{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:var(--mdc-ripple-fg-opacity, 0)}to{opacity:0}}.mdc-ripple-surface{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;position:relative;outline:0;overflow:hidden}.mdc-ripple-surface::after,.mdc-ripple-surface::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.mdc-ripple-surface::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.mdc-ripple-surface::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.mdc-ripple-surface.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.mdc-ripple-surface.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.mdc-ripple-surface.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.mdc-ripple-surface::after,.mdc-ripple-surface::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.mdc-ripple-surface.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded],.mdc-ripple-upgraded--unbounded{overflow:visible}.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded]::before,.mdc-ripple-upgraded--unbounded::after,.mdc-ripple-upgraded--unbounded::before{top:calc(50% - 50%);left:calc(50% - 50%);width:100%;height:100%}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::before,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::before{top:var(--mdc-ripple-top,calc(50% - 50%));left:var(--mdc-ripple-left,calc(50% - 50%));width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface[data-mdc-ripple-is-unbounded].mdc-ripple-upgraded::after,.mdc-ripple-upgraded--unbounded.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{background-color:#000;background-color:var(--mdc-ripple-color,#000)}.mdc-ripple-surface.mdc-ripple-surface--hover::before,.mdc-ripple-surface:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.mdc-ripple-surface.mdc-ripple-upgraded--background-focused::before,.mdc-ripple-surface:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.mdc-ripple-surface:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.mdc-ripple-surface:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.mdc-ripple-surface.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.mdc-ripple-surface::after,.mdc-ripple-surface::before{--mdc-ripple-color:var(--mdc-theme-on-surface)}.forge-button-area{overflow:hidden}.forge-button-area:not(.forge-button-area--disabled).forge-button-area{--mdc-ripple-fg-size:0;--mdc-ripple-left:0;--mdc-ripple-top:0;--mdc-ripple-fg-scale:1;--mdc-ripple-fg-translate-end:0;--mdc-ripple-fg-translate-start:0;-webkit-tap-highlight-color:transparent;will-change:transform,opacity;cursor:pointer}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{position:absolute;border-radius:50%;opacity:0;pointer-events:none;content:\"\"}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{-webkit-transition:opacity 15ms linear,background-color 15ms linear;transition:opacity 15ms linear,background-color 15ms linear;z-index:1;z-index:var(--mdc-ripple-z-index,1)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after{z-index:0;z-index:var(--mdc-ripple-z-index,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::before{-webkit-transform:scale(var(--mdc-ripple-fg-scale,1));transform:scale(var(--mdc-ripple-fg-scale,1))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::after{top:0;left:0;-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:center center;transform-origin:center center}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--unbounded::after{top:var(--mdc-ripple-top,0);left:var(--mdc-ripple-left,0)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--foreground-activation::after{-webkit-animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards;animation:mdc-ripple-fg-radius-in 225ms forwards,mdc-ripple-fg-opacity-in 75ms forwards}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--foreground-deactivation::after{-webkit-animation:mdc-ripple-fg-opacity-out 150ms;animation:mdc-ripple-fg-opacity-out 150ms;-webkit-transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1));transform:translate(var(--mdc-ripple-fg-translate-end,0)) scale(var(--mdc-ripple-fg-scale,1))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{top:calc(50% - 100%);left:calc(50% - 100%);width:200%;height:200%}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded::after{width:var(--mdc-ripple-fg-size,100%);height:var(--mdc-ripple-fg-size,100%)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:hover::before{opacity:.04;opacity:var(--mdc-ripple-hover-opacity, .04)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-focus-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.12;opacity:var(--mdc-ripple-press-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{opacity:.12;opacity:var(--mdc-ripple-activated-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:hover::before{opacity:.16;opacity:var(--mdc-ripple-hover-opacity, .16)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-focus-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.24;opacity:var(--mdc-ripple-press-opacity, .24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--activated.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.24)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{opacity:.08;opacity:var(--mdc-ripple-selected-opacity, .08)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::after,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected::before{background-color:#6200ee;background-color:var(--mdc-ripple-color,var(--mdc-theme-primary,#6200ee))}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-surface--hover::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:hover::before{opacity:.12;opacity:var(--mdc-ripple-hover-opacity, .12)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded--background-focused::before,.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):focus::before{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-focus-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded)::after{-webkit-transition:opacity 150ms linear;transition:opacity 150ms linear}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected:not(.mdc-ripple-upgraded):active::after{-webkit-transition-duration:75ms;transition-duration:75ms;opacity:.2;opacity:var(--mdc-ripple-press-opacity, .2)}.forge-button-area:not(.forge-button-area--disabled).forge-button-area--selected.mdc-ripple-upgraded{--mdc-ripple-fg-opacity:var(--mdc-ripple-press-opacity, 0.2)}.forge-button-area__button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}:host{display:block}:host([hidden]){display:none}';
+import { FocusIndicatorComponent } from '../focus-indicator';
+import { StateLayerComponent } from '../state-layer';
+const template = '<template><div class=\"forge-button-area\" id=\"root\" part=\"root\"><div class=\"button\" id=\"button\" part=\"button\"><slot name=\"button\"></slot></div><slot id=\"content\"></slot><forge-state-layer target=\"root\" exportparts=\"surface:state-layer\"></forge-state-layer><forge-focus-indicator target=\"button\" part=\"focus-indicator\" inward></forge-focus-indicator></div></template>';
+const styles = ':host{display:block;position:relative}:host .forge-button-area{cursor:var(--_button-area-cursor)}:host([hidden]){display:none}:host([disabled]) .forge-button-area{cursor:var(--_button-area-disabled-cursor)}.forge-button-area{--_button-area-primary-color:var(--forge-button-area-primary-color, var(--forge-theme-primary, #3f51b5));--_button-area-cursor:var(--forge-button-area-cursor, pointer);--_button-area-disabled-cursor:var(--forge-button-area-disabled-cursor, not-allowed);--_button-area-focus-indicator-color:var(--forge-button-area-focus-indicator-color, var(--forge-theme-primary, #3f51b5));--_button-area-focus-indicator-offset:var(--forge-button-area-focus-indicator-offset, 4px)}.forge-button-area{position:relative;overflow:hidden}.forge-button-area .button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;outline:0;-webkit-appearance:none;-moz-appearance:none}forge-focus-indicator{z-index:1;--forge-focus-indicator-color:var(--_button-area-focus-indicator-color);--forge-focus-indicator-outward-offset:var(--_button-area-focus-indicator-offset)}forge-state-layer{--forge-state-layer-color:var(--_button-area-primary-color);border-radius:inherit}';
 /**
- * The custom element class behind the `<forge-button-area>` element.
- *
  * @tag forge-button-area
+ *
+ * @summary Button areas are used to create a clickable area that group related information and actions about a single subject.
+ *
+ * @description
+ * The button area component wraps any arbitrary content with a <button> element to enable accessible clickable interfaces including nested controls and other complex content.
+ *
+ * @property {boolean} disabled - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
+ *
+ * @attribute {boolean} disabled - Sets whether the button area and slotted button are disabled. Setting this on one will also set it on the other.
+ *
+ * @event {Event} click - The button area emits a native HTML click event whenever it or the slotted button is clicked. Add the listener to the <forge-button-area> element to receive all events. Note: Set data-forge-ignore on any nested buttons or other interactive elements to prevent them from activating the button area.
+ *
+ * @csspart root - The root container element.
+ * @csspart button - The visually hidden slot for the <button> element.
+ * @csspart focus-indicator - The focus-indicator indicator element.
+ * @csspart state-layer - The state-layer surface element.
+ *
+ * @slot - Places content within the default (unnamed) slot (main body of the component).
+ * @slot button - Places content within a visually hidden slot. Always place a <button> element in this slot.
  */
 let ButtonAreaComponent = class ButtonAreaComponent extends HTMLElement {
     static get observedAttributes() {
@@ -48,7 +66,8 @@ ButtonAreaComponent = __decorate([
     CustomElement({
         name: BUTTON_AREA_CONSTANTS.elementName,
         dependencies: [
-            RippleComponent
+            FocusIndicatorComponent,
+            StateLayerComponent
         ]
     })
 ], ButtonAreaComponent);

package/esm/calendar/calendar-foundation.js

@@ -1466,9 +1466,13 @@ export class CalendarFoundation {
     }
     _applyMin() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MIN, !!this._minAttribute, this._minAttribute);
-        if (this._min && (this._min.getMonth() > this._month || this._min.getFullYear() > this._year)) {
-            this._year = this._min.getFullYear();
-            this._month = this._min.getMonth();
+        if (this._min) {
+            const minFirstOfMonth = new Date(this._min.getFullYear(), this._min.getMonth(), 1);
+            const currentFirstOfMonth = new Date(this._year, this._month, 1);
+            if (minFirstOfMonth > currentFirstOfMonth) {
+                this._year = this._min.getFullYear();
+                this._month = this._min.getMonth();
+            }
         }
         if (this._isInitialized) {
             this._applyDisabledDates();
@@ -1482,9 +1486,13 @@ export class CalendarFoundation {
     }
     _applyMax() {
         this._adapter.toggleHostAttribute(CALENDAR_CONSTANTS.attributes.MAX, !!this._maxAttribute, this._maxAttribute);
-        if (this._max && (this._max.getMonth() < this._month || this._max.getFullYear() < this._year)) {
-            this._year = this._max.getFullYear();
-            this._month = this._max.getMonth();
+        if (this._max) {
+            const maxFirstOfMonth = new Date(this._max.getFullYear(), this._max.getMonth(), 1);
+            const currentFirstOfMonth = new Date(this._year, this._month, 1);
+            if (maxFirstOfMonth < currentFirstOfMonth) {
+                this._year = this._max.getFullYear();
+                this._month = this._max.getMonth();
+            }
         }
         if (this._isInitialized) {
             this._applyDisabledDates();

package/esm/calendar/calendar.d.ts

@@ -53,6 +53,7 @@ export declare class CalendarComponent extends HTMLElement implements ICalendarC
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /** @readonly */
     activeDate: Date;
     allowSingleDateRange: boolean;
     clearButton: boolean;

package/esm/card/card.js

@@ -8,7 +8,7 @@ import { CustomElement, attachShadowTemplate, coerceBoolean, getShadowElement, t
 import { BaseComponent } from '../core/base/base-component';
 import { CARD_CONSTANTS } from './card-constants';
 const template = '<template><div class=\"forge-card\" part=\"root\"><slot></slot></div></template>';
-const styles = '.forge-card{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);border-width:1px;border-style:solid;border-color:#e0e0e0;height:100%;height:var(--forge-card-height,100%);width:100%;width:var(--forge-card-width,100%);padding:16px;padding:var(--forge-card-padding,16px);overflow:hidden;overflow:var(--forge-card-overflow,hidden);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);-webkit-box-sizing:border-box;box-sizing:border-box}.forge-card--raised{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:none}:host{display:block}:host([hidden]){display:none}';
+const styles = '.forge-card{background-color:#fff;background-color:var(--mdc-theme-surface,#fff);border-radius:4px;border-radius:var(--mdc-shape-medium,4px);border-width:1px;border-style:solid;border-color:#e0e0e0;height:100%;height:var(--forge-card-height,100%);width:100%;width:var(--forge-card-width,100%);padding:16px;padding:var(--forge-card-padding,16px);overflow:hidden;overflow:var(--forge-card-overflow,hidden);border-color:#e0e0e0;border-color:var(--forge-theme-border-color,#e0e0e0);-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent}.forge-card--raised{-webkit-box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);border:none}:host{display:block}:host([hidden]){display:none}';
 /**
  * @tag forge-card
  *

package/esm/checkbox/checkbox.js

@@ -13,7 +13,7 @@ import { CheckboxAdapter } from './checkbox-adapter';
 import { CHECKBOX_CONSTANTS } from './checkbox-constants';
 import { CheckboxFoundation } from './checkbox-foundation';
 const template = '<template><div class=\"forge-checkbox\" part=\"checkbox\"><div id=\"container\" class=\"container\"><slot name=\"input\"><input id=\"input\" class=\"input\" type=\"checkbox\"></slot><div class=\"background\" part=\"background\"><svg class=\"icon icon--checked\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"checkmark\"><path d=\"M1.73,12.91 8.1,19.28 22.79,4.59\"></path></svg> <svg class=\"icon icon--indeterminate\" aria-hidden=\"true\" viewBox=\"0 0 24 24\" part=\"mixedmark\"><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"></line></svg><forge-focus-indicator target=\"container\" part=\"focus-indicator\"></forge-focus-indicator></div><forge-state-layer target=\"container\" exportparts=\"surface:state-layer\"></forge-state-layer></div><label id=\"label\" for=\"input\" class=\"label\" part=\"label\"><slot></slot></label></div></template>';
-const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, space-between);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label-font-weight,400);line-height:var(--forge-typography-label-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label-text-decoration,inherit);text-decoration:var(--forge-typography-label-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
+const styles = ':host{display:inline-block;-webkit-tap-highlight-color:transparent}:host([hidden]){display:none}.forge-checkbox{--_checkbox-primary-color:var(--forge-checkbox-primary-color, var(--forge-theme-tertiary, #3d5afe));--_checkbox-size:var(--forge-checkbox-size, 16px);--_checkbox-border-width:var(--forge-checkbox-border-width, var(--forge-border-medium, 2px));--_checkbox-icon-color:var(--forge-checkbox-icon-color, var(--forge-theme-on-tertiary, #ffffff));--_checkbox-state-layer-size:var(--forge-checkbox-state-layer-size, 40px);--_checkbox-state-layer-dense-size:var(--forge-checkbox-state-layer-dense-size, 24px);--_checkbox-background-color:var(--forge-checkbox-background-color, var(--forge-theme-surface, #ffffff));--_checkbox-width:var(--forge-checkbox-width, var(--_checkbox-size));--_checkbox-height:var(--forge-checkbox-height, var(--_checkbox-size));--_checkbox-unchecked-border-width:var(--forge-checkbox-unchecked-border-width, var(--_checkbox-border-width));--_checkbox-unchecked-border-color:var(--forge-checkbox-unchecked-border-color, var(--forge-theme-surface-container-high, #9e9e9e));--_checkbox-shape:var(--forge-checkbox-shape, var(--forge-shape-small, 2px));--_checkbox-elevation:var(--forge-checkbox-elevation, 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12));--_checkbox-checked-background-color:var(--forge-checkbox-checked-background-color, var(--_checkbox-primary-color));--_checkbox-checked-border-width:var(--forge-checkbox-checked-border-width, var(--_checkbox-border-width));--_checkbox-checked-border-color:var(--forge-checkbox-checked-border-color, var(--_checkbox-checked-background-color));--_checkbox-icon-checked-color:var(--forge-checkbox-icon-checked-color, var(--_checkbox-icon-color));--_checkbox-icon-indeterminate-color:var(--forge-checkbox-icon-indeterminate-color, var(--_checkbox-icon-color));--_checkbox-icon-stroke-width:var(--forge-checkbox-icon-stroke-width, 4px);--_checkbox-gap:var(--forge-checkbox-gap, 0);--_checkbox-justify:var(--forge-checkbox-justify, space-between);--_checkbox-direction:var(--forge-checkbox-direction, initial);--_checkbox-state-layer-width:var(--forge-checkbox-state-layer-width, var(--_checkbox-state-layer-size));--_checkbox-state-layer-height:var(--forge-checkbox-state-layer-height, var(--_checkbox-state-layer-size));--_checkbox-state-layer-checked-color:var(--forge-checkbox-state-layer-checked-color, var(--_checkbox-primary-color));--_checkbox-state-layer-unchecked-color:var(--forge-checkbox-state-layer-unchecked-color, var(--_checkbox-color));--_checkbox-state-layer-shape:var(--forge-checkbox-state-layer-shape, var(--forge-shape-full, 9999px));--_checkbox-state-layer-dense-width:var(--forge-checkbox-state-layer-dense-width, var(--_checkbox-state-layer-dense-size));--_checkbox-state-layer-dense-height:var(--forge-checkbox-state-layer-dense-height, var(--_checkbox-state-layer-dense-size));--_checkbox-disabled-opacity:var(--forge-checkbox-disabled-opacity, 0.38);--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, var(--forge-animation-duration-short2, 100ms));--_checkbox-background-animation-timing:var(--forge-checkbox-background-animation-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));--_checkbox-icon-animation-timing:var(--forge-checkbox-icon-animation-timing, var(--forge-animation-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15)))}.forge-checkbox{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:var(--_checkbox-direction);flex-shrink:0;-webkit-box-align:center;align-items:center;-webkit-box-pack:var(--_checkbox-justify);justify-content:var(--_checkbox-justify);gap:var(--_checkbox-gap);display:-webkit-box;display:flex}.forge-checkbox .container{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;border-radius:var(--_checkbox-state-layer-shape);inline-size:var(--_checkbox-state-layer-width);block-size:var(--_checkbox-state-layer-height);cursor:pointer}.forge-checkbox .input{position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}.forge-checkbox .background{position:relative;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;display:-webkit-box;display:flex;-webkit-transition-property:background-color,border-width,border-color;transition-property:background-color,border-width,border-color;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-background-animation-timing);transition-timing-function:var(--_checkbox-background-animation-timing);-webkit-box-shadow:var(--_checkbox-elevation);box-shadow:var(--_checkbox-elevation);border-style:solid;border-width:var(--_checkbox-unchecked-border-width);border-color:var(--_checkbox-unchecked-border-color);border-radius:var(--_checkbox-shape);-webkit-box-sizing:border-box;box-sizing:border-box;block-size:var(--_checkbox-height);inline-size:var(--_checkbox-width);background-color:var(--_checkbox-background-color)}.forge-checkbox .icon{position:absolute;-webkit-transition-property:stroke-dashoffset;transition-property:stroke-dashoffset;-webkit-transition-duration:var(--_checkbox-animation-duration);transition-duration:var(--_checkbox-animation-duration);-webkit-transition-timing-function:var(--_checkbox-icon-animation-timing);transition-timing-function:var(--_checkbox-icon-animation-timing);fill:none;stroke-width:var(--_checkbox-icon-stroke-width)}.forge-checkbox .icon--checked{stroke:var(--_checkbox-icon-checked-color);stroke-dasharray:30;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}.forge-checkbox .icon--indeterminate{stroke:var(--_checkbox-icon-indeterminate-color);stroke-dasharray:20;-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}.forge-checkbox .label{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--forge-typography-label1-font-family, var(--forge-typography-font-family, \"Roboto\", sans-serif));font-size:var(--forge-typography-label1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-font-size-scale, .75)));font-weight:var(--forge-typography-label1-font-weight,400);line-height:var(--forge-typography-label1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-label-line-height-scale, 1.25)));letter-spacing:var(--forge-typography-label1-letter-spacing, .0357142857em);text-transform:var(--forge-typography-label1-text-transform,inherit);-webkit-text-decoration:var(--forge-typography-label1-text-decoration,inherit);text-decoration:var(--forge-typography-label1-text-decoration,inherit)}.forge-checkbox .label:empty{display:none}.forge-checkbox ::slotted([slot=input]){position:absolute;z-index:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0;margin:0;inline-size:100%;block-size:100%;cursor:unset}:host([checked]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([checked]) .icon--checked{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([checked]) .icon--checked:dir(rtl){stroke-dashoffset:60}:host([checked]) .icon--indeterminate{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:20}:host([checked]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([indeterminate]) .background{border-style:solid;border-width:var(--_checkbox-checked-border-width);border-color:var(--_checkbox-checked-border-color);background-color:var(--_checkbox-checked-background-color)}:host([indeterminate]) .icon--checked{-webkit-transition-delay:0s;transition-delay:0s;stroke-dashoffset:30}:host([indeterminate]) .icon--indeterminate{-webkit-transition-delay:var(--_checkbox-animation-duration);transition-delay:var(--_checkbox-animation-duration);stroke-dashoffset:0}:host([indeterminate]) .icon--indeterminate:dir(rtl){stroke-dashoffset:40}:host([indeterminate]) forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-checked-color)}:host([dense]) .forge-checkbox .container{inline-size:var(--_checkbox-state-layer-dense-width);block-size:var(--_checkbox-state-layer-dense-height)}:host([disabled]) .forge-checkbox{opacity:var(--_checkbox-disabled-opacity)}:host([disabled]) .forge-checkbox .container{cursor:not-allowed}:host([readonly]) .forge-checkbox .container{cursor:not-allowed}@media (prefers-reduced-motion){.forge-checkbox{--_checkbox-animation-duration:var(--forge-checkbox-animation-duration, 0s)}}forge-state-layer{--forge-state-layer-color:var(--_checkbox-state-layer-unchecked-color)}forge-focus-indicator{--forge-focus-indicator-shape:0px;--forge-focus-indicator-outward-offset:8px}';
 /**
  * @tag forge-checkbox
  *

package/esm/chip-field/chip-field-foundation.js

@@ -133,7 +133,7 @@ export class ChipFieldFoundation extends FieldFoundation {
         }
     }
     _memberIsActive(ele) {
-        return getActiveElement(ele.ownerDocument) === ele || ele.hasAttribute('focused');
+        return ele.matches(':focus-within') || getActiveElement(ele.ownerDocument) === ele || ele.hasAttribute('focused');
     }
     _getActiveMember() {
         const members = this._adapter.getSlottedMemberElements();